Soluții CSS inteligente pentru provocări comune ale UI

Este incredibil să vedem ce putem face cu CSS astăzi, mai ales dacă vă amintiți încă cât de dificil a fost cândva să vă dați seama de contextele de stivuire sau de ce s-au prăbușit marjele și de ce top: float nu a funcționat. În această postare, ne vom uita doar la asta: lucruri interesante și distractive pe care le putem face cu CSS , explorând probleme comune și cazuri de utilizare cu care trebuie să ne confruntăm cu toții în munca noastră.

Umbre mai bogate, asemănătoare vieții cu CSS

Umbrele ajută la transmiterea sensului și adaugă valoare suplimentară unei interfețe de utilizare. Cu toate acestea, multe umbre pe care le vedem pe web în aceste zile nu își folosesc întregul potențial. Să schimbăm asta!

Rob O'Leary oferă o aprofundare completă a tuturor lucrurilor legate de umbre. Articolul său despre trucuri CSS explorează modul în care lumina afectează umbrele și cum se definește o sursă de lumină - fundația creării de efecte de umbră autentice. Odată ce acea bază este setată, veți învăța cum să utilizați umbrele pentru a evoca adâncimea, a ridica elementele și a le introduce, cum să stratificați umbrele și, desigur, ce proprietate CSS să utilizați pentru ce caz de utilizare. Rob analizează, de asemenea, implicațiile de accesibilitate și performanță pe care le aduc umbrele, precum și modul de a le anima.

Un alt articol fantastic pe această temă vine de la Josh W Comeau. Pentru a pune capăt acelor „cutii gri neclare care nu prea seamănă cu umbre”, așa cum Josh descrie starea actuală a majorității umbrelor de pe web, el arată cum să transforme umbrele tipice cutie în unele frumoase, asemănătoare cu realitatea. . Un mic detaliu care face orice interfață de utilizare mult mai tactilă.

Efect de tăiere a hârtiei CSS

Dacă ați dorit vreodată să creați un efect de tăiere a hârtiei pentru un titlu, s-ar putea să vă fi chinuit destul de mult. Poate că trebuie să configurați două div -uri separate care apoi să fie suprapuse una peste alta. Spațierea ar trebui să fie definită în unități relative, desigur, care ar putea fi puțin dificil de obținut direct pe ecrane.

Efectul CSS Paper Cut-Out al lui Stephanie Eckles rezolvă definitiv problema cu proprietățile personalizate CSS, Grila CSS, transformările CSS și o funcție CSS de modă veche attr() . Stephanie folosește un atribut de data pe h1 împreună cu un span în interiorul acestuia. attr() preia valoarea atributului data , care este apoi folosită pentru proprietatea content într-un element :after -pseudo. Evidențierile, umbrele și culorile pot fi apoi ajustate cu CSS Custom Properties. Reutilizabil și simplu de întreținut!

Și dacă sunteți interesat de mai multă magie de către Stephanie și alți oameni minunați care iubesc CSS, aruncați o privire la StyleStage, unde CSS modern este în centrul atenției pe care îl merită.

De asemenea, aruncați o privire la articolul lui Ahmad Shadeed despre Thinking About The Cut Out Effect, care intră în toate detaliile fine ale deciziei când SVG-ul ar putea avea mai mult sens și cum să fie implementat într-un scenariu real. Articolul oferă, de asemenea, o mulțime de exemple de cod pentru a începe!

Miniharta pentru web

Le-am mai văzut: bare orizontale minuscule care se află de obicei în partea de sus a paginii. Pe măsură ce un utilizator derulează în jos, bara orizontală se umple, astfel încât utilizatorul știe cât mai este de fapt de derulat.

Dar dacă îl facem puțin mai contextual ? Poate că pagina include câteva imagini și videoclipuri, sau citate și secțiuni distincte - nu ar fi interesant să le evidențiem diferit, permițând, de asemenea, cititorilor să stabilească o poziție pe pagină și să sară înapoi dacă este necesar? Ei bine, așa a crezut și Rauno Freiberg.

Minimapa lui Rauno pentru web (funcționează în prezent numai în Firefox) face trivială crearea unei reprezentări de minimahartă a întregii pagini, permițând, de asemenea, cititorilor să fixeze o secțiune a paginii și să navigheze între ele. Pentru a realiza acest lucru, Rauno folosește un element() pentru a afișa o imagine live dintr-un element HTML arbitrar (care momentan este disponibil numai în Firefox).

Raza de frontieră condiționată în CSS

Când proiectați carduri, s-ar putea să doriți ca o border-radius să aibă o valoare destul de mare atunci când există suficient spațiu pentru a o afișa împreună cu alte cărți. Cu toate acestea , atunci când nu există spațiu și poate nici o marjă pe card - așa cum ar putea fi cazul pe ecranele mai mici - ați putea dori să reduceți border-radius la 0 . Cum ai realiza asta?

