CSS3 sirkulære og elliptiske gradienter [CSS3 Tips]
I dag skal vi fortsette vår diskusjon om CSS3 Gradienter. I forrige innlegg har vi vist deg hvordan du oppretter Linjære gradienter. Denne gangen vil vi dekke deres slektninger, Sirkulære og elliptiske gradienter.
Gradient-syntaksen
Graden i CSS3 er deklarert ved hjelp av bakgrunnsbilde eiendom. Dette er for bedre kompatibilitet når vi også må legge til bakgrunnsfarge i en enkelt regel sett, slik at de ikke kolliderer med hverandre. Da, for å lage den radiale gradienten, kaller vi det bare med dette radial-gradient () funksjon. Det er fire verdier som skal inkluderes i funksjonen for å angi gradienten riktig.
Den første verdien definerer gradient posisjon. Vi kan bruke et beskrivende søkeord som topp, bunn, senter og venstre, eller vi kan også være mer spesifikke som, 50% 50% å angi gradienten i midten eller 0% 0% å angi graden for å starte på øverst til venstre.
Den andre verdien definerer form og gradientstørrelse, Det er to argumenter for å forme gradienter, først ellipse som er standard, og den andre er sirkel.
Og for gradient størrelse, Vi kan velge ett av følgende seks argumenter.
| verdier | Beskrivelse |
|---|---|
nærmeste-side | Gradientens form møter siden av boksen nærmest midtpunktet (for sirkler) eller møter både vertikale og horisontale sider nærmest midten (for ellipser). |
nærmeste hjørne | Gradientens form er dimensjonert slik at den nøyaktig møter nærmeste hjørne av boksen fra sentrum. |
lengst siden | Ligner på nærmeste side, unntatt formen er dimensjonert for å møte siden av boksen lengst fra midten (eller vertikale og horisontale sider). |
lengst hjørne | Gradientens form er dimensjonert slik at den nøyaktig møter det ytre hjørnet av boksen fra sentrum. |
inneholde | Et synonym for |
dekke | Et synonym for |
Tabell Kilde: Mozilla Developer Network.
Til slutt definerer den tredje og den fjerde fargekombinasjon. Så, her er hvordan vi skriver syntaksen for å lage elliptisk gradienter, og denne gangen vil vi bruke dekke for gradient størrelse, så det vil spre seg bredt, dekker beholderen;
kropp bakgrunnsbilde: radial-gradient (midtpunkt, ellipsdeksel, # ffeda3, # ffc800);
Å opprette Sirkulær gradient kan vi bare gjøre det på denne måten:
kropp bakgrunnsbilde: radial-gradient (midtpunkt, sirkeldeksel, # ffeda3, # ffc800);
Som navnet antyder, vil gradientformen være en sirkel.
Nettleserstøtte
Bare vær oppmerksom på at alle nettleserne fortsatt er i ferd med å gi full støtte til denne funksjonen, slik at de fortsatt trenger leverandørens prefiks. Dermed er hele komplett syntaks som vil fungere i alle moderne nettlesere - IE10 +, Firefox 3.6+, Chrome 4.0+, Safari 4.0+ og Opera 11+ - vil se noe slikt ut;
kropp bakgrunnsbilde: radial-gradient (senterbunn, ellipsdeksel, # ffeda3, # ffc800); bakgrunnsbilde: -O-radial-gradient (senterbunn, ellipsdeksel, # ffeda3, # ffc800); bakgrunnsbilde: -ms-radial-gradient (senterbunn, ellipsdeksel, # ffeda3, # ffc800); bakgrunnsbilde: -moz-radial-gradient (senterbunn, ellipsdeksel, # ffeda3, # ffc800); bakgrunnsbilde: -webkit-radial-gradient (senterbunn, ellipsdeksel, # ffeda3, # ffc800);
Sjekk ut demoen eller last ned kilden for å spille rundt med gradienter.
- Demo
- Last ned kilde
Endelige ord
Å lage CSS3 radial gradient er ikke så vanskelig som du tror, og spesielt når du får hjelp fra disse verktøyene for å generere kode:
- Colorzilla Gradients
- Gradientoo
Radialgradient er bare en type CSS3-parametere, vi fortsetter vår diskusjon om emnet i fremtidige innlegg, så hold deg innstilt på Hongkiat.com
