Video: een site in HTML5 en CSS3 stap 0: het resultaat 2024
Overstapjes zijn overal een favoriet effect van grafische ontwerpers omdat verlopen een vloeiende overgang van kleur creëren. Het toevoegen van verlopen aan de achtergrond van een webpagina of aan secties binnen een pagina voegt rijkdom en diepte toe aan een ontwerp.
In de afbeelding ziet u het verschil tussen een radiale en een lineaire gradiënt.
In eerdere versies van CSS moest je een afbeelding gebruiken als je een verloop op de achtergrond van een element wilde gebruiken, zoals een tag. Als je slim was, heb je een afbeelding gemaakt met een breedte van 1 pixel die net zo hoog was als je het verloop wilde hebben en deze vervolgens als achtergrond hebt ingevoegd, zodat deze herhaald werd om de ruimte te vullen. Als u een achtergrondafbeelding goed hebt ontworpen, kan de bestandsgrootte van de afbeelding klein zijn, maar de beperkingen veel.
U moet bijvoorbeeld het verloop maken dat groter of groter is dan de ruimte die u wilt vullen, waardoor u minder flexibel kunt ontwerpen. Evenzo was het matchen van een tweede achtergrondafbeelding achter het verloop, als een ontwerp dit type afbeelding had, geen eenvoudige taak. Kortom, het toevoegen van gradiënten aan pagina-ontwerpen was mogelijk, maar ook een echt gedoe.
Voer CSS 3 in en ontwerpers kunnen overal de nieuwe verloopopties vieren om al die oude problemen in één keer op te lossen. Verlopen gegenereerd met CSS 3 downloaden sneller en passen zich automatisch aan om de ruimte perfect te vullen.
CSS 3-gradiënten kunnen lineair of radiaal zijn en u kunt verschillende kleurbanden toepassen op verschillende afstanden langs het continuüm. Al met al kunnen CSS 3-gradiënten worden gebruikt in de meeste situaties waarin een ontwerper er een wil gebruiken en een aanzienlijke verbetering is voor CSS.
Wanneer u een verloop aan een achtergrond toevoegt - of het nu de achtergrond van de gehele pagina is of een element binnen een pagina, zoals een tag - past het verloop zich automatisch aan om de volledige spatie te vullen, tenzij u een formaat opgeeft. Verlopen kunnen ook worden gebruikt in de rand van elementen en om het midden van een opsommingsteken in een ongeordende lijst te vullen.
Hier is de eenvoudigste syntaxis voor het maken van een lineair verloop in CSS 3 voor WebKit-browsers:
-webkit-gradient (lineair, van (), tot ());
Radiale verlopen worden op deze manier gemaakt:
-webkit-gradient (radiaal, [] *);
Hier zijn twee voorbeelden van verlopen die worden gebruikt als achtergrondafbeelding:
-
De volgende code maakt een lineair verloop met twee kleuren:
achtergrondafbeelding: -webkit-gradiënt (lineair, linksonder, linksboven, kleur -stop (0, 32, #FFFFFF), kleurstop (0, 66, # 245FAB));
-
Dit codevoorbeeld maakt een radiaal verloop met meerdere kleuren:
achtergrond: -webkit-radiale-gradiënt (radiaal, midden midden, 0, midden midden, 70).5, van (groen), tot (geel));
Hier volgt de code die wordt gebruikt om het verloop in de achtergrondgebieden van het lichaam, de koppen en de zijkanten op de Jelly Rancher-website in de afbeelding te maken.
hoofdletter {background-image: -webkit-gradient (lineair, linkerbovenkant, linkeronderkant, kleurstop (0, blauw), kleurstop (.25, # 98fc45), kleurstop (1, transparant));}
In het voorbeeld ziet u dat er een lineair verloop is gemaakt dat begint bovenaan en naar beneden beweegt. U kunt het verloop variëren door het in de linkerbovenhoek te beginnen en te eindigen in de rechteronderhoek, die het verloop langs een diagonaal pad zou vormen. Er zijn ook verschillende kleurstops in het voorbeeld, die elk een kleur langs het verloop weergeven. Het verloopvoorbeeld verloopt als volgt:
-
Begin met de kleur blauw: kleurstop (0, blauw).
-
Verander in de hexadecimale kleur # 98fc45 bij 25 procent: color-stop (. 25, # 98fc45).
-
Dan wordt # 98fc45 transparant door de rest van het verloop tot de achtergrond volledig transparant is: kleurstop (1, transparant).
