CSS3 cirkelvormige en elliptische verlopen [CSS3 tips]
Vandaag gaan we onze discussie voortzetten CSS3 verlopen. In de vorige post hebben we je laten zien hoe je kunt creëren Lineaire verlopen. Deze keer zullen we hun familielid behandelen, Circulaire en elliptische verlopen.
De syntaxis voor verloop
Het verloop in CSS3 wordt gedeclareerd met behulp van de achtergrond afbeelding eigendom. Dit is voor een betere compatibiliteit wanneer we ook moeten toevoegen Achtergrond kleur in een enkele regelset, zodat ze niet met elkaar botsen. Vervolgens, om de radiale gradiënt te creëren, noemen we dit eenvoudig hiermee radiaal-gradiënt () functie. Er zijn vier waarden die moeten worden opgenomen in de functie om het verloop juist in te stellen.
De eerste waarde definieert de verlooppositie. We kunnen een beschrijvend zoekwoord gebruiken zoals boven, onder, midden en links, of we kunnen ook specifieker zijn zoals, 50% 50% om het verloop in het midden of in te stellen 0% 0% om het verloop in te stellen om te beginnen bij linksboven.
De tweede waarde definieert de vorm en de gradiëntgrootte, er zijn twee argumenten om de gradiënten vorm te geven, eerst de ellips welke standaard is, en de tweede is cirkel.
En voor de gradiënt grootte, we kunnen een van de volgende zes argumenten selecteren.
| waarden | Omschrijving |
|---|---|
dichtstbijzijnde kant | De vorm van het verloop komt overeen met de zijkant van het vak dat zich het dichtst bij het midden bevindt (voor cirkels) of ontmoet zowel de verticale als horizontale zijden die zich het dichtst bij het midden bevinden (voor ellipsen). |
dichtstbijzijnde-corner | De vorm van het verloop is zodanig dat het precies de dichtstbijzijnde hoek van de doos vanaf het midden benadert. |
verste zijde | Gelijk aan de dichtstbijzijnde kant, behalve dat de vorm de juiste maat heeft voor de zijkant van de doos die het verst verwijderd is van het midden (of verticale en horizontale zijden). |
verste hoek | De vorm van het verloop is zodanig dat het precies vanuit het midden de verste hoek van de doos raakt. |
bevatten | Een synoniem voor |
deksel | Een synoniem voor |
Tabelbron: Mozilla Developer Network.
Ten slotte definiëren de derde en de vierde de kleurencombinatie. Dus, hier is hoe we de syntaxis schrijven om het te maken elliptisch verlopen, en deze keer zullen we gebruiken deksel voor de gradiëntgrootte, dus het zal zich wijd verspreiden, terwijl het de container bedekt;
body background-image: radial-gradient (center center, ellipse cover, # ffeda3, # ffc800);
Om de te maken Circulaire gradiënt kunnen we het gewoon op deze manier doen:
body background-image: radial-gradient (center center, circle cover, # ffeda3, # ffc800);
Zoals de naam al aangeeft, is de verloopvorm een cirkel.
Browserondersteuning
Houd er echter rekening mee dat alle browsers nog steeds volledige ondersteuning bieden voor deze functie, dus ze hebben nog steeds de prefix van de leverancier nodig. Dus de hele complete syntaxis die in alle moderne browsers werkt - IE10 +, Firefox 3.6+, Chrome 4.0+, Safari 4.0+ en Opera 11+ - zal er ongeveer zo uitzien;
body background-image: radial-gradient (center bottom, ellipse cover, # ffeda3, # ffc800); achtergrondafbeelding: -o-radiale gradiënt (midden onder, ellipsdeksel, # ffeda3, # ffc800); achtergrondafbeelding: -ms-radiale gradiënt (midden onder, ellipsdeksel, # ffeda3, # ffc800); achtergrondafbeelding: -moz-radial-gradient (midden onder, ellipsdeksel, # ffeda3, # ffc800); achtergrondafbeelding: -webkit-radiale gradiënt (midden onder, ellipsdeksel, # ffeda3, # ffc800);
Bekijk de demo of download de bron om met hellingen te spelen.
- demonstratie
- Download de bron
Laatste woorden
Het maken van CSS3 radiale gradient is niet zo moeilijk als je denkt, en vooral als je hulp krijgt van deze tools voor het genereren van code:
- Colorzilla-verlopen
- Gradientoo
Radiale gradiënt is slechts één type CSS3-gadgets, we zullen onze discussie over het onderwerp in toekomstige berichten voortzetten, dus houd ons in de gaten voor Hongkiat.com
