Giriş yap

CSS backdrop-filter Özelliği
CSS3

Adından da anlaşılacağı üzere, arkaplan görseline/fonuna filtre uygulamak için kullanılır. Filtreler sadece arakafon'a uygulanıyor, içerik alanı bu işlemlerden etkilenmez.

Yapısı (Syntax)backdrop-filter: blur() | brightness() | constrast() | grayscale() | hue-rotate() | opacity() | saturate() | sepia()

NOT
Şu an için sınırlı sayıda tarayıcı bu özelliği desteklemektedir. Ancak ileriye dönük kullanılması mutlak özellikler arasında yer almaktadır.
Varsayılan Değer none
JavaScript Yapısı object.style.backdropFilter = "blur(5px)"
Animasyon Özellikleri Uygulanabilir Evet

Değerler

Değer Açıklama Versiyon
blur(değer) Bulanıklığını ayarlar. CSS3
brightness(değer) Parlaklığını ayarlar. CSS3
contrast(değer) Kontrastını ayarlar. CSS3
grayscale(değer) Siyah-beyazlık tonunu ayarlar. CSS3
hue-rotate(değer) Renklerin birbiriyle karışımını ayarlar. CSS3
invert(değer) Renk derğerlerini tersine çevirir. CSS3
opacity(değer) Parlaklığı ayarlanır. CSS3
saturate(değer) Doygunluğunu ayarlar. CSS3
sepia(değer) Renk sıcaklığını ayarlar. CSS3

Örnekler

Örneğin resmin belli bir bölümüne filtre uygulayalım.

<div class="wrapper">
	<div class="filter-box">
		
	</div>
</div>

<style>
.wrapper {
	width: 400px;
	height: 200px;
	background: url(https://sample-videos.com/img/Sample-jpg-image-200kb.jpg) no-repeat center;
	background-size: cover;
}
.wrapper .filter-box {
	width: 100px;
	height: 100px;
	backdrop-filter: blur(2px) sepia(.4) invert(.3) hue-rotate(15deg) contrast(.7);
	float: right;
}
</style>

tayfunerbilen
49 gün önce eklendi.
Github'da Düzenle
Önemli Başlıklar