CSS’də transparent Text effekti yaratmaq

Bəzi qrafik dizayn səhifələrinə girdiyimizdə orada cool şəkildə arxa fonu şəkil olan yazılar görürü. Onları CSSda düzəltmək olduqca sadədir. Gəlin birlikdə bir nümunə yaradaq.

Ilk öncə HTML quruluşuna baxaq. Bizə bir Text-container klaslı div və h1 elementi lazımdır.

<div class=”text-container”>
 <h1>SIMURATLI</h1>
 </div>

Burada əsas propertini divə tətbiq edəcəyik ona görə onun içərisində istənilən h1-h2….-h6 və ya p elementlərini istifadə edə bilərik.

İndi body və HTML elementlərinə propertyləri tətbiq edək .

Body elementinə height:100vh verərək onu tam ekran edirik və ona bir background-image təyin edirik.

body{
 height: 100vh;
 background-image: url(testimg.jpg);
 background-size: cover;
 background-position: center;
 }

Daha sonra isə Text elementin containerinə əsas propertimizi yəni

mix-blend-mode: multiply;

propertisini veririk.

QEYD ❗️ : Unutmamaq lazımdırki biz həmdə bu containerə background color təyin etməliyikki textimiz görünsün.

.text-container{
 background-color: rgba(0,0,0,0.8);
 text-align: center;
 mix-blend-mode: multiply;
}

H1 elementinə isə son olaraq istədiyimiz coloru veririk məsələn

h1{
 color: white
 }

Və beləliklə artıq Textimiz hazırdır.