Content Marketing
CSS3-functies waarvan u zich misschien niet bewust bent: Flexbox, rasterlay-outs, aangepaste eigenschappen, overgangen, animaties en meerdere achtergronden
Trapsgewijze stijlbladen (CSS) blijven evolueren en de nieuwste versies hebben mogelijk enkele functies waarvan u zich misschien niet eens bewust bent. Hier zijn enkele van de belangrijkste verbeteringen en methodologieën die met CSS3 zijn geïntroduceerd, samen met codevoorbeelden:
- Flexibele doosindeling (Flexbox): een lay-outmodus waarmee u flexibele en responsieve lay-outs voor webpagina's kunt maken. Met flexbox kun je eenvoudig elementen binnen een container uitlijnen en verdelen. In dit voorbeeld, de
.container
klasse gebruiktdisplay: flex
om de lay-outmodus van de flexbox in te schakelen. Dejustify-content
eigenschap is ingesteld opcenter
om het onderliggende element horizontaal in de container te centreren. Dealign-items
eigenschap is ingesteld opcenter
om het onderliggende element verticaal te centreren. De.item
klasse stelt de achtergrondkleur en opvulling in voor het onderliggende element.
HTML
<div class="container">
<div class="item">Centered Element</div>
</div>
CSS
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.item {
background-color: #ddd;
padding: 20px;
}
Resultaat
Gecentreerd element
- Rasterindeling: een andere lay-outmodus waarmee u complexe op rasters gebaseerde lay-outs voor webpagina's kunt maken. Met raster kunt u rijen en kolommen specificeren en vervolgens elementen in specifieke cellen van het raster plaatsen. In dit voorbeeld is de
.grid-container
klasse gebruiktdisplay: grid
om de rasterlay-outmodus in te schakelen. Degrid-template-columns
eigenschap is ingesteld oprepeat(2, 1fr)
om twee kolommen van gelijke breedte te maken. Degap
eigenschap stelt de afstand tussen rastercellen in. De.grid-item
klasse stelt de achtergrondkleur en opvulling in voor de rasteritems.
HTML
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
</div>
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.grid-item {
background-color: #ddd;
padding: 20px;
}
Resultaat
Item 1
Item 2
Item 3
Item 4
- overgangen: CSS3 introduceerde een aantal nieuwe eigenschappen en technieken voor het maken van overgangen op webpagina's. Bijvoorbeeld de
transition
eigenschap kan worden gebruikt om veranderingen in CSS-eigenschappen in de loop van de tijd te animeren. In dit voorbeeld is de.box
klasse stelt de breedte, hoogte en initiële achtergrondkleur voor het element in. Detransition
eigenschap is ingesteld opbackground-color 0.5s ease
om wijzigingen in de achtergrondkleureigenschap gedurende een halve seconde te animeren met een gemakkelijke timingfunctie. De.box:hover
class verandert de achtergrondkleur van het element wanneer de muisaanwijzer erop staat, waardoor de overgangsanimatie wordt geactiveerd.
HTML
<div class="box"></div>
CSS
.box {
width: 100px;
height: 100px;
background-color: red;
transition: background-color 0.5s ease;
}
.box:hover {
background-color: blue;
}
Resultaat
Zweven
Hier!
Hier!
- Vermaak: CSS3 introduceerde een aantal nieuwe eigenschappen en technieken voor het maken van animaties op webpagina's. In dit voorbeeld hebben we een animatie toegevoegd met behulp van de
animation
eigendom. We hebben een gedefinieerd@keyframes
regel voor de animatie, die aangeeft dat de doos gedurende 0 seconden van 90 graden naar 0.5 graden moet draaien. Wanneer er met de muis over het vak wordt bewogen, wordt hetspin
animatie wordt toegepast om de doos te roteren. Deanimation-fill-mode
eigenschap is ingesteld opforwards
om ervoor te zorgen dat de uiteindelijke staat van de animatie behouden blijft nadat deze is voltooid.
HTML
<div class="rotate"></div>
CSS
.rotate {
width: 100px;
height: 100px;
background-color: red;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
/* Add animation properties */
animation-duration: 0.5s;
animation-timing-function: ease;
animation-fill-mode: forwards;
}
/* Define the animation */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(90deg); }
}
.rotate:hover {
animation-name: spin;
}
Resultaat
Zweven
Hier!
Hier!
- Aangepaste CSS-eigenschappen: Ook gekend als CSS-variabelen, zijn aangepaste eigenschappen geïntroduceerd in CSS3. Hiermee kunt u uw eigen aangepaste eigenschappen in CSS definiëren en gebruiken, die kunnen worden gebruikt om waarden in uw stylesheets op te slaan en opnieuw te gebruiken. CSS-variabelen worden geïdentificeerd door een naam die begint met twee streepjes, zoals
--my-variable
. In dit voorbeeld definiëren we een CSS-variabele genaamd –primary-color en geven deze de waarde van#007bff
, een blauwe kleur die in veel ontwerpen vaak als primaire kleur wordt gebruikt. We hebben deze variabele gebruikt om debackground-color
eigenschap van een knopelement, met behulp van devar()
functie en het doorgeven van de naam van de variabele. Hierdoor wordt de waarde van de variabele gebruikt als achtergrondkleur voor de knop.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- Meerdere achtergronden: Met CSS3 kunt u meerdere achtergrondafbeeldingen voor een element specificeren, met de mogelijkheid om de positionering en stapelvolgorde te bepalen. De achtergrond bestaat uit twee afbeeldingen,
red.png
enblue.png
, die worden geladen met behulp van debackground-image
eigendom. Het eerste beeld,red.png
, bevindt zich in de rechterbenedenhoek van het element, terwijl de tweede afbeelding,blue.png
, bevindt zich in de linkerbovenhoek van het element. Debackground-position
eigenschap wordt gebruikt om de positionering van elke afbeelding te regelen. Debackground-repeat
eigenschap wordt gebruikt om te bepalen hoe de afbeeldingen worden herhaald. Het eerste beeld,red.png
, is ingesteld op niet herhalen (no-repeat
), terwijl de tweede afbeelding,blue.png
, is ingesteld op herhalen (repeat
).
HTML
<div id="multibackground"></div>
CSS
#multibackground {
background-image: url(red.png), url(blue.png);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
height: 200px;
width: 200px;
}