CSS3 Lineaire verlopen [CSS3-tips]
helling is een geweldige toevoeging aan kleurfuncties in CSS3. In plaats van slechts één kleur toe te voegen, kunnen we nu meerdere kleurencombinaties toevoegen in één aangifteblok zonder te vertrouwen op afbeeldingen, waardoor het HTTP-verzoek in onze website zou kunnen verminderen waardoor de website sneller kan worden geladen.
Als je in CSS3 met gradiënten hebt gespeeld, ben je waarschijnlijk bekend met de twee methoden: radiaal en lineair verloop. Het bericht van vandaag gaat over het laatste.
Gradiënten maken
Zoals de specificatie zegt, verlopen gradiënten in CSS3 een afbeelding is, heeft deze geen speciale eigenschap zoals andere nieuwe functie-toevoeging, dus wordt deze gedeclareerd met behulp van de achtergrond afbeelding eigendom in plaats daarvan.
Als we kijken naar de volledige syntaxis voor verloop, ziet het er een beetje uit overvolle, wat voor sommige mensen tot verwarring zou kunnen leiden.
div background-image: -webkit-linear-gradient (bovenaan, # FF5A00 0%, # FFAE00 100%); achtergrondafbeelding: -moz-lineaire gradiënt (boven, # FF5A00 0%, # FFAE00 100%); achtergrondafbeelding: -ms-lineaire gradiënt (boven, # FF5A00 0%, # FFAE00 100%); achtergrondafbeelding: -o-lineaire gradiënt (boven, # FF5A00 0%, # FFAE00 100%); achtergrondafbeelding: lineair verloop (bovenaan, # FF5A00 0%, # FFAE00 100%);
Laten we dus elk deel van de syntax een voor een ingaan om de dingen duidelijker te maken.
Allereerst wordt een lineair verloop verklaard met de lineaire gradiënt () functie. De functie heeft drie primaire waarden. De eerste waarde definieert de startpositie van de gradiënt. U kunt een beschrijvend zoekwoord gebruiken, zoals top om het verloop te starten dat uit de top;
div background-image: linear-gradient (top, # FF5A00, # FFAE00);
Het bovenstaande fragment is de officiële versie van W3C om gradiënten te maken. Het is eigenlijk eenvoudiger en vrij zelfverklarend en het zal ook het volgende verloop creëren.
Je kan ook gebruiken bodem om het tegenovergestelde te doen, of anders rechts en links.
We kunnen ook een diagonaal verloop maken met hoekgraad als de startpositie van de gradiënt. Hier is een voorbeeld:
div background-image: linear-gradient (45deg, # FF5A00, # FFAE00);
Met het bovenstaande fragment wordt de volgende kleurovergang gemaakt:
De tweede waarde van de functie vertelt het eerste kleur informatie en zijn stop positie die wordt vermeld in percentage. De stoppositie is eigenlijk optioneel; de browser is slim genoeg om de juiste positie te bepalen, dus wanneer we de stop van de eerste kleur niet opgeven, zal de browser dit doen 0% als de standaard.
En de volgende waarde is de tweede kleur combinatie. Het werkt als de vorige waarde, alleen als het de laatste kleur is die is toegepast en we hebben de waarde niet opgegeven stop positie, een waarde van 100% zal als standaard worden genomen. Laten we nu het onderstaande voorbeeld bekijken:
div background-image: linear-gradient (top, # FF5A00 0%, # FFAE00 100%);
Het bovenstaande fragment maakt een verloop zoals dat we eerder zagen (geen verschil) maar nu geven we de kleurstoppositie op;
Laten we nu het kleur stop, en deze keer zullen we specificeren 50% voor de eerste kleur en 51% voor de tweede kleur, en laten we eens kijken hoe het komt;
div background-image: linear-gradient (top, # FF5A00 50%, # FFAE00 51%);
Transparantie
Creëren transparantie in gradiënt is ook mogelijk. Om het effect te creëren, moeten we de kleur vertalen hex in RGBA modus en verlaag het alfakanaal.
div background-image: linear-gradient (top, rgba (255,90,0,0,2), rgb (255,174,0,0,2));
Het bovenstaande fragment verlaagt de kleurintensiteit met 20%, en het verloop zal als volgt verlopen:
Meerdere kleuren
Als u meer kleuren wilt toevoegen, voegt u de kleuren naast een andere toe met een komma-scheidingsteken en laat u de browser elke kleurstoppositie bepalen.
div background-image: lineair verloop (top, rood, oranje, geel, groen, blauw, indigo, violet);
Het bovenstaande fragment maakt de volgende regenboog.
Browsercompatibiliteit
Helaas moeten alle huidige browsers op het moment van schrijven de standaardsyntaxis nog ondersteunen. Ze hebben nog steeds het voorvoegsel van de leverancier nodig (-webkit-, -moz-, -Mevrouw- en -O-). Dus daarom is de volledige syntaxis als volgt:
div background-image: -webkit-linear-gradient (bovenaan, # FF5A00 0%, # FFAE00 100%); achtergrondafbeelding: -moz-lineaire gradiënt (boven, # FF5A00 0%, # FFAE00 100%); achtergrondafbeelding: -ms-lineaire gradiënt (boven, # FF5A00 0%, # FFAE00 100%); achtergrondafbeelding: -o-lineaire gradiënt (boven, # FF5A00 0%, # FFAE00 100%); achtergrondafbeelding: lineair verloop (bovenaan, # FF5A00 0%, # FFAE00 100%);
Aan de andere kant is Internet Explorer, met name versie 9 en lager, ver verwijderd van de standaard. Het verloop in IE9 en hieronder wordt verklaard met filter, dus als we gradiënt op die browsers willen toevoegen, moeten we zoiets schrijven;
div filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # FF5A00, endColorstr = # FFAE00);
De filter heeft zijn beperkingen: ten eerste zijn er niet meer dan drie kleuren toegevoegd, en het creëren van het transparantie-effect is ook een beetje lastig - het staat niet toe RGBA, maar de IE filter toepassingen #ARGB;
div filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # 33FF5A00, endColorstr = # 33FFAE00);
Hier is een hulpmiddel om je te helpen om te zetten RGBA naar #ARGB.
- demonstratie
- Download de bron
De syntax sneller schrijven
Zoals je hierboven kunt zien, moeten we om nog steeds de verloopcompatibiliteit tussen browsers te behouden, nog vijf coderegels toevoegen, wat inefficiënt is.
Er zijn veel manieren om de taak te vereenvoudigen; zoals het gebruik van de Prefix-vrije, Prefixr, LESS of Sass om de codes te compileren, maar bovenal raden we aan om dit gereedschap, ColorZilla Gradient, te gebruiken. Deze tool genereert eenvoudig alle nodige codes zodat de verlopen in alle browsers werken.
Laatste woorden
Vandaag hebben we heel wat besproken over het maken van verlopen, we hebben elk deel van de syntaxis bekeken, transparante effecten gecreëerd en browsercompatibiliteit gehandhaafd. Dus, op dit punt hopen we dat je al een beter begrip hebt over het onderwerp.
Er zijn nog veel dingen die we van plan zijn te verkennen CSS3 verlopen in onze toekomstige berichten, dus blijf op de hoogte van Hongkiat.com. Tot slot, bedankt voor het lezen van dit bericht, we hopen dat je het leuk vond.
Verder lezen
- Bullet Proof Cross Browser RGBA-achtergronden - Lea Verou
- CSS3-afbeelding - W3.org
- Wanneer kan ik CSS3 verlopen gebruiken - CanIUse.com
