backdrop-filter ගුුණය

backdrop-filter ගුණය පෙරහන් (අස්පෘශ්‍ය කිරීම, විරුද්ධතාව වෙනස් කිරීම, වර්ණ බලපෑම්) මූලද්‍රව්‍යයක් පිටුපස පිහිටා ඇති ප්‍රදේශයට යෙදීමට ඉඩ සලසයි. මෙය "කඩදාසි" හෝ "හිම පතුරුවන ලද කඩදාසි" බලපෑමක් නිර්මාණය කරයි.

වාග් රීතිය

cssතේරීම {
  backdrop-filter: none | <පෙරහන> [<පෙරහන>]*;
}

අගයන්

පෙරහන් කිහිපයක් එකට භාවිතා කළ හැකිය, ඒවා හිස්තැන් වලින් ලැයිස්තුගත කරයි.

උදාහරණය . සරල අස්පෘශ්‍ය කිරීම

පසුබිම අස්පෘශ්‍ය කිරීමේ මූලික බලපෑම:

html<div class="blur-example">
  <div class="blur-box">
    Backdrop blur effect
  </div>
</div>

css.blur-example {
  background: linear-gradient(135deg, #667eea, #764ba2);
  padding: 40px;
  height: 200px;
}

.blur-box {
  backdrop-filter: blur(6px);
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 20px;
  width: 80%;
  margin: 0 auto;
  text-align: center;
  color: white;
  font-size: 22px;
}

Результат:

උදාහරණය . උණුසුම් ආලෝක පෙරහන

වැඩි කරන ලද දීප්තිය සහිත උණුසුම් ආලෝක බලපෑම:

html<div class="warm-light-bg">
  <div class="warm-light">
    Warm lighting effect
  </div>
</div>

css.warm-light-bg {
  background: url('bg.png');
  background-size: cover;
  padding: 50px;
  height: 250px;
}

.warm-light {
  backdrop-filter: brightness(1.2) hue-rotate(20deg);
  background-color: rgba(255, 235, 205, 0.3);
  padding: 25px;
  width: 70%;
  margin: 20px auto;
  text-align: center;
  color: #333;
  font-size: 24px;
}

Результат:

උදාහරණය . gradiyent වේසිය සමඟ අස්පෘශ්‍ය කිරීම

අස්පෘශ්‍ය කිරීම සහ අර්ධ පාරදෘෂ්‍ය gradiyent එකතු කිරීම:

html<div class="gradient-mask">
  <div class="mask-content">
    Gradient mask effect
  </div>
</div>

css.gradient-mask {
  background: url('bg.png') center/cover;
  padding: 50px;
  height: 300px;
}

.mask-content {
  backdrop-filter: blur(10px);
  background: linear-gradient(to right, rgba(255,255,255,0.3), rgba(255,255,255,0));
  padding: 30px;
  width: 80%;
  margin: 0 auto;
}

Результат:

උදාහරණය . පැරණි සිනමා බලපෑම

Sepia සහ graininess එකතු කිරීම:

html<div class="old-film">
  <div class="film-effect">
    Old film effect
  </div>
</div>

css.old-film {
  background: url('bg.png') center/cover;
  padding: 40px;
  height: 250px;
}

.film-effect {
  backdrop-filter: sepia(80%) contrast(110%) brightness(90%);
  background-color: rgba(0,0,0,0.1);
  padding: 25px;
  width: 70%;
  margin: 20px auto;
}

Результат:

උදාහරණය . සීතල නිල් පෙරහන

සීතල ආලෝක බලපෑම:

html<div class="cold-bg">
  <div class="cold-effect">
    Cool blue filter
  </div>
</div>

css.cold-bg {
  background: url('bg.png') center/cover;
  padding: 50px;
  height: 300px;
}

.cold-effect {
  backdrop-filter: hue-rotate(180deg) brightness(85%);
  background-color: rgba(200,230,255,0.2);
  padding: 30px;
  width: 75%;
  margin: 0 auto;
}

Результат:

උදාහරණය . ඉහළ විරුද්ධතාව

වැඩි කරන ලද විරුද්ධතාව බලපෑම:

html<div class="contrast-bg">
  <div class="contrast-effect">
    High contrast
  </div>
</div>

css.contrast-bg {
  background: url('bg.png') center/cover;
  padding: 40px;
  height: 250px;
}

.contrast-effect {
  backdrop-filter: contrast(200%) brightness(90%);
  background-color: rgba(0,0,0,0.1);
  padding: 25px;
  width: 70%;
  margin: 20px auto;
}

Результат:

උදාහරණය . ජල වර්ණ බලපෑම

වැඩි කරන ලද තෙත් බව සහිත මෘදු අස්පෘශ්‍ය කිරීම:

html<div class="watercolor-bg">
  <div class="watercolor-effect">
    Watercolor effect
  </div>
</div>

css.watercolor-bg {
  background: url('bg.png') center/cover;
  padding: 50px;
  height: 300px;
}

.watercolor-effect {
  backdrop-filter: blur(12px) saturate(200%);
  background-color: rgba(255,255,255,0.15);
  padding: 30px;
  width: 80%;
  margin: 0 auto;
}

Результат:

උදාහරණය . පසුබිම මත සෙවනැල්ල

පසුබිම් රූපය මත සෙවනැලි බලපෑම:

html<div class="shadow-bg">
  <div class="shadow-effect">
    Drop shadow effect
  </div>
</div>

css.shadow-bg {
  background: url('bg.png') center/cover;
  padding: 40px;
  height: 250px;
}

.shadow-effect {
  backdrop-filter: drop-shadow(4px 4px 10px rgba(0,0,0,0.5));
  background-color: rgba(255,255,255,0.2);
  padding: 25px;
  width: 70%;
  margin: 20px auto;
}

Результат:

උදාහරණය . සම්පූර්ණ ආපසු හැරවීම

පසුබිමේ වර්ණ සම්පූර්ණයෙන් ආපසු හැරවීම:

html<div class="invert-bg">
  <div class="invert-effect">
    Full inversion
  </div>
</div>

css.invert-bg {
  background: url('bg.png') center/cover;
  padding: 50px;
  height: 300px;
}

.invert-effect {
  backdrop-filter: invert(100%);
  background-color: rgba(0,0,0,0.1);
  padding: 30px;
  width: 80%;
  margin: 0 auto;
}

Результат:

උදාහරණය . අඳුරු කිරීමේ බලපෑම

පාඨය කියවීමේ හැකියාව සංරක්ෂණය කරමින් පසුබිම අඳුරු කිරීම:

html<div class="darken-bg">
  <div class="darken-effect">
    Darkened background
  </div>
</div>

css.darken-bg {
  background: url('bg.png') center/cover;
  padding: 50px;
  height: 300px;
}

.darken-effect {
  backdrop-filter: brightness(40%);
  background-color: rgba(0,0,0,0.3);
  color: white;
  padding: 30px;
  width: 80%;
  margin: 0 auto;
}

Результат:

උදාහරණය . වර්ණ ඉවත් කිරීමේ බලපෑම

පසුබිම සම්පූර්ණයෙන් වර්ණ ඉවත් කිරීම:

html<div class="grayscale-bg">
  <div class="grayscale-effect">
    Grayscale filter
  </div>
</div>

css.grayscale-bg {
  background: url('bg.png') center/cover;
  padding: 50px;
  height: 300px;
}

.grayscale-effect {
  backdrop-filter: grayscale(100%);
  background-color: rgba(255,255,255,0.2);
  padding: 30px;
  width: 80%;
  margin: 0 auto;
}

Результат:

උදාහරණය . වැඩි කරන ලද තෙත් බව බලපෑම

පසුබිමේ වර්ණ ප්‍රබල කිරීම:

html<div class="saturate-bg">
  <div class="saturate-effect">
    Super saturated colors
  </div>
</div>

css.saturate-bg {
  background: url('bg.png') center/cover;
  padding: 50px;
  height: 300px;
}

.saturate-effect {
  backdrop-filter: saturate(300%);
  background-color: rgba(255,255,255,0.1);
  padding: 30px;
  width: 80%;
  margin: 0 auto;
}

Результат:

උදාහරණය . ඒකාබද්ධ කලාත්මක බලපෑම

කලාත්මක බලපෑමක් සඳහා පෙරහන් කිහිපයක් එකතු කිරීම:

html<div class="artistic-bg">
  <div class="artistic-effect">
    Artistic combination
  </div>
</div>

css.artistic-bg {
  background: url('bg.png') center/cover;
  padding: 50px;
  height: 300px;
}

.artistic-effect {
  backdrop-filter: blur(3px) hue-rotate(90deg) saturate(150%) contrast(120%);
  background-color: rgba(255,255,255,0.15);
  padding: 30px;
  width: 80%;
  margin: 0 auto;
  color: white;
  text-shadow: 0 0 5px black;
}

Результат:

උදාහරණය . අර්ධ පාරදෘෂ්‍යතා බලපෑම

පසුබිමේ පාරදෘෂ්‍යතාව නියාමනය කිරීම:

html<div class="opacity-bg">
  <div class="opacity-effect">
    Opacity control
  </div>
</div>

css.opacity-bg {
  background: url('bg.png') center/cover;
  padding: 50px;
  height: 300px;
}

.opacity-effect {
  backdrop-filter: opacity(50%);
  background-color: rgba(0,0,0,0.3);
  color: white;
  padding: 30px;
  width: 80%;
  margin: 0 auto;
}

Результат:

බ්‍රවුසර ආධාරය

ගුණය නවීන බොහෝ බ්‍රවුසර වලට ආධාර කරයි, නමුත් සම්පූර්ණ cross-browser ගැළපුම සඳහා -webkit- උපසර්ගය අවශ්‍ය විය හැකිය.

මෙයද බලන්න