Pannerdensch Kanaal en Waal bij splitsing Bijlands Kanaal
Pannerdensch Kanaal en Waal bij splitsing Bijlands Kanaal

CSS = Cascading Style Sheets - van Statische Opmaak naar Dynamische Effecten

Op linkedIn gepubliceerd op 23 mei 2018

Inleiding. Cascading Style Sheets oftewel CSS (huidige versie CSS3) is de opmaaktaal voor webpagina's in HTML. In CSS wordt de opmaakstijl van tekst en afbeeldingen gedefinieerd, zoals lettertype, lettergrootte/grootte afbeelding, letterkleur, vet, cursief, randen en zo voorts.

De opmaakcode staat in een extern bestand (stylesheet.css), óf in een interne stylesheet in de head-sectie van de webpagina (<style> body { color: white; } </style>), óf 'inline' binnen de begin-tag van het HTML-element (<div style="width: 50%;">...</div>).

Statisch. Traditioneel zijn de opmaakeigenschappen in CSS 'statisch' wat wil zeggen dat de tekst in een voor de bezoeker van de webpagina onveranderlijke opmaak wordt getoond. Met het kenmerk ':hover' kan de bezoeker met de muispijl over een tekst of afbeelding heen schuiven waardoor de opmaak verandert. Dit zou je een 'dynamische' eigenschap van CSS kunnen noemen.

Dynamisch. Inmiddels beschikt CSS over 'eigenschappen' die aan het HTML-element een transformatie ('transform:') en transitie ('transition:') toekennen als je met de muispijl het betreffende element aanraakt. Het HTML-element verandert niet zozeer qua stijlopmaak maar komt in beweging. Het wordt groter, draait, kantelt, vervormt etc. met 'transform', conform een bepaalde tijdsduur ('3s') en tijdscurve (langzame start met 'ease-in') met 'transition'.

2D en 3D transform. Hieronder staan voorbeelden met 2D 'transform: translate', 'transform: rotate', 'transform: scale', 'transform: skewX', 'transform: skewY' en 'transform: skew'; met 3D transform: 'transform: rotateX', 'transform: rotateY' en 'transform: rotateZ'.

Voorbeelden 2D en 3D met (:hover): transform: translate, transform: rotate, transform: scale, transform: skewX, transform: skewY, transform: skew, transform: rotateX, transform: rotateY, transform: rotateZ.

Auto-dynamisch met @keyframes. De 'CSS @keyframes Rule' biedt je de mogelijkheid om geautomatiseerd een beweging in gang te zetten zonder dat de bezoeker van de pagina de beweging hoeft te starten met ':hover'. Zo kun je aan een foto een aantal filters van sepia tot grijs toevoegen. Maar je kunt er ook een beeldframe mee creëren door meerdere foto's automatisch voorbij te laten komen.

Voorbeelden met @keyframes: transform: translate, transform: rotate, transform: scale, transform: rotateX, transform: rotateY, transform: rotateZ, filter: sepia & grayscale, opacity: 0 & 1 + background-image.

Bronnen: HTML Styles - CSS - W3C, CSS Tutorial - W3C, CSS filter Property - W3C, CSS @keyframes Rule - W3C, CSS Animations - W3C.

De geplaatste artikelen op LinkedIn zijn te vinden op mijn account: Joost van Meeteren | Developer & Designer bij ....

Voor een overzicht van de geplaatste artikelen op LinkedIn kun je ook terecht op de volgende pagina: LINKEDIN | Web Development and Web Design.

Joost van Meeteren, 23 mei 2018