Domača » Toolkit » Mešajte lastne CSS gradiente s to brezplačno spletno aplikacijo

    Mešajte lastne CSS gradiente s to brezplačno spletno aplikacijo

    Vsak spletni oblikovalec mora vedeti Gradienti CSS3. Okoli tega so že vrsto let in jih veliko podpirajo vsi večji brskalniki.

    In zdaj, brezplačne spletne aplikacije, kot je Mešanica vam omogoča ustvarjanje CSS3 gradientov na letenje z vizualni urejevalniki v brskalniku. Izbirate lahko med linearni in radialni gradienti med mešanjem barv.

    Začetna stran se naloži s dve trdni barvi na obeh straneh. Uporabite lahko barvna paleta za preklop med odtenki ali vnos a ročno kodo HEX če poznate želeno barvo. Ko imate dve želeni barvi, kliknite “Združimo” gumb v središču.

    Obe barvi se združita v CSS3 gradient z možnosti za urejanje na vrhu strani. Izbirate lahko med linearni gradienti & radialni gradienti, in če uporabljate linearni slog, ki ga lahko povlecite osrednjo lokacijo po vsej strani.

    Plus, medtem ko ste v načinu mešanja še vedno se lahko vrnete nazaj spremenite barve na dnu. To je kot popoln CSS3 gradient generator brez kode, ki ga potrebuje vsak oblikovalec.

    Ko imate dve barvi, ki ju želite, lahko kliknete ikona nosilca kode v zgornjem desnem kotu. To pripelje do okno s kodo CSS da lahko kopirate / prilepite v vaše sloge.

    Blend je brezplačno orodje, ki ga je ustvaril oblikovalec NYC Colin Keany. Prav tako je gostuje na njegovi strani, čeprav ne vidim povezave na GitHub ali katero koli brezplačno izvorno kodo kjerkoli. Vendar je pisal študijo primera podrobno opisuje svoj proces ustvarjanja Blend z vsemi svojimi priročnimi funkcijami.

    Na žalost trenutna različica ne podpira več kot dveh barv. Ampak v prihodnosti prečkajem prste za večbarvne možnosti.

    Ker ne morete prenesti lokalne kopije, priporočam, da ustvarite knjižni dodatek za prihodnjo uporabo. To je odličen način preizkusni gradienti brez večkratnega urejanja sloga.

    In če želite deliti svoje ideje ali se samo zahvaliti za to orodje za gradient, lahko Colin @colinkeany.