Nasıl Yapılır - Metin Kesme
CSS ile duyarlı bir kesme/nakavt metni oluşturmayı öğrenin.
Kesik metin (veya dışlanmış metin), arka plan görüntüsünün üzerinde kesilmiş olarak görünen, içi görülebilen bir metindir:
DOĞA
Not: Bu örnek, Internet Explorer veya Edge'de çalışmaz.
Kesik Metin Nasıl Oluşturulur
Adım 1) HTML'yi ekleyin:
Örnek
<div class="image-container">
<div class="text">NATURE</div>
</div>
Adım 2) CSS'yi ekleyin:
Özellik mix-blend-mode
, görüntüye kesme metni eklemeyi mümkün kılar. Ancak, IE veya Edge'de desteklenmez:
Örnek
.image-container {
background-image: url("img_nature.jpg");
/* The image used - important! */
background-size: cover;
position: relative; /* Needed to position
the cutout text in the middle of the image */
height: 300px; /* Some
height */
}
.text {
background-color: white;
color: black;
font-size: 10vw;
/* Responsive font size */
font-weight: bold;
margin: 0 auto; /* Center the text container */
padding: 10px;
width: 50%;
text-align: center; /* Center text */
position: absolute; /* Position text */
top: 50%; /* Position text in the middle */
left: 50%; /* Position
text in the middle */
transform: translate(-50%, -50%); /* Position text in the middle */
mix-blend-mode: screen;
/* This makes the cutout text possible */
}
Siyah bir kap metni istiyorsanız, karma karışım modunu "çarpma" ve arka plan rengini siyah ve rengi beyaz olarak değiştirin:
Örnek
.text {
background-color: black;
color: white;
mix-blend-mode:
multiply;
....
}