CSS3 cirkulære og elliptiske gradienter [CSS3 Tips]
I dag skal vi fortsætte vores diskussion om CSS3 Gradienter. I det foregående indlæg har vi vist dig, hvordan du opretter Lineære gradienter. Denne gang dækker vi deres relative, Cirkulære og elliptiske gradienter.
Gradientsyntaxen
Graden i CSS3 erklæres ved hjælp af baggrundsbillede ejendom. Dette er for bedre kompatibilitet, når vi også skal tilføje baggrundsfarve i en enkelt regel sæt, så de ikke kolliderer med hinanden. Så for at oprette den radiale gradient kalder vi simpelthen det med dette radial-gradient () fungere. Der er fire værdier, der skal medtages i funktionen for at indstille gradienten korrekt.
Den første værdi definerer gradientposition. Vi kan bruge et beskrivende søgeord som top, bund, center og venstre, eller vi kan også være mere specifikke som, 50% 50% for at indstille graden i midten eller 0% 0% for at indstille graden til at starte ved øverst til venstre.
Den anden værdi definerer form og gradientstørrelse, Der er to argumenter for at forme gradienterne, først den ellipse som er standard, og den anden er cirkel.
Og for gradient størrelse, vi kan vælge et af følgende seks argumenter.
| Værdier | Beskrivelse |
|---|---|
tættest-side | Gradientens form møder siden af kassen tæt på midten (for cirkler) eller møder både de vertikale og vandrette sider nærmest midten (for ellipser). |
nærmest-hjørne | Gradientens form er dimensioneret, så den præcis møder det nærmeste hjørne af kassen fra midten. |
fjernest-side | Ligner på nærmeste side, med undtagelse af formen er dimensioneret til at opfylde siden af kassen længst fra centrum (eller vertikale og vandrette sider). |
længst-hjørne | Gradientens form er dimensioneret, så den præcis møder det yderste hjørne af kassen fra midten. |
indeholde | Et synonym for |
dække over | Et synonym for |
Tabel Kilde: Mozilla Developer Network.
Endelig definerer den tredje og den fjerde farvekombination. Så her er hvordan vi skriver syntaksen for at skabe elliptisk gradienter, og denne gang vil vi bruge dække over for gradient størrelse, så det vil sprede sig bredt, dækker beholderen;
krop baggrundsbillede: radial-gradient (center center, ellipse cover, # ffeda3, # ffc800);
At oprette cirkulære gradient kan vi simpelthen gøre det på denne måde:
krop baggrundsbillede: radial-gradient (center center, cirkel cover, # ffeda3, # ffc800);
Som navnet antyder, vil gradientformen være en cirkel.
Browser Support
Bare bemærk, men alle browsere er stadig i færd med at yde fuld støtte til denne funktion, så de har stadig brug for leverandørens præfiks. Således hele den komplette syntaks, der vil fungere i alle moderne browsere - IE10 +, Firefox 3.6+, Chrome 4.0+, Safari 4.0+ og Opera 11+ - vil se sådan ud;
krop baggrundsbilde: radial-gradient (center bund, ellipse cover, # ffeda3, # ffc800); baggrundsbillede: -O-radial-gradient (center bund, ellipse cover, # ffeda3, # ffc800); baggrundsbillede: -ms-radial-gradient (center bund, ellipse cover, # ffeda3, # ffc800); baggrundsbilde: -moz-radial-gradient (center bund, ellipse cover, # ffeda3, # ffc800); baggrundsbillede: -webkit-radial-gradient (center bund, ellipse cover, # ffeda3, # ffc800);
Tjek demoen eller download kilden for at spille rundt med gradienter.
- Demo
- Download kilde
Endelige Ord
Oprettelse af CSS3 radial gradient er ikke så svært, som du tror, og især når du får hjælp fra disse værktøjer til generering af kode:
- Colorzilla Gradients
- Gradientoo
Radial gradient er kun en type CSS3-gadgets, vi fortsætter vores diskussion om emnet i fremtidige stillinger, så hold dig opdateret til Hongkiat.com
