Kesib olingan matn
CSS yordamida moslashuvchan kesib olingan (cutout/knockout) matn yaratishni o‘rganing.
Kesib olingan matn (cutout yoki knockout text) — fon rasmi ustida go‘yo kesib olingandek ko‘rinadigan shaffof matn:
NATURE
Eslatma: Bu misol Internet Explorer yoki Edge’da ishlamaydi.
Kesib olingan matn qanday yaratiladi
1-qadam) HTML qo‘shing:
Misol
<div class="image-container">
<div class="text">NATURE</div>
</div>
2-qadam) CSS qo‘shing:
mix-blend-mode xususiyati rasmga kesib olingan matn qo‘shish imkonini beradi. Biroq u IE yoki Edge’da qo‘llab-quvvatlanmaydi:
Misol
.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 */
}
O‘zingiz sinab ko‘ring »
Agar qora konteynerli matn kerak bo‘lsa, mix-blend-mode qiymatini "multiply"ga, background-color’ni qora rangga, color’ni esa oq rangga o‘zgartiring:
Misol
.text {
background-color: black;
color: white;
mix-blend-mode: multiply;
....
}
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!