Ahmad Shadeed a analizat această problemă destul de detaliat în articolul său despre Raza de frontieră condiționată în CSS. Ideea, sugerată inițial de Heydon Pickering și Naman Goel, este de a folosi un număr suficient de mare pentru a declanșa o stare sau alta. Pe ecranele mai mici, dacă diferența dintre 100vw și 100% este 0 , atunci și raza va fi 0 ; dar dacă diferența este mai mare, se va folosi o valoare mai mare. Puteți arunca o privire și pe CodePen.

Gradienți granulați CSS

Ce se întâmplă dacă ai vrea să adaugi ceva zgomot pentru a aduce un pic de textură unei imagini? Desigur, puteți exporta imagini ca PNG, WebP sau AVIF, dar în mod ideal am dori să adăugăm „zgomot” peste SVG-uri, astfel încât să putem dezactiva și dezactiva oricând zgomotul dacă dorim.

În articolul său CSS-Tricks despre gradienții granulați, Jimmy Chion explică cum putem genera zgomot colorat pentru a adăuga textura unui gradient doar cu o strălucire de CSS și SVG. După cum explică Jimmy, ideea este să folosiți un filtru SVG pentru a crea zgomotul, apoi să aplicați acel zgomot ca fundal. Apoi îl punem sub un gradient, rafinăm luminozitatea și contrastul și - voila - aveți un gradient care se îndepărtează treptat.

Problema rezolvata! De asemenea, puteți explora terenul de joacă Grainy Gradient pe care Jimmy l-a amenajat.

Gradient de fundal cu mai multe linii

Unele lucruri ar putea părea imposibil de făcut cu CSS - ei bine, până când cineva găsește un hack pentru a face acest lucru. Ca și în acest caz: puteți obține un text căptușit cu mai multe linii cu un gradient care nu se resetează pentru fiecare linie?

Da, așa cum arată Matthias Ott. Soluția lui Matthias este puțin hackeră, dar duce la rezultatul dorit datorită unui pseudo-element care se adaugă deasupra textului. O idee interesantă cu care să te joci.

Focalizare câmp fără contururi

Cine a spus că formularele trebuie să fie plictisitoare? Hakim El Hattab a creat un demo care demonstrează că chiar și ceva atât de simplu ca un formular prin care se cere nume, e-mail și parolă este o ocazie de a gândi în afara cutiei și de a oferi o scânteie de încântare.

Pentru a realiza acest lucru, Hakim combină focalizarea formei și validarea într-o animație subtilă, dar surprinzătoare, care se descurcă fără contururi focalizate asupra câmpurilor în sine. În schimb, un punct marchează câmpul care este focalizat. Când focalizarea trece pe alt câmp, animația este declanșată, iar punctul sare în noul câmp activ, creând o conexiune între cele două. Validarea câmpului formularului este, de asemenea, integrată perfect, cu punctul extinzându-se și afișând o bifă. Dacă doriți să vă scufundați mai adânc în cod, Hakim a publicat și un demo pe Codepen. Inspirator!

Gradienți de tranziție CSS

Dacă ați încercat vreodată să faceți tranziția gradienților în CSS, probabil ați observat că de fapt nu funcționează. În loc să dispară treptat de la un gradient la altul, schimbarea are loc imediat, brusc, fără o tranziție lină între cele două.

După cum a descoperit Keith J. Grant, putem realiza tranziția cu o soluție inteligentă . Folosim un pseudo-element și o transformare de opacitate pentru asta. În primul rând, aplicăm un gradient elementului, apoi poziționăm pseudo-elementul pentru a umple elementul și apoi aplicăm al doilea gradient acestuia. Și „tranzim” între doi gradienți prin tranziția opacității pseudo-elementului. Puteți verifica un exemplu de lucru complet pe CodePen.

Îmbunătățirea performanței imaginii cu image-set()

Ați auzit deja de image-set() ? Vă puteți gândi la el ca un fundal CSS echivalent cu atributul HTML srcset pentru etichetele img . Browserele bazate pe Chromium și Safari îl acceptă de câțiva ani, Firefox a urmat recent. Ollie Williams aruncă o privire asupra a ceea ce putem și ce nu putem face cu asta astăzi.

După cum descrie Ollie, un caz de utilizare pentru image-set() este de a oferi mai multe rezoluții ale unei imagini de fundal și de a lăsa browserul să decidă ce imagine este oferită unui utilizator - o versiune de înaltă rezoluție pentru utilizatorii de pe dispozitive de lux și un imagine cu rezoluție inferioară pentru cei cu conexiuni lente sau ecrane cu o densitate mai mică a pixelilor, de exemplu.

