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.

 

 

 


Andere blogartikelen

  • Waarom developers het zo leuk vinden bij ons

    Geschreven door: op woensdag 13 november 2019

    Bij ons op kantoor werkt een team van betrokken specialisten, waaronder 4 backend developers en 4 UX developers. Zij zorgen voor een belangrijk fundament binnen dit bedrijf. Een goede reden om te zorg ...

    Bekijk het artikel »
  • Beachvolleyballen voor het goede doel!

    Geschreven door: op vrijdag 25 oktober 2019

    Afgelopen vrijdag 11 oktober  hebben diverse betrokken specialisten uit ons team de handen ineen geslagen met een van onze opdrachtgevers. Samen met De Monchy International B.V. hebben we meegeda ...

    Bekijk het artikel »
  • Het gebruik van een Photoslider

    Geschreven door: op maandag 7 oktober 2019

    Ze zijn er in alle soorten en maten en staan meestal bovenaan een websitepagina. Dan heb ik het natuurlijk over photosliders. Zo bent u vast bekend met de traditionele foto die langzaam vervaagd en wa ...

    Bekijk het artikel »
Bel 072 5345 888
Onze Middelen en Technologieën
microsoft silver partner
Adobe partner
fd-gazellen-2018.jpg
Google analytics
partners-logo.jpg
Op de hoogte blijven?

Meld u aan voor de gratis nieuwsbrief om op de hoogte te blijven van onze activiteiten