Câteva linkuri despre gradienții CSS

Din când în când, cei mai diverși blogginguri par să se unească în jurul unui anumit subiect și parcă articolele salvate în folderul meu de marcaje au o conversație. Conversația care stă acolo acum se referă la Gradienți CSS și m-am gândit să leez câteva dintre cele mai interesante piese.

• Ziua 22: gradiente conice — Manuel Matuzovic a analizat gradienții conici în ziua 21 a seriei sale de 100 de zile despre CSS modern, oferind o imagine frumoasă la nivel înalt asupra culorilor, unghiurilor, plasării și opririlor de culoare. Apoi Ziua 22, îl folosește pe ::backdrop pseudo-element. (Apropo, Twitter în mod neașteptat i-a suspendat contul — să ajutăm la corectarea navei, dacă putem.)
• Înțelegi cu adevărat gradienții radiali CSS? - Patrick Brosset a făcut o muncă demnă de ghid aici și, sincer, încă îmi fac drum prin asta. Dar prea apreciez explicațiile sale clare și demonstrațiile despre lucruri pe care încă le amintesc, cum ar fi cuvintele cheie pentru dimensiunea și forma unui gradient radial. Deja conectez asta în al nostru Ghid de degrade CSS!
• Degrade de fundal foarte personalizabile — Hei, vorbind de gradient radial, Scott VandeheyRețeta lui pentru unul cu mai multe opriri de culoare a făcut răsturnarea săptămâna trecută. Provocarea lui a fost să creeze un model de gradient care ar putea suporta diferite variații de culoare, care ar fi în mod normal o mizerie fierbinte de clase CSS și valori de culoare pentru fiecare variație dacă nu ar fi folosit. proprietăți personalizate. În acest fel, el poate atribui o proprietate personalizată pentru diferitele culori și valori de plasare pentru fiecare oprire de culoare, apoi pur și simplu să actualizeze valorile în funcție de context. Și mai mult, modul în care proprietățile personalizate pot fi actualizate cu JavaScript i-a permis lui Scott construiește un instrument pentru personalizarea modelului său de gradient, care este distribuit cu generozitate la sfârșitul postării.
• Modele de semiton CSS - Michelle Barker cu o defalcare detaliată a tiparelor „semiton” ale Anei Tudor. Efectul este un fel ca imprimarea cu cerneală punctată a ziarelor de școală veche. În timp ce Ana folosește Houdini sub capota pentru animație și efecte de hover, Michelle se uită în mod specific la efectul de semiton în sine și la modul în care este construit cu un gradient radial. Îmi place în special modul în care Michelle arată cum să treci de la o grilă simplă de puncte la una în care modelul este puțin eșalonat. Și rămâneți până la sfârșit pentru a vedea cum punctează efectul cu a mask-image care utilizează un gradient liniar pentru a crea un efect de estompare. Am făcut un pic cu acest model, de asemenea, și s-a terminat cu ceva îngrijit care arată ca un filtru de pete de cerneală care curge.
• O soluție atrăgătoare pentru bara de navigare — Eric Meyer a primit o provocare interesantă de proiectare pentru un meniu în care o linie punctată iese din linkul „pagina curentă” și devine parte a unui chenar punctat mai mare de-a lungul marginii din stânga a containerului de conținut. Eric este întotdeauna un exemplu excelent cum să gândești ca un dezvoltator front-end, și o face aici în timp ce descrie traseul alternativ pe care l-a parcurs folosind un gradient liniar când a lovit o problemă cu abordarea standard de setare border-style: dotted asupra elementului.
• Linii întrerupte degradate mascate — Eric, cu o continuare a acestui ultim link, care arată nu numai modul în care a conectat liniuțele unui chenar din stânga cu liniuțele unei imagini raster, ci și modul în care ochiul său de design perspicace l-a convins să-și schimbe soluția pentru a imita rezoluția inferioară a imaginii. liniuțele imaginii folosind doi gradienți liniari de fundal care se repetă ca a mask-image pe gradient de fundal. Atât de tocilar și grozav!