Blend dine egne CSS-gradienter med denne gratis webapp

Hver webdesigner burde vide om CSS3 gradienter. De har eksisteret i årevis, og de er bredt understøttet af alle større browsere.

Og nu, gratis web apps som f.eks Blanding lad dig oprette CSS3 gradienter i flyve med in-browser visuelle redaktører. Du kan vælge imellem lineære og radiale gradienter mens tinkering med farver for at blande.

Den første side indlæser med to faste farver på hver side. Du kan bruge farvepalet at vende mellem nuancer eller indtaste a manuel HEX kode hvis du kender den farve du vil have. Når du har to farver, kan du lide at klikke på “Lad os blande” knap i centrum.

Begge farver blandes sammen i en CSS3 gradient med redigerbare muligheder nær toppen af ​​siden. Du kan vælge imellem lineære gradienter & radiale gradienter, og hvis du bruger den lineære stil, du kan træk midtpunktet over hele siden.

Plus, mens du er i blandingstilstand du kan stadig gå tilbage til ændre farverne på bunden. Dette er som den perfekte kodefri CSS3-gradientgenerator, som hver designer har brug for.

Når du har to farver, du kan lide, kan du klikke på ikon for kodebeslag i øverste højre hjørne. Dette bringer op en vindue med CSS kode at du kan kopiere / indsætte i dine stylesheets.

Blend er et gratis værktøj oprettet af NYC designer Colin Keany. Det er også vært på hans websted, selv om jeg ikke kan se et link til GitHub eller nogen gratis kildekode hvor som helst. Men han skrev en casestudie detaljering af hans proces skabe Blend med alle dens praktiske funktioner.

Desværre er den aktuelle version understøtter ikke mere end to farver. Men jeg krydser mine fingre for flere farver i fremtiden.

Da du ikke kan downloade en lokal kopi, anbefaler jeg at bruge bookmarking Blend til fremtidig brug. Det er den perfekte måde at testgradienter uden gentagne gange at redigere dit stylesheet.

Og hvis du vil dele dine ideer eller bare sige tak for dette gradientværktøj, kan du tweet Colin @colinkeany.