Hoe maak je: schaduwrijke tekst

Leer hoe je schaduwrijke responsieve tekst maakt met CSS (ook wel gesneden tekst of tekstknippen genoemd).

Schaduwrijke tekst is een transparante tekst die eruitziet als hij is uitgesneden van een achtergrondafbeelding:

WUHAN

Try it yourself

Opmerking:Dit voorbeeld is niet geschikt voor Internet Explorer of Edge.

Hoe maak je schaduwrijke tekst

Stap 1 - Voeg HTML toe：

<div class="image-container">
  <div class="text">NATURE</div>
</div>

Stap 2 - Voeg CSS toe：

Met de mix-blend-mode eigenschap kan je schaduwrijke tekst toevoegen aan een afbeelding. Maar IE of Edge ondersteunt dit niet:

.image-container {
  background-image: url("img_nature.jpg"); /* Gebruikte afbeelding - erg belangrijk! */
  background-size: cover;
  position: relative; /* De gesneden tekst moet in het midden van het beeld worden geplaatst */
  height: 300px; /* Een bepaalde hoogte */
{}
.text {
  background-color: white;
  color: black;
  font-size: 10vw; /* Responsieve lettergrootte */
  font-weight: bold;
  margin: 0 auto; /* Centrerechtstreekse tekstcontainer */
  padding: 10px;
  width: 50%;
  text-align: center; /* Centrerechtstreekse tekst */
  position: absolute; /* Plaats de tekst */
  top: 50%; /* Plaats de tekst in het midden */
  left: 50%; /* Plaats de tekst in het midden */
  transform: translate(-50%, -50%); /* Plaats de tekst in het midden */
  mix-blend-mode: screen; /* Dit maakt het knippen van tekst mogelijk */
{}

Try it yourself

Als je een zwart container tekst wilt, wijzig dan mix-blend-mode wijzigen in vermenigvuldigen，zet de achtergrondkleur op zwart en de kleur op wit：

voorbeeld

.text {
  background-color: black;
  color: white;
  mix-blend-mode: multiply;
  ....
{}

Try it yourself