Alcuni collegamenti sui gradienti CSS

Di tanto in tanto, lo spirito del blogging sembra confluire attorno a un determinato argomento ed è come se gli articoli salvati nella mia cartella dei segnalibri stessero conversando. La conversazione in corso ora riguarda i gradienti CSS e ho pensato di collegare alcuni dei pezzi più interessanti.

• Giorno 22: gradienti conici — Manuel Matuzovic ha esaminato i gradienti conici il giorno 21 della sua serie di 100 giorni sui CSS moderni, fornendo una bella panoramica di alto livello su colori, angoli, posizionamento e interruzioni di colore. Poi, avanti Giorno 22, lo usa sul ::backdrop pseudo-elemento. (A proposito, Twitter inaspettatamente ha sospeso il suo account - aiutiamo a raddrizzare quella nave se possiamo.)
• Capisci davvero i gradienti radiali CSS? - Patrizio Brosset ha svolto un lavoro degno di nota qui e onestamente ci sto ancora lavorando. Ma apprezzo già le sue chiare spiegazioni e dimostrazioni di cose che ancora confondo, come le parole chiave per la dimensione e la forma di un gradiente radiale. Lo sto già collegando nel nostro Guida ai gradienti CSS!
• Sfumature di sfondo altamente personalizzabili — Ehi, parlando di gradiente radiale, Scott VandeheyLa ricetta di per uno con più interruzioni di colore ha fatto il giro la settimana scorsa. La sua sfida era creare un modello di gradiente in grado di supportare diverse variazioni di colore, che normalmente sarebbe un caos di classi CSS e valori di colore per ciascuna variazione se non fosse per l'utilizzo proprietà personalizzate. In questo modo, può assegnare una proprietà personalizzata per i diversi colori e valori di posizionamento per ciascuna interruzione di colore, quindi aggiornare semplicemente i valori a seconda del contesto. E in più, il modo in cui le proprietà personalizzate possono essere aggiornate con JavaScript lo ha consentito a Scott costruire uno strumento per personalizzare il suo modello di gradiente, che viene generosamente condiviso alla fine del post.
• Motivi mezzitoni CSS - Michele Barker con una ripartizione dettagliata dei modelli "mezzitoni" di Ana Tudor. L'effetto è simile alla stampa a inchiostro punteggiata dei giornali della vecchia scuola. Mentre Ana usa Houdini dietro il cofano per l'animazione e gli effetti al passaggio del mouse, Michelle esamina specificamente l'effetto mezzitoni stesso e come è costruito con un gradiente radiale. Mi piace particolarmente il modo in cui Michelle mostra come passare da una semplice griglia di punti a una in cui lo schema è leggermente sfalsato. E resta fino alla fine per vedere come sottolinea l'effetto con a mask-image che utilizza un gradiente lineare per creare un effetto di dissolvenza. Ho rifatto un po' questo schema, e mi sono ritrovato con qualcosa di pulito che assomiglia a un filtro per macchie di inchiostro che cola.
• Una soluzione eccezionale per la barra di navigazione — Eric Meyer ha ricevuto un'interessante sfida progettuale per un menu in cui una linea tratteggiata esce dal collegamento "pagina corrente" e diventa parte di un bordo tratteggiato più grande lungo il bordo sinistro del contenitore del contenuto. Eric è sempre un ottimo esempio come pensare come uno sviluppatore front-end, e lo fa qui mentre descrive il percorso alternativo che ha intrapreso utilizzando una pendenza lineare quando ha incontrato un intoppo con l'approccio standard dell'impostazione border-style: dotted sull'elemento.
• Linee tratteggiate sfumate mascherate — Eric con un seguito a quell'ultimo collegamento che mostra non solo come ha collegato i trattini di un bordo sinistro ai trattini di un'immagine raster, ma come il suo perspicace occhio progettuale lo ha convinto a cambiare la sua soluzione per imitare la risoluzione inferiore dell'immagine i trattini dell'immagine utilizzando due gradienti di sfondo lineari ripetuti come a mask-image sul gradiente dello sfondo. Così nerd e fantastico!