Un alt caz de utilizare foarte promițător încă nu are suport pentru browser, din păcate: ideea de a folosi noi formate de imagine, cum ar fi AVIF, WebP sau HEIF, în timp ce adăugați o rezervă pentru browserele mai vechi. Dacă doriți să realizați așa ceva deja astăzi și nu aveți nevoie background-image , <picture> elementul ar putea fi o alternativă care merită luată în considerare, după cum sugerează Ollie. O lectură excelentă pentru a vă ajuta să îmbunătățiți performanța imaginii.

Efect de deschidere a traseului de clipare

Cu clip-path: path() acceptat de browserele majore, este timpul să fii creativ. Mikael Ainalem prezintă un caz de utilizare frumos pentru caracteristica destul de nouă: un efect de pop-out fin ca unt.

Mikael folosește clip-path: path() pentru a seta fotografia unei persoane de fundalul în formă de cerc. Pe măsură ce treci cu mouse-ul peste el, persoana pare să se ridice din interiorul cercului, creând o impresie 3D cool. Perfect pentru paginile „Despre noi”.

Buton 3D capricios

Detaliile contează. Proiectarea unui buton minunat nu pare a fi un efort mare și complicat: un pic de umplutură ici și colo, o culoare funky, text accesibil și câteva stări de buton. Ei bine, Josh Comeau a mers până la capăt pentru a proiecta un buton 3D cu adevărat capricios pe care s-ar putea să doriți să faceți clic de mai multe ori.

Ideea este simplă: creăm două straturi și compensăm puțin stratul din prim-plan la început. La hover, deplasăm stratul frontal în jos. Apoi, ajustăm conturul focalizării cu outline-offset sau folosim :focus:not(:focus-visible) pentru a ascunde conturul atunci când butonul este focalizat și utilizatorul folosește un dispozitiv indicator.

Apoi deplasăm butonul în sus cu câțiva pixeli când trec cu mouse-ul, animăm puțin transformarea, ajustăm curba Bezier pentru animație și adăugăm un pic de estompare, pentru o umbră mai moale și mai naturală. Și voilà — avem un buton 3D capricios care este accesibil, funcționează pe mobil și pe desktop și este o plăcere să apeși și să dai clic pe. Desigur, puteți găsi fragmentul de cod complet pe blogul lui Josh.

Diagrame CSS

Poate că trebuie să proiectați o diagramă cu coloane sau o diagramă cu bare sau chiar o diagramă cu coloane cu mai multe seturi de date sau coloane stivuite. De unde începi? Poate cu Charts.css, un cadru de vizualizare a datelor CSS care utilizează clase de utilitate CSS pentru a stila elementele HTML ca diagrame.

Creat de Lana Gordiievski și Rami Yushuvaev, cadrul acceptă multe tipuri de diagrame, nu are dependențe și este foarte ușor. Include, de asemenea, documentație amănunțită despre componentele sale și tipurile de diagrame încorporate, plus codul sursă este disponibil pe GitHub (licențiat sub MIT). Și dacă aveți nevoie de abordări puțin mai creative, Preethi explică cum să creați diagrame CSS cu forme interesante și pe CSS-Tricks.

Noua resetare CSS

Ce folosiți pentru a normaliza stilurile între browsere ? De curând, au existat noi abordări pentru a reduce dimensiunea resetarii globale CSS și poate că ar fi candidați buni și pentru proiectele dvs.

Cu resetarea sa modernă CSS, Andy Bell a redus resetarea CSS la minimum adăugând reguli de dimensionare a casetei, eliminând marjele implicite, setând valorile implicite ale rădăcinii de bază și ale corpului. Împreună cu acesta, Andy elimină toate animațiile, tranzițiile și derularea lină pentru persoanele care preferă să nu le vadă și a adăugat în mod implicit proprietăți moderne precum scroll-behavior și text-decoration-skip-ink .

Noua resetare CSS de Elad Shechter adoptă o abordare puțin mai agresivă. Elad elimină toate stilurile implicite pe care le obținem pentru anumite elemente HTML, cu excepția display property . Ambele abordări merită analizate!

Jgheaburile Scrollbar Stabile Cu CSS

Ah, aspectul vechi se schimbă! După cum explică Bramus Van Damme, unul dintre motivele puțin mai obscure pentru schimbarea aspectului vine din cauza diferitelor tipuri de bare de defilare de pe web. În timp ce barele de defilare suprapuse pe iOS/macOS sunt plasate peste conținut (și nu sunt afișate implicit), alte bare de defilare sunt plasate în „jgheabul barei de defilare”, adică spațiul dintre marginea interioară a marginii și marginea exterioară a căptușelii.

