Ce pot face cu CSS?

Și mai mult. pentru a nu complica, voi oferi doar fragmentele necesare HTML și CSS. Nu vă așteptați ca atunci când copiați materiale din articol va avea același efect ca în demonstrațiile de mai jos. Dar dacă doriți să vedeți codul complet al exemplului, puteți accesa site-ul CodePen, iar la sfârșitul articolului voi oferi un link către fișierele cu codul sursă.

Exemplu de formular simplu

Mai jos este opțiunea de a notifica utilizatorul la completarea formularului.

Există trei câmpuri de text, iar substituenții sunt utilizați ca etichete. Desigur, acest lucru nu are un efect foarte bun asupra interacțiunii utilizatorilor, dar am intrat în multe situații în care designerul șef a interzis utilizarea etichetelor vizibile.

Soluția mea pentru această problemă depășită este de a converti etichetele în "mementouri pop-up" atunci când utilizatorul se mișcă să se concentreze pe câmpul de intrare:

După cum puteți vedea în această secțiune de HTML nu există nici o magie. Singurul lucru neobișnuit este faptul că elementul este situat în spatele câmpului de introducere.

Dar această piesă de CSS o va face să funcționeze:

Primul bloc CSS este stilurile implicite pentru câmpurile de intrare. Stilul de tip ".form" deține elementul "hello-helper" absolut poziționat, lângă câmpul de intrare corespunzător.

Elementul de intrare-text este poziționat relativ, iar indexul z este aplicat deoarece nu vrem ca eticheta să suprapună câmpul de intrare la tranziție.

Și aici este CSS, care procesează afișarea etichetei când schimbă focalizarea:

Un punct important este utilizarea clasei pseudo-clase: focalizarea în combinație cu selectorul elementelor vecine + (selectorii elementelor vecine joacă un rol important în exemplele noastre demonstrative).

Prin urmare, trebuie să plasăm etichete după câmpurile de intrare, deoarece în caz contrar selectorul elementelor învecinate nu va funcționa.

Pur și simplu, atunci când un element se focalizează, elementul învecinat (eticheta) devine vizibil și își schimbă poziția pentru a apărea peste câmpul de intrare și oferă utilizatorului un indiciu, deoarece umplutura de câmp nu mai este afișată.

Ca un mic add-on, subliniez câmpul de introducere a e-mailului dacă există o eroare în el. Deoarece câmpurile de intrare nu acceptă pseudo-elemente, eroarea "x" este aplicată etichetei.

Mai multe utilizări mai complexe

Exemplul de mai sus câștigă popularitate. După cum știu, nu sunt primul și nu ultimul care utilizează efectul pentru a afișa sugestii.

Tranziții pentru site-urile cu o singură pagină

După ce am cântat puțin, am făcut-o:

Poate că ați observat utilizarea elementelor la începutul fiecărei secțiuni. În CSS, vom construi pe ele, deoarece trebuie să ne bazăm și pe selectorul elementelor vecine (+) pentru a face ca efectele de tranziție să funcționeze.

Pur și simplu, vom folosi starea: comutatoarele verificate, care vor fi activate făcând clic pe eticheta corespunzătoare și folosind selectorul elementelor învecinate le vom modifica destinația de plasare utilizând CSS simplu.

Și aici este CSS:

CSS de mai sus oferă stilul "butoanelor", precum și ascunzând comutatoarele, dezactivând afișarea lor și interacțiunea directă.

Elementele .page-label și .page-label sunt utilizate pentru butoanele mari - panouri, în timp ce clasa .exit-label etichetează butonul "închide" al panoului deschis (din nou, etichetele numite butoane).

Aici avem configurația panourilor (secțiunilor) containerului și a conținutului acestora. Containerele au o dimensiune de 50% din înălțimea și lățimea totală, care este similară cu exemplul corespunzător cu Codrops.

