Nasıl Oluşturulur: Delikli Metin

CSS kullanarak duyarlı delikli metin nasıl oluşturulur (kesilmiş metin veya kesik metin olarak da bilinir).

Delikli metin, arka plan görseli üzerinde kesilmiş gibi görünen şeffaf metindir:

WUHAN

Kendi kendine deneyin

Dikkat:Bu örnek Internet Explorer veya Edge için geçerli değildir.

Delikli metin nasıl oluşturulur

İlk Adım - HTML Ekle:

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

İkinci Adım - CSS Ekle:

mix-blend-mode özelliği, delikli metni görselere eklemek için kullanılabilir. Ancak IE veya Edge tarafından desteklenmez:

.image-container {
  background-image: url("img_nature.jpg"); /* Kullanılan görsel - çok önemlidir! */
  background-size: cover;
  position: relative; /* Kesilmiş metni resmin ortasında konumlandırmak gerekir */
  height: 300px; /* Belirli bir yükseklik */
}
.text {
  background-color: beyaz;
  color: siyah;
  font-size: 10vw; /* Duyarlı yazı boyutu */
  font-weight: bold;
  margin: 0 auto; /* Metin konteynerini ortalar */
  padding: 10px;
  width: 50%;
  text-align: center; /* Metni ortalar */
  position: absolute; /* Metni konumlandırır */
  top: 50%; /* Metni ortaya konumlandırır */
  left: 50%; /* Metni ortaya konumlandırır */
  transform: translate(-50%, -50%); /* Metni ortaya konumlandırır */
  mix-blend-mode: screen; /* Bu, metni kesmeyi mümkün kılar */
}

Kendi kendine deneyin

Siyah konteyner metni istiyorsanız, mix-blend-mode değiştirin çarpanarka plan rengini siyaha, rengi beyaza değiştirin:

örnek

.text {
  background-color: siyah;
  color: beyaz;
  mix-blend-mode: çarpma;
  ....
}

Kendi kendine deneyin