Ustvarjanje iskalnega polja za iskanje CSS3
CSS3 je jezik slogov naslednje generacije. Predstavlja veliko novih in zanimivih funkcij, kot so sence, animacije, prehodi, obmejni polmer itd. Čeprav specifikacije še niso dokončane, so mnogi proizvajalci brskalnikov že začeli podpirati številne nove funkcije..
V tej vadnici bomo raziskali nekatere od teh funkcij text-shadow, polmer meje, sence in prehodi za ustvarjanje iskalnega polja.
Photoshop različico tega iskalnega polja je ustvaril Alvin Thong in jo lahko prenesete tukaj. Poskušal sem ponovno ustvariti to iskalno polje s čistim CSS3. Treba je opozoriti, da vsi brskalniki ne podpirajo funkcij CSS3 in preizkusite to vadnico, uporabite enega od sodobnih brskalnikov, ki podpirajo funkcije CSS 3.
Ste pripravljeni? Začnimo!
1. HTML5 Doctype
Začeli bomo z oznako HTML. To je zelo preprosto, po HTML5 doctype in izjavo, imamo a s klicanim ID-jem # wrapper znotraj . To storite preprosto tako, da določite širino polja vsebine in ga poravnate s središčem strani.
Temu sledi a Kako izgleda koda: Za ustvarjanje velikega okenca okoli obrazca bomo dodali sloge Pomemben del kode je tukaj Pojasnilo: Tukaj ključna beseda inset določa, ali bo senca znotraj polja. Prva dva ničla označujeta x-offset in y-offset in 3px označuje zamegljenost. Naprej je deklaracija barv. Tu sem uporabil vrednosti rgba; rgba pomeni rdeča zelena modra in alfa (motnost). Tako 4 vrednosti v oklepaju označujejo količino rdeče, zelene, modre in njene alfa (motnosti). Opazili boste, da je bilo skupaj 5 deklaracij v senci. To lahko storite tako, da jih ločite z vejico. Prvi dve senci določata učinek belega "notranjega sijaja" in naslednje deklaracije dajejo škatli trdnost in močen videz.. Igrajte se s temi vrednostmi, da boste razumeli, kako deluje. Zdaj, ko je polje dokončano, preidemo na styling vnosnega polja. Slogi, ki so bili prijavljeni za vnosno polje, so precej podobni tistim, ki so bili izločeni za veliko polje Pojasnilo: Opazili boste, da je bilo tokrat senčno zamegljenost ohranjena pri 0, da bi dosegli ostro senco in uporabili vertikalni odmik 5px. V zaporednih deklaracijah je bila zamegljenost ohranjena na 0px, vendar sta bila barva in y-offset spremenjena. Še enkrat se zavedajte teh vrednosti, da dobite različne rezultate. Slog gumba za iskanje. Poleg barv ima gumb za iskanje večinoma enake sloge kot zunanji okvir. Na gumbu so bili uporabljeni podobni meji polmera in škatle. Nova funkcija je Pojasnilo: V Aktivno stanje gumba ima nekoliko več sprememb. Pri tem sem gumbu dal položaj absolutne in 'top' vrednosti 5px. To je bilo narejeno za bolj naraven videz, tako da se zdi, da je gumb dejansko potisnjen za 5 pikslov. Druge spremembe aktivnega stanja so barve ozadja in sence. Opazil sem, da sem zmanjšal y-offset senc, da bi mu dal "stisnjen" videz. Tu je koda za aktivno stanje gumba za pošiljanje: S tem se zaključi naše iskalno polje. Uporabili smo kar nekaj novih funkcij CSS3. Tu je celoten CSS in HTML tega iskalnega polja. Upam, da ste uživali v tej vadnici. Lahko eksperimentirate s temi funkcijami in ne pozabite deliti svojih misli. Opomba urednika: To objavo je napisal Bharani M za Hongkiat.com. Bharani je oblikovalec / razvijalec iz New Delhija v Indiji.#main. Ta ID vsebuje sloge, ki določajo veliko belo polje okrog polja za vnos in gumb za iskanje. To deklarirano v njem. Obrazec ima za vnos besedila in search gumb. Izgleda, kako obrazec izgleda, brez kakršnih koli slogov: 
Polje za iskanje CSS3
2. Ustvarjanje omejitvenega polja
#main. Iz spodnje kode boste opazili, da je polje dobilo širino 400px in višino 50px. #main width: 400px; višina: 50px; ozadje: # f2f2f2; oblazinjenje: 6px 10px; obroba: 1px solid # b5b5b5; -moz-border-radius: 5px; -webkit-border-radius: 5px; obrobni polmer: 5px; -moz-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.8), inset 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.8), inset 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.8), inset 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede;
polmer meje deklaracijo in. \ t box-shadow deklaracije. Za ustvarjanje zaobljenih vogalov smo uporabili deklaracijo CSS3 obmejnega polmera, "-moz-" in "-webkit-" predpone brskalnika, s katerimi smo zagotovili, da to deluje v gecko in webkit brskalnikih. Deklaracije s senčnimi polji so morda videti zmedeno, vendar je dejansko zelo preprosto. box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.8), inset 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede;
Predogled
3. Oblikovanje vnosnega polja
input [type = "text"] float: levo; širina: 230px; oblazinjenje: 15px 5px 5px 5px; margin-top: 5px; margin-left: 3px; meja: 1px trdna # 999999; -moz-border-radius: 5px; -webkit-border-radius: 5px; obrobni polmer: 5px; -moz-box-shadow: vložek 0 5px 0 #ccc, inset 0 6px 0 # 989898, priloga 0 13px 0 #dfdede; -webkit-box-shadow: vložek 0 5px 0 #ccc, inset 0 6px 0 # 989898, priloga 0 13px 0 #dfdede; box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 # 989898, inset 0 13px 0 #dfdede;
#main. Uporabili smo enak polmer meje (5 px). Še enkrat, več škatlic sence je bilo zlomljenih. box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 # 989898, inset 0 13px 0 #dfdede;
Predogled
4. Oblikovanje gumba za pošiljanje
input [type = "submit"] solid float: levo; kazalec: kazalec; širina: 130px; oblazinjenje: 8px 6px; margin-left: 20px; barva ozadja: # f8b838; barva: rgba (134, 79, 11, 0.8); text-transform: velike črke; font-weight: krepko; meja: 1px trdna # 99631d; -moz-border-radius: 5px; -webkit-border-radius: 5px; obrobni polmer: 5px; text-shadow: 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1px 0 rgba (64, 38, 5, 0.9); -moz-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.6), inset 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.6), inset 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.6), inset 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 # ccc; -webkit-prehod: ozadje 0.2s olajša;
text-shadow. text-shadow: 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1px 0 rgba (64, 38, 5, 0.9);
text-shadow Prve tri številske vrednosti so x-offset, y-offset in zamegljenost. Vrednosti rgba označujejo barvo senc. V naslednjem nizu deklaracij (ločen z vejico) je y-offset dobil vrednost -1. To se naredi, da se besedilu doda “notranja senca” učinka. Stanje hover / fokusa gumba za pošiljanje ima različne vrednosti barve ozadja in senc. Predogled
Stanje "Aktivno" za gumb
input [type = "submit"] solid: active ozadje: # f6a000; položaj: relativna; vrh: 5px; obroba: 1px trdna # 702d00; -moz-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0,6), inset 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.6), inset 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.6), inset 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 # ccc;
Celotna (CSS) koda
#main width: 400px; višina: 50px; ozadje: # f2f2f2; oblazinjenje: 6px 10px; obroba: 1px solid # b5b5b5; -moz-border-radius: 5px; -webkit-border-radius: 5px; obrobni polmer: 5px; -moz-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.8), inset 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.8), inset 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.8), inset 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede; input [type = "text"] float: levo; širina: 230px; oblazinjenje: 15px 5px 5px 5px; margin-top: 5px; margin-left: 3px; meja: 1px trdna # 999999; -moz-border-radius: 5px; -webkit-border-radius: 5px; obrobni polmer: 5px; -moz-box-shadow: vložek 0 5px 0 #ccc, inset 0 6px 0 # 989898, priloga 0 13px 0 #dfdede; -webkit-box-shadow: vložek 0 5px 0 #ccc, inset 0 6px 0 # 989898, priloga 0 13px 0 #dfdede; box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 # 989898, inset 0 13px 0 #dfdede; input [type = "submit"]. solid float: levo; kazalec: kazalec; širina: 130px; oblazinjenje: 8px 6px; margin-left: 20px; barva ozadja: # f8b838; barva: rgba (134, 79, 11, 0.8); text-transform: velike črke; font-weight: krepko; meja: 1px trdna # 99631d; -moz-border-radius: 5px; -webkit-border-radius: 5px; obrobni polmer: 5px; text-shadow: 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1px 0 rgba (64, 38, 5, 0.9); -moz-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.6), inset 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.6), inset 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.6), inset 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 # ccc; -webkit-prehod: ozadje 0.2s olajša; input [type = "submit"] solid: hover, input [type = "submit"] solid: focus ozadje: # ffd842; -moz-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.9), inset 0 2px 1px rgba (255, 250, 76, 0.8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.9), inset 0 2px 1px rgba (255, 250, 76, 0.8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.9), inset 0 2px 1px rgba (255, 250, 76, 0.8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 # ccc; input [type = "submit"] solid: active ozadje: # f6a000; položaj: relativna; vrh: 5px; obroba: 1px trdna # 702d00; -moz-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0,6), inset 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit-box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.6), inset 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; box-shadow: inset 0 0 3px rgba (255, 255, 255, 0.6), inset 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 # ccc;
