CSS: Box Stijlen

Display

De display eigenschap bepaalt hoe een element zich gedraagt in de layout. Je kan met deze property de standaard block of inline waarde van een element aanpassen.

Block elementen

• Nemen de volledige breedte in beslag
• Beginnen op een nieuwe regel
• Voorbeelden van HTML block elementen: <div>, <p>, <h1>, <section>

.block-element {
  display: block;
}

Inline elementen

• Nemen alleen de benodigde ruimte in beslag
• Staan naast elkaar op dezelfde regel
• Width en height hebben geen effect
• Voorbeelden van HTML inline elementen: <span>, <a>, <strong>, <img>

.inline-element {
  display: inline;
}

Inline-block elementen

• Gedragen zich als inline, maar accepteren width/height
• Handig voor bepaalde layouts

.inline-block-element {
  display: inline-block;
  width: 100px;
  height: 50px;
}

None

.hidden {
  display: none; /* Element wordt niet getoond */
}

Width en Height

Basis afmetingen

.box {
  width: 10rem;
  height: 10rem;
}

Min en max afmetingen

.responsive-box {
  width: 100%;
  max-width: 50rem;
  min-width: 10rem;
  
  height: auto;
  min-height: 10rem;
  max-height: 30rem;
}

Padding

Padding is de ruimte tussen de content en de border van een element.

Individuele zijden

.padding-individual {
  padding-top: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
}

/* Kan ook in de logische notatie */
.padding-individual {
  padding-block-start: 1rem;
  padding-inline-start: 1rem;
  padding-block-end: 1rem;
  padding-inline-end: 1rem;
}

Gelijke zijden (logische notatie)

.padding-horizontal {
  padding-inline: 1rem; /* Links en rechts */
}

.padding-vertical {
  padding-block: 1rem; /* Boven en onder */
}

Shorthand notatie

/* Alle zijden gelijk */
.padding-all {
  padding: 1.25rem;/
}

/* Verticaal | Horizontaal */
.padding-vh {
  padding: 1rem 2rem;
}

/* Top | Horizontaal | Bottom */
.padding-thb {
  padding: 1rem 2rem 3rem;
}

/* Top | Right | Bottom | Left (klokwijze) */
.padding-trbl {
  padding: 1rem 2rem 1.25rem .5rem;
}

Margin

Margin is de ruimte rondom een element, buiten de border.

Basis gebruik

.margin-basic {
  margin-top: 1rem;
  margin-right: 2rem;
  margin-bottom: 1.25rem;
  margin-left: .5rem;

  /* Logische notatie */
  margin-block-start: 1rem;
  margin-inline-start: 2rem;
  margin-block-end: 1.25rem;
  margin-inline-end: .5rem;
  
  /* Shorthand - zelfde regels als padding */
  margin: 1rem 2rem 1.25rem .5rem;
}

Centreren van elementen

.center-horizontal {
  width: 50rem;
  margin: 0 auto; /* Horizontaal centreren */
}

.center-block {
  display: block;
  margin-inline: auto;
}

Border

Borders vormen de rand rondom een element.

Basis border eigenschappen

.border-basic {
  border-width: 1px;
  border-style: solid;
  border-color: hsl(0, 0%, 20%);
  
  /* Shorthand */
  border: 1px solid hsl(0, 0%, 20%);
}

Basic border

Border styles

.border-styles {
  border: 1px solid hsl(0, 0%, 0%); /* Doorgetrokken lijn */
  border: 1px dashed hsl(240, 100%, 50%); /* Streepjeslijn */
  border: 1px dotted hsl(0, 100%, 50%); /* Puntjeslijn */
  border: 2px double hsl(120, 100%, 25%); /* Dubbele lijn */
  border: 3px groove hsl(0, 0%, 50%); /* 3D groef effect */
  border: 3px ridge hsl(0, 0%, 50%); /* 3D verhoogd effect */
  border: 3px inset hsl(0, 0%, 50%); /* 3D ingedrukt effect */
  border: 3px outset hsl(0, 0%, 50%); /* 3D uitstekend effect */
}

Solid border

Dashed border

Dotted border

Double border

Groove border

Ridge border

Inset border

