✨ Achtergronden & effecten

background: kleur en afbeelding

.element {
  /* Kleur */
  background-color: #1e293b;
  background-color: rgba(0, 0, 0, 0.5); /* semi-transparant */

  /* Afbeelding */
  background-image: url('foto.jpg');
  background-size: cover;      /* vul het element, kan bijsnijden */
  background-size: contain;    /* pas volledig in, kan witruimte laten */
  background-size: 100% 100%;  /* rek uit */
  background-position: center center; /* standaard */
  background-position: top left;
  background-repeat: no-repeat; /* standaard herhaalt het */
  background-repeat: repeat;

  /* Shorthand (volgorde: image position/size repeat color) */
  background: url('foto.jpg') center/cover no-repeat #1e293b;

  /* Afbeelding scrolt mee of staat vast */
  background-attachment: scroll; /* standaard */
  background-attachment: fixed;  /* parallax-effect */
}

Gradiënten

Gradiënten zijn technisch gezien afbeeldingen — je gebruikt ze als background-image.

/* Lineair: richting + kleuren */
background-image: linear-gradient(to right, #3b82f6, #8b5cf6);
background-image: linear-gradient(135deg, #06b6d4, #3b82f6);
background-image: linear-gradient(to bottom, #fff, transparent);

/* Met tussenstops */
background-image: linear-gradient(to right, #f59e0b, #ef4444 50%, #8b5cf6);

/* Radiaal (vanuit een punt) */
background-image: radial-gradient(circle, #3b82f6, #1e1b4b);
background-image: radial-gradient(ellipse at top, #06b6d4 0%, transparent 70%);

/* Conic (als een taartdiagram) */
background-image: conic-gradient(from 0deg, #f59e0b, #ef4444, #3b82f6, #f59e0b);

border-radius & box-shadow

border-radius: 8px;           /* alle hoeken gelijk */
border-radius: 8px 0 8px 0;  /* boven-links rechts-onder / boven-rechts links-onder */
border-radius: 50%;           /* perfecte cirkel (als width = height) */
border-radius: 9999px;        /* pill-vorm (altijd volledig rond) */

/* Individueel */
border-top-left-radius: 16px;
border-bottom-right-radius: 4px;

/* x-offset  y-offset  blur  spread  kleur */
box-shadow: 0 2px 4px rgba(0,0,0,0.1);         /* subtiel */
box-shadow: 0 10px 30px rgba(0,0,0,0.2);        /* medium */
box-shadow: 0 25px 50px -12px rgba(0,0,0,0.4); /* groot, negatieve spread */

/* Gekleurde schaduw */
box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);

/* Inset-schaduw (binnen het element) */
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);

/* Meerdere schaduwen */
box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 10px 30px rgba(0,0,0,0.15);

opacity & filter

opacity: 1;    /* volledig zichtbaar (standaard) */
opacity: 0.5;  /* 50% transparant */
opacity: 0;    /* volledig onzichtbaar (maar neemt nog ruimte in!) */

filter: blur(4px);
filter: brightness(1.2);      /* 120% helderder */
filter: contrast(1.5);
filter: grayscale(100%);      /* zwart-wit */
filter: saturate(2);          /* extra verzadigd */
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));

/* Combineren */
filter: brightness(0.8) saturate(1.5);

Meerdere achtergronden & text-shadow

.hero {
  background-image:
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url('foto.jpg');
  background-size: cover;
  background-position: center;
  /* Overlay + foto = tekst leesbaar op foto */
}

/* x  y  blur  kleur */
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
text-shadow: 0 0 20px #2dd4bf;   /* glow-effect */
text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; /* outline */

Oefening 1 – Hero-sectie met gradient overlay

Maak een hero-sectie met gradient, schaduw en border-radius:
• body: margin 0, font-family sans-serif, background #0f172a
• .hero: background-image linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #0f4c75 100%), min-height 200px, display flex, flex-direction column, align-items center, justify-content center, padding 40px 24px, border-radius 16px, margin 20px, box-shadow 0 20px 60px rgba(0,0,0,0.4)
• .hero h1: color wit, font-size 2rem, margin 0 0 12px, text-align center, text-shadow 0 2px 8px rgba(0,0,0,0.3)
• .hero p: color rgba(255,255,255,0.7), margin 0, text-align center, font-size 1rem

<div class="hero">
  <h1>Welkom bij mbo-sd</h1>
  <p>Gratis lessen voor MBO
  software developers.</p>
</div>

Oefening 2 – Kaart met schaduw en effecten

Maak een productkaart met afgeronde hoeken, schaduw en een gekleurde badge:
• body: margin 0, padding 32px, background #f1f5f9, font-family sans-serif
• .kaart: background wit, border-radius 20px, padding 24px, box-shadow 0 4px 6px rgba(0,0,0,0.05) 0 10px 30px rgba(0,0,0,0.1), max-width 320px
• .kaart-header: background linear-gradient(135deg, #2dd4bf, #3b82f6), border-radius 12px, height 120px, margin-bottom 16px
• .badge: display inline-block, background linear-gradient(to right, #2dd4bf, #3b82f6), color wit, font-size 11px, font-weight 700, padding 3px 10px, border-radius 20px, margin-bottom 8px
• h3: margin 4px 0 8px, color #0f172a
• p: margin 0, color #64748b, font-size 14px, line-height 1.5

<div class="kaart">
  <div class="kaart-header"></div>
  <span class="badge">Nieuw</span>
  <h3>CSS-track</h3>
  <p>Leer CSS van scratch
  in 12 lessen.</p>
</div>

Quiz