Sekoita oma CSS-gradienttisi tämän ilmaisen Web-sovelluksen kanssa

Jokaisen web-suunnittelijan tulisi tietää CSS3-gradientit. He ovat olleet noin vuosia ja niitä tukevat laajalti kaikki tärkeimmät selaimet.

Ja nyt, ilmaiset web-sovellukset, kuten Sekoitus voit luoda CSS3-kaltevuudet lennossa selaimen visuaaliset editorit. Voit valita lineaariset ja säteittäiset kaltevuudet samalla kun silkkaa värejä sekoittumaan.

Alkuperäinen sivu latautuu kaksi kiinteää väriä kummallakin puolella. Voit käyttää väripaletti kääntää värisävyä tai kirjoita a manuaalinen HEX-koodi jos tiedät haluamasi värin. Kun olet saanut kaksi väriä, napsauta “Sekoitetaan” nappi keskustassa.

Molemmat värit sekoittuvat yhdessä CSS3-gradienttiin muokattavia vaihtoehtoja lähellä sivun yläreunaa. Voit valita lineaariset gradientit & säteittäiset kaltevuudet, ja jos käytät lineaarista tyyliäsi vedä keskiosaa kaikkialla sivulla.

Plus, kun olet sekoitustilassa voit silti mennä takaisin muuttaa värejä pohjalla. Tämä on kuin täydellinen kooditon CSS3-gradienttigeneraattori, jota jokainen suunnittelija tarvitsee.

Kun sinulla on kaksi väriä, voit napsauttaa koodikannakkeen kuvake oikeassa yläkulmassa. Tämä tuo esiin ikkuna CSS-koodilla voit kopioida / liittää tyylitiedostoihin.

Blend on ilmainen työkalu, jonka NYC suunnitteli Colin Keany. Se on myös hänen sivustossaan, vaikka en näe linkkiä GitHubiin tai mihinkään vapaaseen lähdekoodiin. Mutta hän kirjoitti tapaustutkimus yksityiskohtaisesti hänen prosessinsa luominen Blendin kanssa kaikilla kätevillä ominaisuuksillaan.

Valitettavasti nykyinen versio ei tue enemmän kuin kahta väriä. Mutta ylitän sormeni monivärisiä vaihtoehtoja varten.

Koska et voi ladata paikallista kopiota, suosittelen kirjanmerkkiä Blend tulevaa käyttöä varten. Se on täydellinen tapa testigradientit muokkaamatta tyylitaulukkoasi toistuvasti.

Ja jos haluat jakaa ajatuksesi tai vain kiittää kiitos tästä gradienttityökalusta, voit piirtää Colin @colinkeany.