Când conținutul unei casete devine prea mare, browserul va afișa, în mod implicit, o bară de derulare. În acest din urmă caz, va provoca o schimbare a aspectului. Din fericire, această problemă ar putea dispărea definitiv în curând. Faceți cunoștință cu o nouă proprietate strălucitoare scrollbar-gutter : setând-o la stable , putem avea browserul să arate mereu jgheabul scrollbar, chiar dacă caseta nu este plină.

Și pentru a păstra lucrurile simetrice, putem folosi scrollbar-gutter: stable both-edges . Funcția nu este încă disponibilă, dar va veni în Chromium foarte curând, cu alte motoare de randare sperăm că vor urma în curând.

Lucrurile surprinzătoare pe care CSS le poate anima

Când te gândești la animarea proprietăților CSS, care îți vin în minte? Will Boyd a privit întrebarea dintr-o perspectivă diferită și a decis să exploreze proprietățile care nu-ți vin imediat în minte, cele care nu sunt de obicei asociate cu animația, dar se dovedesc a fi animabile.

În postarea sa „Lucrurile surprinzătoare pe care CSS le poate anima”, Will se scufundă adânc în aceste proprietăți neașteptat de animate - și, bineînțeles, lucrurile ingenioase pe care le poți face prin animarea lor. z-index , de exemplu, poate fi folosit pentru animații stratificate, opacity vă ajută să eliminați un modal doar cu CSS. O reamintire grozavă a cât de puternic este CSS.

Resurse de învățare

Învățarea nu se oprește niciodată, nu? Mai jos am compilat câteva utile - și distractive! — resurse care sunt perfecte pentru a vă duce abilitățile CSS la următorul nivel . Și dacă ești deja un profesionist CSS, există și provocări pentru a-ți pune cunoștințele la încercare. Bucurați-vă!

Vocab CSS și cheatsheets

S-ar putea să fi fost acolo înainte. Chiar atunci când lucrați la un termen limită strâns , trebuie să căutați ceva rapid. Pentru CSS, nu veți greși niciodată cu CSS Tricks Almanah și puteți căuta și vocabularul CSS adunat de Ville V. Vanninen din Finlanda.

Învață Flexbox The Fun Way

Ce au în comun broaștele, zombii și turnurile ? Ei bine, ei sunt cei mai buni prieteni ai tăi când învață Flexbox. Pentru că, să fim sinceri: Flexbox este foarte puternic odată ce îl înțelegi, dar să ajungi acolo poate fi destul de greu. Deci, să facem învățarea puțin mai distractivă.

În jocul Flexbox Froggy, îi ajuți pe o broască mică și pe prietenii ei să-și găsească nafoanele , ai ghicit, scriind CSS. Jocul constă din 24 de niveluri care te duc de la elementele de bază ale poziționării Flexbox la provocări mai avansate.

Dacă zombii sunt mai mult pe aleea ta, Flexbox Zombies este pentru tine. Fiecare secțiune a jocului dezvăluie o parte a intrigii, introduce un nou concept Flexbox și prezintă așa-numitele „provocări de supraviețuire zombie” care vă ajută să vă consolidați noile abilități.

Nu în ultimul rând, ați putea dori să aruncați o privire și la Flexbox Defense. Inspirat de jocurile de apărare a turnului, treaba ta este să împiedici inamicii care vin să treacă de apărarea ta - prin poziționarea turnurilor cu CSS, desigur. Toate cele trei jocuri rulează direct în browser. Flexbox fericit!

Grilă CSS, selectoare CSS și alte competiții

Vrei să-ți duci abilitățile CSS la nivelul următor? Aceste trei mici jocuri te ajută să faci exact asta - la propriu. În Grid Garden, vei deveni mândru proprietar al unei grădini de morcovi . Te așteaptă 28 de niveluri în care trebuie să ai grijă de recolta ta cu ajutorul grilei CSS.

Dacă simțiți că abilitățile dvs. de selectoare CSS ar putea avea nevoie de unele îmbunătățiri, CSS Diner este pentru dvs. Farfurii, mere, murături — în fiecare dintre cele 32 de provocări, va trebui să utilizați un selector CSS diferit pentru a selecta anumite elemente de pe un tabel.

Și dacă sunteți pregătit pentru o competiție, asigurați-vă că consultați și CSSBattle. În jocul de golf CSS , vă veți folosi abilitățile CSS pentru a reproduce vizual ținte cu cel mai mic cod posibil pentru a ajunge în partea de sus a clasamentului. Fiecare dintre provocări este dedicată unui subiect specific, cum ar fi visibility , display , transition sau z-index .

Încheierea

Ați întâlnit recent o resursă sau o tehnică CSS care a schimbat modul în care abordați o anumită provocare? Spune-ne în comentariile de mai jos! Ne-ar plăcea să auzim despre asta.