Secțiunile sunt poziționate folosind transform: traduceți, în loc să utilizați poziționarea din partea de sus / stânga / jos / dreapta. Acest lucru se datorează faptului că transformările au un efect mai bun asupra performanței, deoarece nu necesită reparații intense, la fel ca în schimbarea poziției unui element.

Și aici este partea veselă, unde verificăm dacă selectorul a fost selectat și, dacă da, atunci:

.secțiunea-container își schimbă dimensiunea la înălțime și lățime maximă și se transformă în poziția din stânga sus a ferestrei browserului
Butonul de închidere și conținutul secțiunii devin vizibile
Eticheta pe care ați făcut clic devine invizibilă, astfel încât nu mai puteți să faceți clic pe ea și nu se suprapune conținutul secțiunii care a fost afișată
secțiuni care nu au fost selectate, se plasează o margine care crește la o dimensiune de 40 pixeli simulând efectul "reduce" pe fundalul secțiunii care se desfășoară pe întregul ecran.

Efecte alternative de tranziție

Pe baza marcajului ușor redesenționat din exemplul anterior, am prezentat încă două exemple care urmează aceleași concepte ca și exemplul anterior.

Problema cu aceste exemple este că, în ciuda stării lor abrupte și a faptului că arată cât de mult puteți face cu CSS, toate acestea sunt foarte rele în ceea ce privește accesibilitatea pentru utilizatorii cu dizabilități.

Având în vedere acest lucru, să trecem la următorul exemplu, care este mult mai accesibil pentru utilizatorii cu dizabilități, dar permite obținerea unor rezultate similare.

Schimbați aspectul cu: țintă

Prin schimbarea ușoară a CSS și a marcării, puteți obține același comportament ca și în exemple, cu ajutorul navigării utilizând comutatoarele, dar folosind ID-ul și pseudo-class: target.

Să ne uităm la modificările marcajului:

În loc să folosim comutatoarele și selectorul elementelor învecinate, acum folosim ID-ul fiecărui element container. În locul comutatoarelor, rolul "butoanelor" este jucat de legăturile de ancorare, ceea ce este mult mai corect din punct de vedere semantic.

Iată CSS, care a suferit mai multe modificări:

Aici am dat doar codul CSS în care s-au făcut cele mai multe modificări, dar comparând exemplul anterior și cel curent, puteți vedea că modificările sunt doar pentru selectori.

Selectorii de etichete au fost înlocuiți cu ajutorul atributului href în loc de atributul pentru. și am reușit să refuzăm utilizarea comutatoarelor.

Din moment ce folosim: țintă pentru a face referire la diferite partiții, selectorii selectați + au fost înlocuiți de selectorii corespunzători: țintă. Dacă anterior ați putea declara un singur selector: selectați + pentru toate opțiunile, apoi utilizând selectorul: țintă vă solicită să îl duplicați pentru fiecare URI.

Necesitatea de a scrie un astfel de număr de selectori, desigur, minus comparativ cu versiunea cu comutatoare. Dar notați: această opțiune este mai corectă din punctul de vedere al semanticii.

În concluzie

Prin obținerea de informații imediat prin două canale (vedere și auz), eficiența predării este mult mai mare decât învățarea din cărți. Și temele și testele online vă vor permite să gândiți în mod constant în limba pe care o învățați și să vă verificați imediat cunoștințele!

Dacă doriți să învățați HTML mult timp, atunci am o veste bună pentru dvs.!

Dacă ați învățat deja HTML și doriți să treceți mai departe, următorul pas este să învățați tehnologia CSS.

Dacă doriți să înțeleagă conceptele de domeniu si hosting, învață cum să creeze o bază de date, încărca fișiere pe un site web prin intermediul unui server FTP, crea subdomenii, configurați cutiile poștale pentru site-ul și să monitorizeze participarea, acest curs este conceput special pentru tine!

Articole similare

Pagina anterioară

Pagina următoare