CSS Basis

Selectors

Geavanceerd

< >

CSS Afbeeldingen stijlen

In dit hoofdstuk leer je hoe je afbeeldingen kunt stijlen.

Afbeeldingen met afgeronde hoeken

Met het toevoegen van afgeronde hoeken aan afbeeldingen kan je ze een aantrekkelijkere uitstraling geven. Door gebruik te maken van de eigenschap border-radius kun je afgeronde hoeken aan afbeeldingen toevoegen.

Voorbeeld:

    img {
  border-radius: 10px;
}

Uitproberen

Voorbeeld:

    img {
  border-radius: 50%;
}

Uitproberen

Miniatuur afbeeldingen

Door de eigenschap border te gebruiken kun je miniatuur-afbeeldingen ook wel genoemd thumbnails maken. Hieronder zie je twee afbeeldingen waarvan er één een normale en de ander een klikbare thumbnails is.

Thumbnail

Voorbeeld:

    img {
  border: 1px solid #ddd;
}

Uitproberen

Thumbnail als link

Voorbeeld:

    img {
  border: 1px solid #ddd;
}

Uitproberen

Responsive afbeeldingen

Responsive afbeeldingen worden automatisch aangepast aan de grootte van het scherm.

Verklein het browservenster om het effect te zien:

mountain

Als je een afbeelding wilt verkleinen bij het aanpassen van het scherm, maar nooit wilt opschalen zodat het groter wordt dan de oorspronkelijke formaat, voeg je het volgende CSS code toe.

Voorbeeld:

img {
  max-width: 100%;
  height: auto;
}

Uitproberen

CSS afbeelding centreren

Om een afbeelding te centreren, moet je de linker en rechter margin instellen op auto en zorg je ervoor dat je de afbeelding in een block element plaatst zoals het voorbeeld hieronder:

bos

Voorbeeld:

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

Uitproberen

Afbeelding als kaart weergeven

Amsterdam

Istanbul

Voorbeeld:

div.kaart {
  width: 80%;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
}

img { width: 100%; }

div.tekst {
  text-align: center;
  padding: 10px 20px;
}

Uitproberen

Transparante afbeeldingen

Je kunt transparante afbeeldingen maken met behulp van de eigenschap opacity. De eigenschap opacity kan een waarde van 0.0 - 1.0 nemen. Hoe lager de waarde, hoe transparanter dat het element wordt.

opacity 0.2

opacity 0.5

opacity 1
(standaard)

Voorbeeld:

img {
  opacity: 0.5;
}

Uitproberen

Tekst over een afbeelding

Voorbeeld hoe je tekst over een afbeelding plaatst:

Tekst over een afbeelding:

Linksboven

Linksonder

Rechtsboven

Rechtsonder

Gecentreerd

Linksboven Rechtsboven Linksonder Rechtsonder Gecentreerd

CSS afbeeldings-filters

De CSS filter eigenschap voegt visuele effecten toe aan een element.

Voorbeeld:

img {
  filter: brightness(100%);
}

Uitproberen

De filter eigenschap wordt niet ondersteund in Internet Explorer of in Edge 12.

CSS afbeelding omdraaien

Beweeg de muis over de onderstaande afbeelding:

City

Voorbeeld:

img:hover {
  transform: scaleX(-1);
}

Uitproberen

CSS responsive galerij

CSS kan worden gebruikt om afbeeldings-galerijen te maken. In dit voorbeeld worden media query's gebruikt om de afbeeldingen op verschillende scherm formaten opnieuw te rangschikken.

Pas het formaat van het browservenster aan om het effect te zien:

Ananas

Kersen

Peren

Sinaasappels

Voorbeeld:

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px){
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px){
  .responsive {
    width: 100%;
  }
}

Uitproberen

Vorige Volgende

	Ad blocker gedetecteerd!
	Ons website heeft gedetecteerd dat u een Ad blocker gebruikt. Codecenter.nl is gratis, wij blijven overeind door het weergeven van advertenties en u kunt ons daarbij helpen. Het wordt aanbevolen om uw Ad blocker uit te schakelen zodat u verder gebruik kunt maken van codecenter.nl, alvast bedankt.