CSS3: Nieuwe mogelijkheden om je site er mooier uit te laten zien
Websites bestaan uit gestructureerde informatie (HTML), interactie (JavaScript) en opmaak (CSS). In het begin van het web bestonden paginaâs alleen uit HTML, waarna later (client-side) interactie en opmaak werden toegevoegd. De structuur van de pagina dient om de informatie weer te geven, het liefst op een manier dat de site goed gevonden wordt (zoekmachineoptimalisatie of SEO). Met interactieve scripts kan je ervoor zorgen dat de bezoeker gemakkelijker gebruik kan maken van de mogelijkheden van de website of webshop. De opmaak zorgt ten slotte voor een plezierig ogende site waar de bezoeker langer blijft of vaker zal komen.
CSS staat voor cascading stylesheets, wat inhoudt dat stijlregels door elementen worden overgeĂ«rfd. De eerste versie van CSS bood al veel mogelijkheden om de site op te maken en CSS2 voegde meer toe. Sinds enkele jaren bestaat CSS3 en steeds meer âalle moderne- browsers en devices ondersteunen vrijwel alle onderdelen ervan. Met CSS3 kan je gemakkelijk en snel Ă©Ă©nmalig stijlregels maken die cross-browser, cross-device en cross-resolution (responsive) zijn, waardoor je eenvoudig voor al je doelgroepen de opmaak van de site kan aanpassen en onderhouden.
CSS bestaat uit een aantal onderdelen, waarvan de belangrijkste zijn: selectors, waarmee je aangeeft op welke elementen een bepaalde stijlregel van toepassing is, style rules, de daadwerkelijke stijlregels. Hieronder zullen een aantal nieuwe mogelijkheden van CSS worden beschreven; de selectors komen in een ander blogitem aan bod.
Gradients
Gegeven de volgende HTML en CSS:
HTML:
<!doctype html>
<head>
<title>Mijn site</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<article>
<header>
<h1>Koptekst</h1>
</header>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nisl mauris, rhoncus nec egestas et, rhoncus et nunc. Nullam semper iaculis tempus. Praesent dapibus purus sit amet dolor aliquam rutrum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas est ante, efficitur id ipsum eget, euismod auctor magna. Suspendisse et rutrum diam. Etiam gravida ligula euismod massa pharetra, non viverra lectus volutpat. Fusce non felis cursus, imperdiet ipsum luctus, vehicula leo. Etiam dictum neque sapien, ut rhoncus arcu condimentum eget. Sed felis nunc, vehicula at nunc a, tincidunt ultricies metus. Suspendisse sit amet blandit quam. Praesent metus lacus, pharetra in nisi eget, faucibus convallis lectus. Fusce tristique est augue, quis vulputate eros dictum sed. Sed a lacus in eros aliquet aliquet eu sed lorem.
</p>
</article>
</body>
CSS:
article{
color: #ffffff;
background-color: #7ac142;
}
In de browser ziet dat er zo uit:
Om een verloop aan te brengen in de achtergrond, werden vroeger vaak 1 pixel brede achtergrondafbeeldingen gebruikt. Als de hoogte van het blok veranderde of de kleur moest aangepast worden, dan was het nodig een afbeelding te maken. Dit proces neemt veel tijd in beslag en de kans is groot dat voor verschillende apparaten, verschillende afbeeldingen nodig zijn.
CSS3 lost dat op met gradients. Er zijn twee vormen: linear-gradient en radial-gradient. Een lineair verloop gaat van Ă©Ă©n kant naar de andere, terwijl een radiaal verloop een middelpunt heeft. Er zijn verschillende opties, zie Using CSS Gradients.
Linear gradient
CSS:
article{
color: #ffffff;
background: linear-gradient(to bottom, #7ac142, #ffffff);
}
Radial gradient
CSS:
article{
color: #ffffff;
background: radial-gradient(#7ac142, #ffffff);
}
Deze opmaak wordt door alle moderne browers en devices geaccepteerd, zodat maar Ă©Ă©n versie hoeft worden onderhouden. Dit versnelt het ontwikkelproces van een website.
Andere mogelijkheden
Naast verlopen zijn er nog veel meer stijlregels die je kan toepassen, bijvoorbeeld shadows, animations, transitions, transforms, borders en meer.
Browser-specifieke prefixes
Hoewel CSS3 tegenwoordig goed ondersteund wordt, hebben sommige browsers toch nog hun eigenaardigheden. Vaak wordt dan een bepaalde prefix verwacht voor stijlen, zoals âo-, voor Opera, of âms- voor Internet Explorer. Dit is iets om goed op te letten. Zie bijvoorbeeld Cross-browser gradients voor een lijst met browser-specifieke prefixes voor de linear-gradient.
