Het creëren van cross-browser Lineaire verlopen met CSS3
Lineaire verlopen
Het meest voorkomende type verloop dat u ziet, is een lineair verloop van twee kleuren. Dit betekent dat de helling in een rechte lijn zal bewegen en geleidelijk zal veranderen van de eerste kleur naar de tweede langs die lijn. De afbeelding op deze pagina toont een eenvoudig verloop van links naar rechts van # 999 (donkergrijs) in #fff (wit).
Lineaire verlopen zijn het gemakkelijkst te definiëren en hebben de meeste ondersteuning in browsers. CSS3 lineaire gradiënten worden ondersteund in Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+ en Safari 4+. Internet Explorer kan verlopen toevoegen met behulp van een filter en ondersteunt ze terug naar IE 5.5. Dit is geen CSS3, maar het is een optie voor compatibiliteit tussen browsers.
Wanneer u een verloop definieert, moet u verschillende dingen definiëren:
- Welk type verloop is het-
lineairofradiale - Waar de gradiënt zou moeten beginnen
- Waar de gradiënt zou moeten stoppen
- Welke kleuren zitten er in het verloop en waar moeten ze beginnen en stoppen?
Om lineaire gradiënten met CSS3 te definiëren, schrijft u:
lineaire gradiënt (hoek of zijkant of hoek, kleur stop, kleur stop)
- Eerst definieert u het type verloop met de naam
lineair -gradient. - Vervolgens definieert u de start- en stoppunten van het verloop op een van de twee manieren: de
hoekvan de lijn in graden van 0 tot 359, met 0 graden recht naar boven. Of met de "side or corner" -functie, zoalslinks,rechts,bodem, entop. Deze zullen in meer detail worden uitgelegd op de volgende pagina. Als u deze weglaat, vloeit het verloop van de bovenkant naar de onderkant van het element. - Vervolgens definieert u de kleurstops. U definieert de kleurstops met de kleurcode en een optioneel percentage. Het percentage vertelt de browser waar op de lijn wordt begonnen of eindigt met die kleur. De standaard is om de kleuren gelijkmatig over de lijn te plaatsen. U leest meer over kleurstops op pagina 3.
Dus, om het bovenstaande verloop met CSS3 te definiëren, schrijf je:
lineair verloop (links, # 999999 0%, #ffffff 100%);
En om het in te stellen als de achtergrond van a DIV jij schrijft:
div {achtergrondafbeelding: lineair verloop (links, # 999999 0%, #ffffff 100%;} Browser-extensies voor CSS3 lineaire hellingen
Om ervoor te zorgen dat uw verloop in verschillende browsers werkt, moet u browseruitbreidingen gebruiken voor de meeste browsers en een filter voor Internet Explorer 9 en lager (eigenlijk 2 filters). Al deze nemen dezelfde elementen om uw verloop te definiëren (behalve dat u alleen 2-kleurige gradiënten kunt definiëren in IE).
Microsoft-filters en -extensies-Internet Explorer is de meest uitdagende om te ondersteunen, omdat je drie verschillende lijnen nodig hebt om de verschillende browserversies te ondersteunen. Om het bovenstaande grijs naar witte verloop te krijgen, zou je schrijven:
/ * IE 5.5-7 * /filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);/ * IE 8-9 * /-ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1)";/ * IE 10 * /-ms-lineaire gradiënt (links, # 999999 0%, #ffffff 100%);
Mozilla-extensie-De -moz- extensie werkt als de CSS3-eigenschap, alleen met de -moz- uitbreiding. Om het bovenstaande verloop voor Firefox te krijgen, schrijft u:
-moz-linear-gradient (links, # 999999 0%, #ffffff 100%);
Opera-extensie-De -O- extensie voegt gradiënten toe aan Opera 11.1+. Om het bovenstaande verloop te krijgen, schrijf je:
-o-lineaire gradiënt (links, # 999999 0%, #ffffff 100%);
Webkit-extensie-De -webkit- extensie werkt veel op de CSS3-eigenschap. Om het bovenstaande verloop voor Safari 5.1+ of Chrome 10+ te definiëren, schrijft u:
-webkit-lineaire gradiënt (links, # 999999 0%, #ffffff 100%);
Er is ook een oudere versie van de Webkit-extensie die werkt met Chrome 2+ en Safari 4+. Daarin definieert u het type helling als een waarde, in plaats van in de eigenschapnaam. Om het grijs tot wit verloop te krijgen met deze extensie, schrijft u:
-webkit-gradiënt (lineair, linker bovenkant, rechter bovenkant, kleur-stop (0%, # 999999), kleur-stop (100%, # ffffff)); Volledige CSS3 Lineaire Gradient CSS-code
Voor volledige ondersteuning van meerdere browsers om het grijs-wit verloop erboven te krijgen, moet u eerst een fallback-effen kleur toevoegen voor browsers die geen gradiënten ondersteunen. Het laatste item moet de CSS3-stijl zijn voor browsers die volledig compatibel zijn. Dus je schrijft:
achtergrond: # 999999;achtergrond: -moz-linear-gradient (links, # 999999 0%, #ffffff 100%);achtergrond: -webkit-gradiënt (lineair, linkerbovenkant, rechtsboven, kleurstop (0%, # 999999), kleurstop (100%, # ffffff));achtergrond: -webkit-lineair verloop (links, # 999999 0%, #ffffff 100%);achtergrond: -o-lineaire gradiënt (links, # 999999 0%, #ffffff 100%);achtergrond: -ms-lineaire gradiënt (links, # 999999 0%, #ffffff 100%);filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);-ms-filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);achtergrond: lineair verloop (links, # 999999 0%, #ffffff 100%);
De volgende pagina's in deze zelfstudie leggen de delen van een verloop in meer detail uit en de laatste pagina wijst u naar een hulpmiddel dat een uitstekende manier is om CSS3-gradiënten automatisch te maken.
Zie deze lineaire gradiënt in actie met alleen CSS.
02 van 04Diagonale verlopen maken-De hoek van het verloop
De begin- en stoppunten bepalen de hoek van het verloop. De meeste lineaire gradiënten zijn van boven naar beneden of van links naar rechts. Maar het is mogelijk om een verloop te maken dat op een diagonale lijn beweegt. De afbeelding op deze pagina toont een eenvoudig verloop dat met een hoek van 45 graden over het beeld van rechts naar links beweegt.
Hoeken om de verlooplijn te definiëren
De hoek is een lijn op een denkbeeldige cirkel in het midden van het element. 0deg wijst omhoog, 90deg wijst naar rechts, 180 graden naar beneden wijst, en 270deg wijst naar links. U kunt elke hoek van 0 tot 359 graden definiëren.
Merk op dat in een vierkant een hoek van 45 graden van de linkerbovenhoek naar de rechterbenedenhoek beweegt, maar in een rechthoek liggen de begin- en eindpunten iets buiten de vorm, zoals u kunt zien in de afbeelding.
De meer gebruikelijke manier om een diagonale gradiënt te definiëren, is om een hoek te definiëren, zoals rechtsboven en het verloop gaat van die hoek naar de tegenoverliggende hoek. U kunt de startpositie definiëren met de volgende sleutelwoorden:
- top
- rechts
- bodem
- links
- centrum
En ze kunnen worden gecombineerd om meer specifiek te zijn, zoals:
- rechtsboven
- linksboven
- midden boven
- rechts onder
- linksonder
- middenonder
- rechts midden
- links midden
Hier is de CSS voor een verloop dat lijkt op het verloop afgebeeld, rood naar wit, bewegend van de rechterbovenhoek naar de linkeronderzijde:
achtergrond: ## 901A1C;achtergrondafbeelding: -moz-lineair verloop (rechtsboven, # 901A1C 0%, # FFFFFF 100%);achtergrondafbeelding: -webkit-gradiënt (lineair, rechtsboven, linksonder, kleur-stop (0, # 901A1C), kleur-stop (1, #FFFFFF));achtergrond: -webkit-lineair verloop (rechtsboven, # 901A1C 0%, #ffffff 100%);achtergrond: -o-lineaire gradiënt (rechtsboven, # 901A1C 0%, #ffffff 100%);achtergrond: -ms-lineair verloop (rechtsboven, # 901A1C 0%, #ffffff 100%);achtergrond: lineair verloop (rechtsboven, # 901A1C 0%, #ffffff 100%);
U hebt misschien gemerkt dat er in dit voorbeeld geen IE-filters zijn. Dat komt omdat IE slechts twee soorten filters toestaat: van boven naar beneden (standaard) en van links naar rechts (met de GradientType = 1 schakelaar).
Bekijk deze diagonale lineaire gradiënt in actie met alleen CSS.
03 of 04Kleur stopt
Met CSS3 lineaire gradiënten kunt u meerdere kleuren toevoegen aan uw verloop om nog mooiere effecten te creëren. Als u deze kleuren wilt toevoegen, voegt u extra kleuren toe aan het einde van uw property, gescheiden door komma's. U moet vermelden waar op de lijn de kleuren moeten beginnen of eindigen.
Internet Explorer-filters ondersteunen slechts twee kleurstops, dus als u dit verloop maakt, moet u alleen de eerste en tweede kleuren opnemen die u wilt weergeven.
Hier is de CSS voor de bovenstaande 3-kleuren gradiënt:
achtergrond: #ffffff;achtergrond: -moz-linear-gradient (links, #ffffff 0%, # 901A1C 51%, #ffffff 100%);achtergrond: -webkit-gradiënt (lineair, linker boven, recht boven, kleur-stop (0%, # ffffff), kleur-stop (51%, # 901A1C), kleur-stop (100%, # ffffff));achtergrond: -webkit-lineaire gradiënt (links, #ffffff 0%, # 901A1C 51%, # ffffff 100%);achtergrond: -o-lineaire gradiënt (links, #ffffff 0%, # 901A1C 51%, # ffffff 100%);achtergrond: -ms-lineaire gradiënt (links, #ffffff 0%, # 901A1C 51%, # ffffff 100%);filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);achtergrond: lineair verloop (links, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Zie dit lineaire verloop met drie kleurenstops in actie met alleen CSS.
04 van 04Maak bouwverlopen gemakkelijker
Er zijn twee sites die ik aanbeveel om je te helpen bij het bouwen van hellingen, ze hebben elk voor- en nadelen, ik heb geen gradiëntbouwer gevonden die alles al doet.
Ultieme CSS-verloopgeneratorDeze gradiëntgenerator is erg populair omdat het op een vergelijkbare manier werkt als gradiëntbouwers in programma's zoals Photoshop. Ik vind het ook leuk omdat het je alle CSS-extensies geeft, niet alleen Webkit en Mozilla. Het probleem met deze generator is dat deze alleen horizontale en verticale hellingen ondersteunt. Als u diagonale hellingen wilt doen, moet u naar de andere generator gaan die ik aanbeveel. CSS3 Gradient GeneratorDeze generator kostte me iets meer tijd om te begrijpen dan de eerste, maar het ondersteunt wel het veranderen van de richting naar een diagonaal. Als u een andere CSS Gradient Generator kent die u beter bevalt dan deze, laat het ons dan weten.
