Snelle tip CSS3-verlopen begrijpen

Het maken van een afbeelding alleen met het doel een verloop weer te geven, is niet flexibel en wordt al snel een slechte gewoonte. Helaas zijn ze op het moment van schrijven waarschijnlijk nog steeds vereist, maar hopelijk niet veel langer. Dankzij Firefox en Safari / Chrome kunnen we nu met minimale inspanningen krachtige verlopen maken. In deze snelle video-tip onderzoeken we enkele verschillen in syntaxis bij het werken met de prefixen -moz en -webkit vendor.

Abonneer u op onze YouTube-pagina om alle videozelfstudies te bekijken!

Webkit

Hoewel Mozilla en Webkit over het algemeen dezelfde syntaxis gebruiken voor CSS3-eigenschappen, zijn ze het helaas niet helemaal eens als het gaat om verlopen. Webkit was de eerste die gradiënten omarmde, en gebruikt de volgende structuur:

 / * Syntaxis, overgenomen van: http://webkit.org/blog/175/introducing-css-gradients/ * / -webkit-gradient (,  [, ]?,  [, ]? [, ] *) / * In de praktijk ... * / achtergrond: -webkit-gradiënt (lineair, 0 0, 0 100%, van (rood), tot (blauw));

Maak je geen zorgen als je ogen de syntaxis verdoezelen; de mijne ook! Merk op dat we een door komma's gescheiden lijst met parameters nodig hebben.

Welk type verloop? (lineair)
X- en Y-ascoördinaten van waar te beginnen. (0 0 - of linkerbovenhoek)
X- en Y-ascoördinaten van waar te concluderen (0 100% - of linker benedenhoek)
Welke kleur om mee te beginnen? (Uit (rood))
Welke kleur moet worden geconcludeerd? (Tot en met (blauw))

Mozilla

Firefox, dat ondersteuning voor gradiënten implementeerde met versie 3.6, geeft de voorkeur aan een iets andere syntaxis.

 / * Syntaxis, overgenomen van: http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/ * / -moz-linear-gradient ([ || ,]? ,  [, ] *) / * In de praktijk * / achtergrond: -moz-lineair verloop (boven, rood, blauw);

Merk op hoe we het type verloop, lineair, binnen de vendor-extensie hebben geplaatst.
Waar zou de gradiënt moeten beginnen? (top - we kunnen ook in graden doorlopen, zoals in -45deg)
Welke kleur om mee te beginnen? (rood)
Welke kleur moet worden geconcludeerd? (blauw)

Color-Stops

Wat als u geen gradiënt van 100% van de ene kleur naar de andere nodig hebt? Dit is waar kleurstops in het spel komen. Een gebruikelijke ontwerptechniek is om een korte en subtiele gradiënt toe te passen, zoals deze:

Let op het subtiele gebroken wit tot wit verloop bovenaan.

In het verleden bestond de standaardimplementatie erin een afbeelding te maken, deze in te stellen als de achtergrond van een element en deze horizontaal te laten herhalen. Met CSS3 is dit echter een makkie.

 achtergrond: wit; / * terugval voor oudere / niet-ondersteunde browsers * / achtergrond: -moz-linear-gradient (top, #dedede, white 8%); achtergrond: -webkit-gradiënt (lineair, 0 0, 0 8%, van (#dedede), tot (wit)); border-top: 1px effen wit;

Deze keer stellen we de gradiënt in op 8%, in plaats van 100%, wat de standaard is. Merk op dat we ook een rand bovenaan toepassen om contrast toe te voegen; dit is heel gebruikelijk.

Als we een derde (of Nth) kleur willen toevoegen, kunnen we het volgende doen:

 achtergrond: wit; / * terugval voor oudere / niet-ondersteunde browsers * / achtergrond: -moz-lineair verloop (boven, #edede, wit 8%, rood 20%); achtergrond: -webkit-gradiënt (lineair, 0 0, 0 100%, van (#dedede), kleur-stop (8%, wit), kleur-stop (20%, rood);

Met de -moz-versie, geven we aan dat we bij 20% van de hoogte van het element nu de kleur rood moeten hebben.
Voor -webkit gebruiken we color-stop en geven we twee parameters door: waar moet de stop plaatsvinden en wat de kleur moet zijn.

Belangrijke opmerkingen over CSS-gradiënten

Gebruik ze zo veel als je kunt. Als het goed is IE-gebruikers een effen kleur te laten zien, raad ik u aan deze methode te gebruiken.
IE6 / 7/8, Opera, Safari 3 en Firefox 3 kunnen CSS3-gradiënten niet renderen. Firefox- en Safari-gebruikers upgraden meestal vaak, dus dat is niet zo belangrijk.
Gebruik altijd een standaard, effen kleur, achtergrond voor browsers die de prefixen van de verkoper niet begrijpen.
Gebruik nooit een rood naar blauw verloop, zoals ik deed voor de voorbeelden.
Webpagina's hoeven niet in elke browser hetzelfde te zijn! :)

Bedankt voor het lezen / kijken!

Code