Outset border

Individuele borders

.border-individual {
  border-top: 1px solid hsl(0, 100%, 50%);
  border-right: 1px dashed hsl(240, 100%, 50%);
  border-bottom: 1px dotted hsl(120, 100%, 25%);
  border-left: 1px double hsl(270, 100%, 50%);
}

Border radius (afgeronde hoeken)

.border-radius {
  border: 1px solid hsl(0, 0%, 20%);
  border-radius: 1rem; 
  
  /* Individuele hoeken */
  border-top-left-radius: 1rem;
  border-top-right-radius: 2rem;
  border-bottom-right-radius: 3rem;
  border-bottom-left-radius: 4rem;
  
  /* Shorthand: top-left | top-right | bottom-right | bottom-left */
  border-radius: 1rem 2rem 3rem 4rem;
  
  /* Cirkel */
  border-radius: 50%;
}

Gelijke border radius

Ongelijke border radius

Cirkel

Background

Background Color

Basis kleuren

.bg-color {
  background-color: hsl(0, 100%, 50%); /* Rood */
  background-color: hsla(0, 100%, 50%, 0.5); /* Rood met 50% transparantie */
}

Achtergrond kleur

Achtergrond kleur met transparantie

Transparantie

.transparent-bg {
  background-color: transparent; /* Volledig transparant */
}

Background Image

Basis background images

.bg-image {
  background-image: url('path/to/image.jpg');
  
  /* Meerdere achtergronden */
  background-image: url('path/to/overlay.png'), url('path/to/background.jpg');
}

Background eigenschappen

.bg-properties {
  background-image: url('image.jpg');
  background-repeat: no-repeat; /* repeat | repeat-x | repeat-y */
  background-position: center center; /* left | center | right + top | center | bottom */
  background-size: cover; /* contain | cover | 6.25rem 12.5rem | 50% */
  background-attachment: fixed; /* scroll | fixed | local */
}

Background shorthand

.bg-shorthand {
  /* color | image | repeat | attachment | position */
  background: hsl(0, 0%, 100%) url('bg.jpg') no-repeat fixed center;
}

Gradients

Linear gradients

.linear-gradient {
  /* Basis gradient */
  background: linear-gradient(to right, hsl(0, 100%, 50%), hsl(240, 100%, 50%));
  background: linear-gradient(45deg, hsl(0, 100%, 50%), hsl(240, 100%, 50%));
  
  /* Meerdere stops */
  background: linear-gradient(to bottom, hsl(0, 100%, 50%) 0%, hsl(60, 100%, 50%) 50%, hsl(240, 100%, 50%) 100%);
  
  /* Hoeken */
  background: linear-gradient(to top right, hsl(0, 100%, 50%), hsl(240, 100%, 50%));
  background: linear-gradient(135deg, hsl(225, 73%, 57%) 0%, hsl(267, 47%, 56%) 100%);
}

Linear gradient

Radial gradients

.radial-gradient {
  /* Basis radial gradient */
  background: radial-gradient(circle, hsl(0, 100%, 50%), hsl(240, 100%, 50%));
  background: radial-gradient(ellipse, hsl(0, 100%, 50%), hsl(240, 100%, 50%));
  
  /* Met positie */
  background: radial-gradient(circle at center, hsl(0, 100%, 50%), hsl(240, 100%, 50%));
  background: radial-gradient(ellipse at top left, hsl(0, 100%, 50%), hsl(240, 100%, 50%));
  
  /* Met grootte */
  background: radial-gradient(circle 6.25rem, hsl(0, 100%, 50%), hsl(240, 100%, 50%));
  background: radial-gradient(ellipse 12.5rem 6.25rem, hsl(0, 100%, 50%), hsl(240, 100%, 50%));
}

Radial gradient

Conic gradients

.conic-gradient {
  background: conic-gradient(hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(240, 100%, 50%), hsl(0, 100%, 50%));
  background: conic-gradient(from 45deg, hsl(0, 100%, 50%), hsl(240, 100%, 50%));
  background: conic-gradient(at 25% 75%, hsl(0, 100%, 50%), hsl(240, 100%, 50%), hsl(120, 100%, 50%));
}

Conic gradient