CSS3: Nieuwe mogelijkheden om je site er mooier uit te laten zien

Geschreven door: op woensdag 13 mei 2015

Leestijd:

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:

css3-koptekst-1

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);

}

css3-linear-gradient

 

 

Radial gradient

CSS:

article{

       color: #ffffff;

       background: radial-gradient(#7ac142, #ffffff);

}

css3-radial-gradient

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.

 

 

 


Op De Hoogte Blijven?

Online Succes realiseren is een vak, een vak wat wij verstaan en waarover we je graag vertellen. Schrijf je in voor onze maandelijkse nieuwsbrief en blijf op de hoogte van trends, thema’s en succesverhalen.

Aanhef

Andere blogartikelen

Bel 072 5345 888
Meer dan 40 bedrijven vertrouwen op ons
allrig.jpg
aliancys.jpg
eriks.jpg
heinen_en_hopman.jpg
handicare_stairlifts.jpg
Onze Middelen en Technologieën
Microsoft partner
Adobe partner
Asp dotnet
Google analytics
Google adwords
TelefoonE-mail