Share
În acest tutorial, aș dori să explorez cum puteți înfrumuseța un simplu formular de căutare. Nu vom face nimic nebun, în schimb, explorând patru feluri diferite despre modul în care puteți mări o intrare de căutare cu ajutorul tranzițiilor CSS.
Dacă doriți o soluție gata făcută, puteți găsi câteva tranziții CSS pe Envato Market, care vă permit să creați o varietate de efecte rapid și ușor. Sau puteți angaja un dezvoltator pe Envato Studio.
În fișierul HTML va trebui să creați o intrare de căutare pentru a începe. Dacă vă uitați la codul de mai jos veți observa patru lucruri diferite: a .cutie div, a .container-1 div, an .icoană, și intrarea de căutare în sine.
Toate cele patru exemple vor avea o casetă de căutare - firește - precum și o pictogramă de clasă. Fiecare dintre cele patru exemple va fi găzduit într-un container astfel încât să putem manipula independent intrările de căutare. În sfârșit, caseta div este responsabilă pentru păstrarea centrului containerului.
Font Awesome este o bibliotecă de icoane. Puteți afla mai multe despre proiect pe site-ul web al Font Awesome.
Fragmentul de cod de mai sus este un exemplu despre modul în care puteți include pictograma în marcajul dvs. Cu toate acestea, pentru ca pictograma să apară, trebuie să includeți și un link către biblioteca Font Awesome, demonstrată în fragmentul de mai jos. Includeți acest link în capul documentului.
Vom adăuga acum câteva stiluri într-o foaie de stil separată (pe care va trebui să le legați și din capul documentului).
corp fundal: # 343d46; .box margine: 100px auto; lățime: 300px; înălțime: 50px;
În fragmentul CSS de mai sus adăugăm un aspect de bază la pagină. Stilul căsuțelor de căutare va fi colorat în marină, astfel încât fundalul corpului nu trebuie să fie alb strălucitor. Clasa cutie este, de asemenea, centrat în pagină de dragul tutorialului.
Acest tutorial vizează învățarea modului de înfrumusețare a cutiilor de căutare. În acest prim exemplu voi explica ce se întâmplă în detaliu; Vreau să te asigur că știi exact ce se întâmplă. În celelalte trei exemple, vă voi arăta pur și simplu cum să realizați diferitele tranziții.
Primul exemplu pe care vom aborda este schimbarea fundalului intrării de căutare pe hover. Vom adăuga, de asemenea, o tranziție, astfel încât schimbarea să nu sufere.
Ați văzut deja codul HTML pentru marcajul de bază. Acest fragment va fi similar pentru toate exemplele.
Pentru a începe stilul trebuie să definim stilul CSS al căsuței de căutare în sine. Să adăugăm toate regulile CSS diferite unul câte unul, astfel încât să știți exact ce se întâmplă.
.container-1 lățime: 300px; vertical-aliniere: mijloc; spațiu alb: acum; poziție: relativă;
În primul rând, vrem să stilisem clasa containerelor. Cea mai importantă proprietate este cu siguranță poziție: relativă. Acest lucru este setat special pentru ca pictograma să poată fi plasată pe partea de sus a intrării, după cum veți vedea în scurt timp.
.container-1 intrare # căutare lățime: 300px; înălțime: 50px; fundal: # 2b303b; frontieră: nici una; font-size: 10pt; plutește la stânga; culoare: # 63717f; padding-left: 45px; -webkit-border-radius: 5px; -moz-border-radius: 5px; raza de graniță: 5px;
În continuare vrem să stilizăm intrarea reală. Totul de mai sus este pur estetic, deoarece raza de graniță sau culoarea de fundal nu influențează modul în care funcționează intrarea. Faceți notă de proprietatea stângă a padding-ului. Este acolo pentru a face loc pictogramei, astfel încât să nu fie literalmente pe partea de sus a textului din intrare.
Mai jos avem patru reguli diferite care culorizează textul cu loc de substituire, care este în exemplul nostru Căutare. Din păcate, regulile trebuie să fie separate pentru prefixele individuale ale vânzătorilor și nu pot fi consolidate într-o regulă scrise. Este un pic enervant și veți vedea acest lucru repetat în fiecare exemplu!
.container-1 intrare # căutare :: - webkit-input-placeholder culoare: # 65737e; .container-1 intrare # căutare: -moz-placeholder / * Firefox 18- * / color: # 65737e; .container-1 intrare # căutare :: - moz-placeholder / * Firefox 19+ * / color: # 65737e; .container-1 intrare # căutare: -ms-input-placeholder culoare: # 65737e;
În cele din urmă, vom modela pictograma. Cel mai important este să ne stabilim poziția pentru a fi plasată pe partea superioară a intrărilor, prin setarea acesteia poziția: absolută. Marginile ajută la poziționarea pictogramei în plus față de poziționarea poziției sale de sus 50%.
.container-1 .icon poziție: absolută; top: 50%; margin-stânga: 17px; margin-top: 17px; z-index: 1; culoare: # 4f5b66;
Următorul set de reguli pe care trebuie să le creăm este ceea ce se întâmplă cu caseta de căutare pe hover. În acest exemplu dorim doar să schimbăm culoarea de fundal. Pentru a scăpa de strălucirea galbenă sau albastră în jurul intrării (pe care browserele adaugă uneori) setați contur: nici unul.
.container-1 intrare # căutare: hover, .container-1 intrare # căutare: focus, .container-1 intrare # căutare: activ outline: none; fundal: #ffffff;
După cum vedeți în fragmentul de mai sus, am adăugat două stări suplimentare - concentra și activ. În acest fel, efectul nu dispare atunci când nu mai treceți la intrare. Mai important, efectul este, de asemenea, proeminent atunci când intrarea este în uz.
Pentru a face tranziția să se întâmple, trebuie să adăugăm câteva linii de cod. Întoarceți tot drumul înapoi la regula unde definim stilul de intrare - .container # 1 căutare # de intrare. Înainte de parantezele de închidere adăugați următorul fragment:
-webkit-tranziție: ușurință în fundal .55s; -moz-tranziție: ușurință în fundal .55s; -ms-tranziție: ușurința de fundal .55s; -o-tranziție: ușurința de fundal .55s; tranziție: fundal .55s ușurință;
Definim stenograma proprietății de tranziție, însă putem defini acești trei parametri în mod individual. În primul rând, spunem că tranziția ar trebui să afecteze numai proprietatea de fond. Apoi, spunem că tranziția ar trebui să dureze puțin peste o jumătate de secundă. În cele din urmă, definim efectul de tranziție care trebuie relaxat. uşura nu este singurul efect care ar funcționa aici, de asemenea, am fi putut folosi liniar sau ușurința în, de exemplu. Pur și simplu ar fi părut puțin diferit. Încearcă-te să vezi dacă le placi mai bine.
Stilul de intrare ar trebui să pară acum codul de mai jos.
.container-1 intrare # căutare lățime: 300px; înălțime: 50px; fundal: # 2b303b; frontieră: nici una; font-size: 10pt; plutește la stânga; culoare: # 262626; padding-left: 45px; -webkit-border-radius: 5px; -moz-border-radius: 5px; raza de graniță: 5px; -webkit-tranziție: ușurința de fundal .55s; -moz-tranziție: ușurință în fundal .55s; -ms-tranziție: ușurința de fundal .55s; -o-tranziție: ușurința de fundal .55s; tranziție: fundal .55s ușurință;
Dacă nu știți nimic despre tranzițiile CSS, permiteți-mi să vă dau o scurtă prezentare generală. În primul rând, pentru trecerea la muncă, proprietatea trebuie să fie definită în starea implicită și nu pe hover, pe activ sau pe focus.
Schimbările CSS permit schimbarea treptată a efectului și puteți defini parametrii specifici de control, cum ar fi proprietatea care va fi afectată, durata tranziției și tipul de tranziție. Puteți seta mai multe tranziții pentru un element. Dar, cel mai important, ar trebui să includeți întotdeauna prefixele furnizorilor pentru a se potrivi diferitelor browsere, deoarece suportul pentru această proprietate nu este încă universal.
Pentru mai multe informații, aruncați o privire la: CSS3 Transitions and Transforms From Scratch
În acest exemplu, căutarea va începe doar ca pictograma de sticlă. Când treceți cu mouse-ul peste pictogramă, căutarea se va extinde la momentul în care puteți introduce în interogare. Majoritatea codului din acest exemplu vor fi foarte asemănătoare cu exemplul anterior.
.container-2 lățime: 300px; vertical-aliniere: mijloc; spațiu alb: acum; poziție: relativă;
Stilul de intrare pentru această tranziție este diferit. Intrarea este semnificativ mai mică, astfel încât pictograma să poată apărea în spatele unui pătrat. Toate celelalte proprietăți, cum ar fi culoarea de fundal sau fontul, sunt aceleași cu cele pe care nu dorim să le modificăm complet stilul căutării.
.container-2 intrare # căutare lățime: 50px; înălțime: 50px; fundal: # 2b303b; frontieră: nici una; font-size: 10pt; plutește la stânga; culoare: # 262626; padding-left: 35px; -webkit-border-radius: 5px; -moz-border-radius: 5px; raza de graniță: 5px; culoare: #fff; -webkit-tranziție: lățimea .55s ușurință; -moz-tranziție: lățimea .55s ușurință; -ms-tranziție: lățimea .55s ușurință; -o-tranziție: lățimea .55s ușurință; tranziție: lățimea .55s ușurință;
De asemenea, puteți vedea că am redefinit proprietatea de tranziție pentru a afecta numai lățimea. Am păstrat timpul la fel pentru că e destul de rapid pentru a nu deranja utilizatorii, dar suficient de lung pentru a crea un efect frumos.
Mai jos este codul pentru recolorarea textului substituentului.
.container-2 intrare # căutare :: - webkit-input-placeholder culoare: # 65737e; .container-2 intrare # căutare: -moz-placeholder / * Firefox 18- * / color: # 65737e; .container-2 input # căutare :: - moz-placeholder / * Firefox 19+ * / culoare: # 65737e; .container-2 intrare # căutare: -ms-input-placeholder culoare: # 65737e;
Și încă o dată avem stilul CSS cu simboluri. Ar trebui să fie același lucru ca în exemplul anterior.
.container-2 .icon poziție: absolută; top: 50%; margin-stânga: 17px; margin-top: 17px; z-index: 1; culoare: # 4f5b66;
Ultimul lucru pe care trebuie să-l facem este să definim modul în care va arăta căutarea atunci când va fi plutind. În fragmentul de mai jos, prima regulă asigură faptul că formularul nu are strălucirea indusă de browser și că atunci când utilizați intrarea - atunci când tastați - caseta de căutare rămâne extinsă. Regula de mijloc doar extinde intrarea la lățime maximă pe hover.
.container-2 intrare # căutare: focalizare, .container-2 intrare # căutare: activă outline: none; lățime: 300px; .container-2: introduceți intrarea # search width: 300px; .container-2: hover .icon culoare: # 93a2ad;
Ultimul lucru care se întâmplă în codul de mai sus este că pe hover iconul își schimbă culoarea. Este doar un mic detaliu pentru a arăta rapid un utilizator că caseta de căutare este activă și funcțională, mai degrabă decât o intrare inactiv. Schimbarea nu este implementată printr-o tranziție.
Dintre toate cele patru exemple, acesta este cel mai subtil, atât în ceea ce privește codul, cât și efectul vizual. În acest caz, pictograma de sticlă va apărea ușor și va crește în dimensiune.
Încă o dată marcajul HTML al pictogramei și al casetei de căutare este același ca în cele două exemple anterioare. Excepția, desigur, este .container-3.
CSS pentru acest exemplu nu este nimic special. În cea mai mare parte, începe foarte asemănător cu primele exemple în care starea implicită nu este deloc diferită. Mai jos este codul pentru container și intrare. Rețineți că nu există o tranziție la intrare de această dată.
.container-3 lățime: 300px; vertical-aliniere: mijloc; spațiu alb: acum; poziție: relativă; .container-3 intrare # căutare width: 300px; înălțime: 50px; fundal: # 2b303b; frontieră: nici una; font-size: 10pt; plutește la stânga; culoare: # 262626; padding-left: 45px; -webkit-border-radius: 5px; -moz-border-radius: 5px; raza de graniță: 5px; culoare: #fff;
Încă o dată avem regulile de substituent.
.container-3 intrare # căutare :: - webkit-input-placeholder culoare: # 65737e; .container-3 intrare # căutare: -moz-placeholder / * Firefox 18- * / color: # 65737e; .container-3 de intrare # căutare :: - moz-placeholder / * Firefox 19+ * / color: # 65737e; .container-3 intrare # căutare: -ms-input-placeholder culoare: # 65737e;
Acum, prin aspectul ei, pictograma pentru acest exemplu este la fel. Este aceeași culoare, aceeași poziție și așa mai departe. Cu toate acestea, am adăugat o tranziție la aceasta. Aceste tranziții vizează toate proprietățile, ceea ce reprezintă o abordare mai scurtă, mai degrabă decât difuzarea individuală a acestora.
.container-3 .icon poziție: absolută; top: 50%; margin-stânga: 17px; margin-top: 17px; z-index: 1; culoare: # 4f5b66; -webkit-tranziție: toate ușurința .55s; -moz-tranziție: ușurința tuturor .55; -ms-tranziție: toate ușurința .55s; -o-tranziție: toate ușurința .55s; tranziție: toate ușurința .55s;
.container-3 intrare # căutare: focalizare, .container-3 intrare # căutare: activă contur: none; .container-3: hover .icon margin-top: 16px; culoare: # 93a2ad; -webkit-transformare: scală (1.5); / * Safari și Chrome * / -moz-transform: scară (1.5); / * Firefox * / -ms-transform: scară (1,5); / * IE 9 * / -o-transform: scară (1,5); / * Opera * / transform: scară (1,5);
Există câteva lucruri care se întâmplă în codul de mai sus. În primul rând, schimbăm culoarea pictogramei pe hover și mută-o puțin mai sus, astfel încât să fie centrată pe verticală când este mai mare. În al doilea rând, adăugăm o transformare la elementul de icoană pe hover, astfel încât acesta să fie de fapt de 1,5 ori mai mare decât dimensiunea originală. Deoarece tranziția definită anterior a fost stabilită la impact toate proprietăți, se pare că pictograma crește în mărime pe hover.
Din nou, aruncați o privire asupra tranzițiilor și transformărilor CSS3 de la zero pentru a afla mai multe despre proprietatea de transformare.
Spre deosebire de ultimele trei exemple, aceasta va fi mai complexă. Pe hover, un buton va aluneca deasupra intrării pentru a vă permite să continuați - cum ar fi Trimite sau Merge. Butonul va avea pictograma de sticlă înăuntru.
Aici HTML este un pic diferit. Intrarea este încă acolo, desigur, dar pictograma este acum în interiorul unui element de buton care vine după intrare. Este important ca butonul să fie după intrare, deoarece se referă la modul în care efectul de hover va fi creat în CSS.
CSS în acest exemplu este diferit, astfel încât să acorde o atenție! Mai jos este fragmentul pentru stylingul containerului. Primul, poziție: relativă lipseste; nu mai este important, deoarece pictograma nu se bazează pe ea pentru a fi plasată pe partea de sus a intrării. Cu toate acestea, noi avem overflow: ascuns. Acest lucru împiedică apariția butonului atunci când nu se află pe hover. Din punct de vedere tehnic, butonul care apare este prezent în partea dreaptă a intrării, dar datorită overflow: ascuns nu se afișează când scade dincolo de lățimea containerului - recipientul și intrarea au aceeași lățime.
.container-4 overflow: ascuns; lățime: 300px; vertical-aliniere: mijloc; spațiu alb: acum;
Sub intrarea nu există tranziția deoarece nu este elementul afectat de această dată.
.container-4 intrare # căutare lățime: 300px; înălțime: 50px; fundal: # 2b303b; frontieră: nici una; font-size: 10pt; plutește la stânga; culoare: #fff; padding-left: 15px; -webkit-border-radius: 5px; -moz-border-radius: 5px; raza de graniță: 5px;
Este următorul fragment pentru a reveni la locurile de substituire.
.container-4 intrare # căutare :: - webkit-input-placeholder culoare: # 65737e; .container-4 intrare # căutare: -moz-placeholder / * Firefox 18- * / color: # 65737e; .container-4 intrare # căutare :: - moz-placeholder / * Firefox 19+ * / color: # 65737e; .container-4 intrare # căutare: -ms-input-placeholder culoare: # 65737e;
Mai jos este codul pentru stilul butonului care apare pe hover. Trucul pentru al face să alunece din lateral este să o plaseze chiar în spatele intrării și să o facă invizibilă, dacă nu se află pe hover. Butonul este elementul care se schimbă - se mișcă - de aceea este cel în care este definită tranziția. Pentru a face lucrurile mai simple, am identificat tranziția pentru a afecta toate proprietățile.
.container-4 button.icon -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; raza de sus-dreapta-dreapta: 5px; raza de jos-dreapta-dreapta: 5px; frontieră: nici una; fundal: # 232833; înălțime: 50px; lățime: 50px; culoare: # 4f5b66; opacitate: 0; font-size: 10pt; -webkit-tranziție: toate ușurința .55s; -moz-tranziție: ușurința tuturor .55; -ms-tranziție: toate ușurința .55s; -o-tranziție: toate ușurința .55s; tranziție: toate ușurința .55s;
Pentru a se estompe în buton, trebuie să fie mutat pe partea superioară a intrării. Asta se face prin marja negativă. Anterior am setat opacitatea butonului 0 așa că trebuie să o resetăm 1 pentru ca butonul să poată fi vizibil.
Ultima regulă modifică doar fundalul butonului dacă treceți cu mouse-ul peste buton. Este bine să lăsați un utilizator să știe că butonul este activ și puteți să îl faceți clic pentru a trimite căutarea; nu are rost să ai un buton dacă pare inactiv.
.container-4: butonul hover.icon, .container-4: butonul activ.icon, .container-4: focus button.icon contline: none; opacitate: 1; margin-stânga: -50px; .container-4: hover button.icon: hover fundal: alb;
Ei bine, asta ne duce la sfarsitul experimentelor noastre CSS! Am luat o intrare de bază de căutare și am folosit o mică selecție de efecte pentru a-și schimba comportamentul. Cum altfel ați sugera schimbarea unei intrări de căutare ca aceasta? Ce alte aspecte ar trebui să aplicați tranzițiile sau transformările CSS? Spuneți-ne în comentariile!
Am creat un ghid complet care să vă ajute să învățați CSS, indiferent dacă începeți doar cu elementele de bază sau doriți să explorați CSS mai avansat.
Accentsconagua