Joitakin linkkejä CSS-gradienteista

Ajoittain bloggaamisen zeitgiest näyttää sulautuvan yhteen tietyn aiheen ympärille ja on kuin kirjanmerkkikansioni tallennetut artikkelit keskustelevat. Siellä nyt käyty keskustelu koskee CSS-gradienteja, ja ajattelin linkittää joitain mielenkiintoisempia kappaleita.

• Päivä 22: kartiomaiset gradientit — Manuel Matuzovic tarkasteli kartiomaisia ​​gradientteja 21. päivänä 100 päivän sarjassaan nykyaikaisesta CSS:stä tarjoten mukavan korkean tason katsauksen väreihin, kulmiin, sijoitteluun ja väripysähdyksiin. Sitten päälle Päivä 22, hän käyttää sitä ::backdrop pseudoelementti. (Muuten, Twitter yllättäen keskeytti tilinsä - Autetaan laiva oikein, jos voimme.)
• Ymmärrätkö todella CSS-radiaaliset gradientit? - Patrick Brosset on tehnyt täällä oppaan arvoista työtä, ja rehellisesti sanottuna työskentelen edelleen sen läpi. Mutta arvostan jo valmiiksi hänen selkeitä selityksiään ja esittelyjä asioista, joita vielä hillitsen, kuten avainsanoja säteittäisen gradientin kokoa ja muotoa varten. Yhdistän tämän jo omassamme CSS-gradienttiopas!
• Erittäin muokattavissa olevat taustagradientit - Hei, säteittäisgradientista puheen ollen, Scott Vandehey's resepti yksi monivärinen lopetti kierroksen viime viikolla. Hänen haasteensa oli luoda gradienttikuvio, joka voisi tukea erilaisia ​​värimuunnelmia, mikä normaalisti olisi kuuma sotku CSS-luokista ja kunkin muunnelman väriarvoista, ellei niitä käytettäisi. mukautetut ominaisuudet. Tällä tavalla hän voi määrittää mukautetun ominaisuuden eri väreille ja sijoitusarvoille kullekin väripysähdyksellä ja päivittää sitten arvot kontekstin mukaan. Ja mikä parasta, tapa, jolla mukautettuja ominaisuuksia voidaan päivittää JavaScriptillä, salli Scottille rakentaa työkalu hänen gradienttikuvion mukauttamiseen, joka jaetaan avokätisesti julkaisun lopussa.
• CSS-rasterointimallit - Michelle Barker Ana Tudorin "puolisävy" -kuvioiden yksityiskohtainen erittely. Vaikutus on kuin vanhan koulun sanomalehtien pilkullinen mustetulostus. Kun Ana käyttää Houdini Animaatio- ja hover-tehosteiden kannen alla Michelle tarkastelee erityisesti itse rasteritehostetta ja sitä, kuinka se on rakennettu säteittäisellä gradientilla. Pidän erityisesti siitä, miten Michelle näyttää kuinka päästä yksinkertaisesta pisteruudukosta sellaiseen, jossa kuvio on hieman porrastettu. Ja pysy loppuun asti nähdäksesi, kuinka hän välittelee tehosteen a:lla mask-image joka käyttää lineaarista gradienttia häivyttävän vaikutuksen luomiseen. Riffailin hieman tätä malliaja lopputuloksena jotain siistiä, joka näyttää juoksevalta mustesuodattimelta.
• Näyttävä Navbar-ratkaisu — Eric Meyerille annettiin mielenkiintoinen suunnitteluhaaste valikosta, jossa katkoviiva tulee ulos "nykyisen sivun" linkistä ja tulee osaksi suurempaa katkoviivaa sisältösäiliön vasemmassa reunassa. Eric on aina loistava esimerkki kuinka ajatella etupään kehittäjänä, ja hän tekee sen tässä, kun hän kuvailee vaihtoehtoista reittiä, jonka hän kulki käyttämällä lineaarista gradienttia osuessaan jumiin tavallisella asetuksella. border-style: dotted elementin päällä.
• Naamioidut liukuvärit katkoviivat — Eric ja viimeinen linkki, joka osoittaa paitsi kuinka hän yhdisti vasemman reunan katkoviivat rasterikuvan katkoviivoihin, myös kuinka hänen herkkä suunnittelusilmänsä sai hänet muuttamaan ratkaisuaan jäljittelemään kuvan alhaisempaa resoluutiota. kuvan viivat käyttämällä kahta toistuvaa lineaarista taustagradienttia a mask-image taustagradientilla. Niin nörttiä ja mahtavaa!