Crearea unei casete de căutare Rocking CSS3
CSS3 este limba de ultima generatie a foilor de stil. Acesta introduce o mulțime de caracteristici noi și interesante cum ar fi umbre, animații, tranziții, raza de frontieră etc. Deși specificațiile nu au fost încă finalizate, mulți producători de browsere au început deja să susțină multe dintre noile caracteristici.
În acest tutorial, vom explora unele dintre aceste caracteristici, cum ar fi text-shadow, border-radius, box-umbre și tranziții pentru a crea un câmp de căutare rock.
Versiunea photoshop a acestui câmp de căutare a fost creată de Alvin Thong și poate fi descărcată de aici. Am încercat să recreez acest câmp de căutare utilizând CSS3 pură. Trebuie remarcat faptul că nu toate browserele suportă funcțiile CSS3 și pentru a încerca acest tutorial, ar trebui să utilizați unul dintre browserele moderne care suportă funcțiile CSS 3.
Gata? Să începem!
1. HTML5 Doctype
Vom începe cu marcajul HTML. Este foarte simplu, după HTML5 doctype și declarație, avem cu un ID numit #wrapper interior . Acest lucru se face simplu pentru a defini lățimea casetei de conținut și pentru al alinia la centrul paginii.
Acest lucru este urmat de a Iată cum arată codul: Pentru a crea o cutie mare în jurul formularului, vom adăuga stiluri la Codul important aici este codul Explicaţie: Aici, insetul de cuvinte cheie specifică dacă umbra va fi în interiorul casetei. Primele două valori zero indică decalajul x și decalajul y, iar cele 3 pixeli indică neclaritatea. Următoarea este declarația de culoare. Am folosit valorile rgba aici; rgba înseamnă albastru roșu și alfa (opacitate). Astfel, cele 4 valori din paranteză indică cantitatea de roșu, verde, albastru și alfa (opacitatea). Veți observa că 5 seturi de declarații umbroase au fost împrăștiate împreună. Acest lucru se poate face separându-le cu o virgulă. Primele două umbre definesc efectul de "strălucire interioară" albă, iar următoarele declarații dau căsuței aspectul solid / ciudat. Redați-vă cu aceste valori pentru a înțelege cum funcționează. Acum, când caseta este completă, permiteți să treceți la modelarea câmpului de introducere. Stilurile declarate pentru câmpul de intrare sunt destul de similare cu cele decarate pentru cutia mare Explicaţie: Veți observa că de data aceasta, blurul umbrei a fost menținut la 0 pentru a obține o umbră ascuțită și o compensare verticală de 5px este utilizată. În declarațiile succesive, estomparea a fost menținută la 0px, dar culoarea și offsetul au fost modificate. Din nou, jucați cu aceste valori pentru a obține rezultate diferite. Să stilizăm butonul de căutare. În afară de culori, butonul de căutare are în majoritate aceleași stiluri ca cel al cutiei exterioare. La buton s-au folosit raze de rază de margine și umbre în cutie. Noua facilitate introdusă este Explicaţie: În Starea activă a butonului are mai multe modificări. În aceasta, am dat butonul o poziție absolută și o valoare "de sus" de 5px. Acest lucru a fost făcut pentru a oferi un aspect mai natural, astfel încât să se simtă că butonul a fost de fapt împins în jos cu 5 pixeli. Alte modificări la starea activă sunt cele de culoare de fundal și umbre. Observați că am redus y-offsetul umbrelor pentru a-i da o imagine "presată". Aici este codul pentru starea activă a butonului de trimitere: Acest lucru completează câmpul de căutare. Am folosit câteva dintre noile caracteristici CSS3. Aici este CSS completă și HTML a acestui câmp de căutare. Sper că v-ați bucurat de acest tutorial. Simțiți-vă liber să experimentați aceste caracteristici și nu uitați să împărtășiți gândurile. Nota editorului: Această postare este scrisă de Bharani M pentru Hongkiat.com. Bharani este un designer / dezvoltator din New Delhi, India.#principal. Acest ID conține stilurile care definesc caseta albă mare în jurul câmpului de introducere și butonul de căutare. Acest declarată în interiorul său. Formularul are câmpul de introducere a textului și sbutonul de buton. Iată cum arată formularul fără a aplica nici un fel de stiluri: 
CSS3 Câmp de căutare
2. Crearea casetei de restricționare
#principal. Din codul afișat mai jos, veți observa că caseta a primit o lățime de 400 de pixeli și o înălțime de 50 de pixeli. #main width: 400px; înălțime: 50px; fundal: # f2f2f2; padding: 6px 10px; frontieră: 1px solid # b5b5b5; -moz-border-radius: 5px; -webkit-border-radius: 5px; raza de graniță: 5px; -moz-box-umbra: platcă 0 0 3px RGBA (255, 255, 255, 0,8), platcă 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-umbra: platcă 0 0 3px RGBA (255, 255, 255, 0,8), platcă 0 2px 2px RGBA (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede;
border-radius și declarația box-shadow declaraţie. Pentru a crea colțuri rotunjite, am utilizat declarația CSS3 border-radius, „-moz-“ și „-webkit-“ prefixe browser-ul au fost folosite pentru a se asigura că acest lucru funcționează în gecko și WebKit bazate pe browsere. Declarațiile de umbră din cutie ar putea părea puțin confuză, dar de fapt sunt foarte simple. box-umbra: platcă 0 0 3px RGBA (255, 255, 255, 0,8), platcă 0 2px 2px RGBA (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede;
previzualizare
3. Styling câmpul de introducere
introduceți [type = "text"] float: left; lățime: 230px; padding: 15px 5px 5px 5px; margin-top: 5px; margin-stânga: 3px; frontieră: 1px solid # 999999; -moz-border-radius: 5px; -webkit-border-radius: 5px; raza de graniță: 5px; -moz-box-shadow: inserție 0 5px 0 #ccc, inset 0 6px 0 # 989898, inset 0 13px 0 #dfdede; -webkit-box-shadow: inserție 0 5px 0 #ccc, inset 0 6px 0 # 989898, inset 0 13px 0 #dfdede; box-shadow: inserție 0 5px 0 #ccc, inset 0 6px 0 # 989898, inset 0 13px 0 #dfdede;
#principal. Am folosit aceeași rază de graniță (5px). Din nou, mai multe umbre de box au fost clubate. box-shadow: inserție 0 5px 0 #ccc, inset 0 6px 0 # 989898, inset 0 13px 0 #dfdede;
previzualizare
4. Styling butonul de trimitere
introduceți [type = "trimiteți"] solid float: left; cursor: pointer; lățime: 130px; padding: 8px 6px; margin-stânga: 20px; fundal-culoare: # f8b838; culoare: rgba (134, 79, 11, 0,8); text-transform: majuscule; font-weight: bold; frontieră: 1px solid # 99631d; -moz-border-radius: 5px; -webkit-border-radius: 5px; raza de graniță: 5px; text-shadow: 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1px 0 rgba (64, 38, 5, 0.9); -moz-box-shadow: inserție 0 0 3px rgba (255, 255, 255, 0.6), inset 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0px 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-transition: background 0.2s ease-out;
text-shadow. text-shadow: 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1px 0 rgba (64, 38, 5, 0.9);
text-shadow declarație, primele trei valori numerice sunt x-offset, y-offset și respectiv blur. Valorile rgba indică culoarea umbrei. În următorul set de declarație (separat printr-o virgulă), y-offset-ul primește o valoare de -1. Acest lucru se face pentru a da textului un mesaj “umbra interioara” efect. Starea de orientare / focalizare a butonului trimite are diferite valori ale culorii de fundal și ale umbrelor. previzualizare
Starea "activă" pentru buton
intrare [type = "trimite"] solid: activ background: # f6a000; poziția: relativă; top: 5px; frontieră: 1px solid # 702d00; -moz-box-shadow: inserție 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;
Codul complet (CSS)
#main width: 400px; înălțime: 50px; fundal: # f2f2f2; padding: 6px 10px; frontieră: 1px solid # b5b5b5; -moz-border-radius: 5px; -webkit-border-radius: 5px; raza de graniță: 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 # 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-umbra: platcă 0 0 3px RGBA (255, 255, 255, 0,8), platcă 0 2px 2px RGBA (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede; introduceți [type = "text"] float: left; lățime: 230px; padding: 15px 5px 5px 5px; margin-top: 5px; margin-stânga: 3px; frontieră: 1px solid # 999999; -moz-border-radius: 5px; -webkit-border-radius: 5px; raza de graniță: 5px; -moz-box-shadow: inserție 0 5px 0 #ccc, inset 0 6px 0 # 989898, inset 0 13px 0 #dfdede; -webkit-box-shadow: inserție 0 5px 0 #ccc, inset 0 6px 0 # 989898, inset 0 13px 0 #dfdede; box-shadow: inserție 0 5px 0 #ccc, inset 0 6px 0 # 989898, inset 0 13px 0 #dfdede; intrare [tip = "trimite"] solid float: left; cursor: pointer; lățime: 130px; padding: 8px 6px; margin-stânga: 20px; fundal-culoare: # f8b838; culoare: rgba (134, 79, 11, 0,8); text-transform: majuscule; font-weight: bold; frontieră: 1px solid # 99631d; -moz-border-radius: 5px; -webkit-border-radius: 5px; raza de graniță: 5px; text-shadow: 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1px 0 rgba (64, 38, 5, 0.9); -moz-box-shadow: inserție 0 0 3px rgba (255, 255, 255, 0.6), inset 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0px 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-transition: background 0.2s ease-out; solid: hover, input [type = "trimite"] solid: focus background: # ffd842; -moz-box-shadow: inserție 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: inserție 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 = "trimite"] solid: activ background: # f6a000; poziția: relativă; top: 5px; frontieră: 1px solid # 702d00; -moz-box-shadow: inserție 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;
