Share
Unul dintre cei mai puternici și mai puțin folosiți selectori CSS este combinatorul general de frate: ~. În următoarele tutoriale voi trece peste diferite moduri de utilizare ~ pentru a crea componente care nu sunt numai atractive, ci și funcționale și utile. Acest tutorial va acoperi elementele formale; radio, casetă de selectare și intrări regulate.
Vom învăța foarte mult: selectori CSS moderni se va schimba proprietate, SVG accident vascular cerebral proprietăți, stări de intrare și multe altele!
O avertizare rapidă: aceste efecte CSS pot funcționa sau nu în browsere mai vechi - le-am testat în cele mai recente versiuni de Chrome, Firefox și Safari.
Voi folosi Haml (un compilator HTML) și Sass (un preprocesor CSS) pentru a accelera procesul de codificare! Demo-urile vor folosi Haml, în timp ce orice cod inline va folosi HTML obișnuit.
Voi folosi, de asemenea, uimitorul AutoPrefixer în locul prefixelor furnizorilor. Dacă utilizați CodePen, asigurați-vă că mergeți la setările stiloului dvs., faceți clic pe CSS și selectați AutoPrefixer.
Selectați AutoPrefixer în setările stiloului tăuVom începe cu unul dintre cele mai elementare elemente de formă: intrarea radio. Există două stări vizuale principale (bifate și neînregistrate), precum și două stări între stânga (cursorul și clicul / clic-activ sunt asemănătoare cu aspectul verificat).
Primul pas este să configurați codul HTML. Veți avea nevoie de un container exterior principal și de un container interior cu doi copii: a div conținând elementele de intrare și vizuale și a eticheta pentru intrare. Îmi place să folosesc a FIELDSET pentru containerul exterior. Asigurați-vă că adăugați un ID pentru intrarea care se potrivește cu pentru atributul de pe etichetă.
Următorul pas este să ascundeți intrarea implicită, să adăugați un stil vizual de bază și să ascundeți elementele suplimentare care vor apărea numai când este selectată intrarea radio. Ideea este de a face intrarea invizibilă, dar poziționați-o top a elementelor vizuale, astfel încât clicul pe intrarea radio să pară ca făcând clic pe opțiunea de vizionare radio. Putem face acest lucru prin stabilire poziție: relativă la .svg și poziția: absolută la intrare, apoi ascundeți intrarea.
Notă: puteți să formatați acest mod pe care îl alegeți. Am ales un stil de cerc de bază care să imite radioul implicit, cu excepția faptului că este mai plat.
Vom stabili câteva variabile de culoare folosind Sass; o pereche de culori gri și un albastru strălucitor pentru radioul selectat. De asemenea, vom seta o variabilă $ p pentru unitatea implicită-12px este un număr frumos deoarece este divizibil printr-o gamă largă de numere diferite (1, 2, 3, 4, 6).
Am pus direct variabilele principale în embed, dar stilul suplimentar poate fi găsit aici sau făcând clic pe pagina CodePen, făcând clic pe Setări în colțul din dreapta sus și făcând clic pe CSS pentru a vizualiza foi de stiluri suplimentare.
Am făcut primul cerc de culoare gri deschis, iar cel de-al doilea a fost albastru strălucitor, apoi am ascuns al doilea prin fixare transforma: scara (0). Mai târziu, vom anima cercul înapoi, deci este important să setați scara acum.
După ce am stabilit toate acestea, trebuie să decidem asupra stilurilor vizuale pentru fiecare stat. Pentru acest exemplu, am hotărât că, pe hover, cercul de culoare gri deschis ar trebui să devină albastru deschis; la apăsare, cercul albastru se scindează și fundalul gri devine alb, apoi rămâne în acest fel pentru starea verificată. Singura modalitate de a elimina starea verificată de la un radio este să faceți clic pe un alt radio, caz în care albastrul și albul ar trebui să dispară pur și simplu.
Vom plasa mai întâi culorile, apoi vom anima după ce toate statele vor avea culori. Aici se află tilda ~ vine la îndemână. Acest selector general de frate ( combinator sibling) va selecta cel de-al doilea element atâta timp cât este precedat de primul element undeva, și aceștia împărtășesc un părinte comun. Folosim intrare: hover ~ div pentru a selecta elementul vizual atunci când intrarea este suspendată.
Încercați să faceți clic pe primul radio, apoi pe cel de-al doilea - ar trebui să vedeți cu claritate stările de hover și active / verificate.
Ultimul pas este de a configura animațiile pentru fiecare stat. Cheia pentru animarea tuturor acestor stări diferite este să setați în mod prestabilit tranzițiile necontrolate și să setați tranzițiile verificate la apăsarea intrării. Folosesc o nouă proprietate CSS numită se va schimba pentru a lăsa browser-ul să știe ce proprietăți voi anima.
De asemenea, puteți realiza această intrare radio personalizată fără a utiliza un SVG. Setarea este similară:
CSS-ul este aproape exact același lucru, cu excepția celor cu un stil mai mic pentru cele două div elemente care au înlocuit cercurile SVG. În acest caz, folosim nth-de-tip (n) pentru a selecta diferite elemente div, astfel încât să nu trebuiască să le oferim o clasă în HTML.
Cu versiunea SVG, există mai mult marcaj, dar mai puțin stil; cu versiunea HTML, este invers. Rezultatele arată identice, așa că încercați oricare dintre acestea se potrivește preferințelor de codare!
Următorul element de formă pe care îl vom personaliza este intrarea în caseta de selectare. Stările sale sunt similare cu cele ale intrării radio: două stări vizuale principale (bifate și necontrolate) și două stări inter-între (stânga și clic / activă).
Setarea arată foarte mult ca intrarea radio, dar utilizează linii pentru a forma semnul de verificare în locul cercurilor.
Liniile din primul grup vor avea o culoare gri deschis și nu vor fi animate; liniile din al doilea grup vor anima în momentul în care se face clic pe intrare.
Există, de asemenea, o suplimentare div element; vom folosi acest lucru pentru a crea un efect de clic în cazul în care albastru strălucitor se extinde în fundal. Pentru ca efectul să funcționeze, div trebuie să fie un cerc albastru cu o lățime și înălțime mai mare decât caseta de selectare reală, iar containerul exterior trebuie să aibă overflow: ascuns; setați astfel încât marginile cercului să nu apară. Diviziunea rotundă ar trebui să aibă transforma: scara (0) set, similar cu radioul.
Dimensiunile căsuței de dimensiune (stânga) și dimensiunea cercului (dreapta)Din nou, formatați acest lucru în funcție de preferințele dvs. Am decis să rotunjesc marginea marcajului, precum și toate colțurile.
Următorul pas este pregătirea animațiilor. Efectele sunt similare cu cele ale radioului, cu excepția faptului că, în locul unui cerc care se extinde, semnul se apropie. Pentru această animație, va trebui să folosim accident vascular cerebral-dashoffset pe liniile SVG.
Pentru a anima accident vascular cerebral-dashoffset, vom avea nevoie de lungimea fiecărei linii. Am creat un instrument pe CodePen pentru a calcula lungimile, dar dacă utilizați marcajul pe care l-am creat deja, lungimea liniei mai scurte este 6.708 și cu cât este mai lung 14.873. Vom folosi această valoare pentru a seta amândouă accident vascular cerebral-dashoffset și accident vascular cerebral-dasharray. Acest lucru este necesar doar pentru primul marcaj de check (cel de-al doilea set de linii se afișează în mod implicit în starea necontrolată).
Când se face clic pe intrare, vom seta accident vascular cerebral-dashoffset la 0, care (cu o tranziție) va arăta ca linia este "trasă". De asemenea, trebuie să adăugăm celelalte modificări de stare de la postul radio personalizat, inclusiv modificările de fundal pe hover și scala cercului pe clic.
Ultimul pas este de a adăuga toate tranzițiile. Din nou, vom seta în mod prestabilit tranzițiile neconfirmați și vom seta tranzițiile verificate la clic. În mod similar cu cercul care se estompează pentru radio, vom trece la decolorare când nu este bifată.
De asemenea, puteți obține același efect cu câteva elemente div în loc să utilizați un SVG; marcajul este mai simplu, dar nu este clar delimitat. Primul div gol este cercul albastru care se extinde, cel de-al doilea este marcajul de selectare prestabilit, iar cel de-al treilea este marcajul de marcare care se animă atunci când se face clic.
Vom folosi :inainte de și :după ca fiecare parte a semnalului de marcare, care simplifică marcarea, altfel veți avea nevoie de patru elemente goale sau mai multe pentru a crea cele două semne de control. Trebuie să poziționăm liniile manual și să le rotim în poziție, dar puteți utiliza o singură transformare pentru a le roti și pentru a le desena.
De asemenea, puteți utiliza un simbol de marcare în loc de rotirea elementelor div! Nu este la fel ca celelalte două vizual, dar funcționează la fel de bine.
Notă: aveți nevoie doar de simbolul HTML din ultimele două elemente div, dar în demo-ul de mai jos, l-am inclus în toate cele trei div, astfel încât să îl pot include în buclă repetată.
Deoarece nu putem desena simbolul, varianta albă se estompează și se stinge. Verificați toate cele trei versiuni de mai jos!
Ultima parte a acestui tutorial este introducerea obișnuită a textului. M-am inspirat din intrările liniei de materiale Google. Aceste intrări au câteva stări diferite: implicite, active / focalizare (atunci când cursorul care clipește este vizibil) și un cursor subțire.
Setarea este chiar mai mică decât cele două stiluri de intrare anterioare. Avem un set de câmp, o intrare, o etichetă și un element div pentru graniță.
Următorul pas este stilizarea intrării. Nu vom ascunde intrarea de data aceasta de când avem nevoie să afișeze valoarea. Vom crea, de asemenea, o etichetă care se mută în sus și în jos atunci când ne concentrăm asupra intrării. Pentru a face acest lucru, va trebui să poziționăm eticheta exact pe partea de sus a intrării. Diviziunea div va avea un :după pseudo element care se întinde pe partea de sus a frontierei atunci când se face clic pe intrare; vom pune un scală (0) pe elementul pseudo pentru ao pregăti pentru animație.
Dacă încercați să faceți clic pe intrarea demonstrativă de mai sus și să începeți să tastați, veți observa că tipurile de text se află în partea de sus a etichetei. Vom anima eticheta să se micsoreze și să se traducă cu clic. Puteți utiliza în întregime transformă pentru a preveni repaint, în loc de a folosi marimea fontului așa cum am făcut-o, dar am descoperit că o folosesc la fel de bine translateY mi-a dat o animație mult mai precisă. De asemenea, vom elimina scara de pe div :după pentru a face animația desenului.
Acum, dacă încercați să faceți clic pe intrarea demo de mai sus și începeți să tastați din nou, eticheta se micșorează și se mișcă ușor, dar dacă lăsați textul introdus în intrare și faceți clic în afară, eticheta se deplasează din nou, împiedicând intrarea. Am putea folosi JavaScript pentru a preveni acest comportament, dar putem folosi și o stare de intrare CSS numită :valabil.
Putem adăuga necesar ca un atribut gol la intrarea noastră în HTML sau adăugați : required => true la atributele noastre de intrare din Haml. Apoi adăugăm :valabil la : focus proprietăți în Sass / CSS. Aceasta adaugă o stare vizuală suplimentară la intrarea noastră și, din moment ce este o simplă introducere a textului, singura stare validă este atunci când este introdus text.
Notă: folosirea unui alt tip de intrare, cum ar fi o intrare de e-mail, va determina ruperea acestui comportament, deoarece intrările de e-mail au cerințe diferite de valabilitate.
Dacă doriți să creați propriile intrări utilizând aceste tehnici, dar aveți nevoie de mai multă inspirație vizuală, verificați kiturile UI disponibile cu un abonament Envato Elements:
UI Kituri pe Envato ElementsExistă zeci de moduri diferite de a utiliza selectorul general de frate care sunt vizuale, funcționale sau ambele. Acesta oferă o modalitate puternică de personalizare a componentelor, fără a fi nevoie să utilizați mai mult decât CSS și HTML. Am acoperit trei tipuri diferite de elemente de formular în acest tutorial; în următorul, vom explora meniurile și navigația. Simțiți-vă liber să renunțați la un comentariu mai jos dacă aveți întrebări sau feedback!
Accentsconagua