CSS3 cirkulära och elliptiska gradienter [CSS3 Tips]
Idag ska vi fortsätta diskussionen om CSS3-gradienter. I föregående inlägg har vi visat dig hur du skapar Linjära gradienter. Den här gången kommer vi att täcka deras släkting, Cirkulära och elliptiska gradienter.
Gradientsyntaxen
Graden i CSS3 deklareras med hjälp av bakgrundsbild fast egendom. Detta är för bättre kompatibilitet när vi också behöver lägga till bakgrundsfärg i en enda regel uppsättning, så att de inte kolliderar med varandra. Då, för att skapa den radiella gradienten kallar vi det bara med det här radial-gradient () fungera. Det finns fyra värden att inkludera i funktionen för att ställa in gradienten ordentligt.
Det första värdet definierar gradientposition. Vi kan använda ett beskrivande sökord som topp, botten, mitt och vänster, eller vi kan också vara mer specifika som, 50% 50% för att ställa in lutningen i mitten eller 0% 0% för att ställa in gradienten att börja vid övre vänstra.
Det andra värdet definierar formen och gradientstorleken, Det finns två argument för att forma gradienterna, först den ellips vilket är standardvärdet, och det andra är cirkel.
Och för gradientstorlek, Vi kan välja ett av följande sex argument.
| värden | Beskrivning |
|---|---|
närmast-sida | Gradientens form möter sidan av rutan närmast centrum (för cirklar) eller möter både de vertikala och horisontella sidorna närmast centrum (för ellipser). |
närmast-corner | Gradientens form är dimensionerad så att den exakt möter närmaste hörn av lådan från centrum. |
längst bort-sidan | Liknande närmaste sida, förutom att formen är stor för att möta sidan av lådan längst bort från centrum (eller vertikala och horisontella sidor). |
längst bort-corner | Gradientens form är dimensionerad så att den exakt möter det längsta hörnet av lådan från dess centrum. |
innehålla | En synonym för |
omslag | En synonym för |
Tabellkälla: Mozilla Developer Network.
Slutligen definierar den tredje och den fjärde färgkombination. Så här är hur vi skriver syntaxen för att skapa Elliptisk gradienter, och den här gången kommer vi att använda omslag för gradientstorleken, så det kommer att sprida sig bred och täcka behållaren;
kropp bakgrundsbild: radial-gradient (center center, ellipsdeksel, # ffeda3, # ffc800);
För att skapa Cirkulär gradient kan vi helt enkelt göra det på så sätt:
kropp bakgrundsbild: radial-gradient (centrum, cirkelöverdrag, # ffeda3, # ffc800);
Som namnet antyder kommer gradientformen att vara en cirkel.
Webbläsarsupport
Notera dock att alla webbläsare fortfarande håller på att ge fullt stöd för den här funktionen, så de behöver fortfarande säljarprefixet. Således hela den fullständiga syntaxen som kommer att fungera i alla moderna webbläsare - IE10 +, Firefox 3.6+, Chrome 4.0+, Safari 4.0+ och Opera 11+ - kommer att se ut så här;
kropp bakgrundsbild: radial-gradient (centrum botten, ellipsdeksel, # ffeda3, # ffc800); Bakgrundsbild: -O-radial-gradient (centrum botten, ellipsskyddet, # ffeda3, # ffc800); bakgrundsbild: -ms-radial-gradient (centrum botten, ellipsdeksel, # ffeda3, # ffc800); bakgrundsbild: -moz-radial-gradient (center botten, ellipsskydd, # ffeda3, # ffc800); bakgrundsbild: -webkit-radial-gradient (mitten av botten, ellipsdeksel, # ffeda3, # ffc800);
Kolla in demoen eller ladda ner källan för att spela runt med gradienter.
- demo
- Hämta källa
Slutord
Att skapa CSS3 radial gradient är inte lika svårt som du tror, och speciellt när du får hjälp från dessa verktyg för att generera kod:
- Colorzilla Gradients
- Gradientoo
Radiell gradient är bara en typ av CSS3-parametrar, vi fortsätter vår diskussion om ämnet i framtida inlägg, så håll dig uppdaterad till Hongkiat.com
