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 gebruikt display: flex om de lay-outmodus van de flexbox in te schakelen. De justify-content eigenschap is ingesteld op center om het onderliggende element horizontaal in de container te centreren. De align-items eigenschap is ingesteld op center 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 gebruikt display: grid om de rasterlay-outmodus in te schakelen. De grid-template-columns eigenschap is ingesteld op repeat(2, 1fr) om twee kolommen van gelijke breedte te maken. De gap 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. De transition eigenschap is ingesteld op background-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!
  • 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 het spin animatie wordt toegepast om de doos te roteren. De animation-fill-mode eigenschap is ingesteld op forwards 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!
  • 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 de background-color eigenschap van een knopelement, met behulp van de var() 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 en blue.png, die worden geladen met behulp van de background-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. De background-position eigenschap wordt gebruikt om de positionering van elke afbeelding te regelen. De background-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;
    }

    Resultaat

    Douglas Karr

    Douglas Karr is CMO van INZICHTEN openen en de oprichter van de Martech Zone. Douglas heeft tientallen succesvolle MarTech-startups geholpen, heeft geholpen bij het due diligence-onderzoek van meer dan $ 5 miljard aan Martech-overnames en -investeringen, en blijft bedrijven helpen bij het implementeren en automatiseren van hun verkoop- en marketingstrategieën. Douglas is een internationaal erkend expert en spreker op het gebied van digitale transformatie en MarTech. Douglas is ook een gepubliceerde auteur van een Dummie's-gids en een boek over zakelijk leiderschap.

    Gerelateerde artikelen

    Terug naar boven knop
    Sluiten

    Adblock gedetecteerd

    Martech Zone kan u deze inhoud gratis aanbieden omdat we inkomsten genereren met onze site via advertentie-inkomsten, gelieerde links en sponsoring. We zouden het op prijs stellen als u uw adblocker zou verwijderen terwijl u onze site bekijkt.