Bu yazımızda Css’te Filter özelliği nedir?, Nasıl kullanabiliriz? onu öğreneceğiz. Filter özelliği ile bir Html etiketi üzerinde photoshop benzeri efektleri (bulanıklaştırma, parlaklık, şeffaflık vb..) uygulayabiliriz. Bu özellik daha çok resimlerde kullanılır.
Efektler için şu değerleri kullanabiliyoruz;
► none : Varsayılan değerdir. Herhangi bir efekt uygulanmaz.
► blur : Resmin bulanıklığını ayarlar.
► brightness : Resmin parlaklığını ayarlar.
► contrast : Resmin kontrastını ayarlar.
► drop-shadow : Resme gölge efekti verir.
► grayscale : Resmi siyah beyaz yapar.
► hue-rotate : Resme bir ton döndürme efekti verir.
► invert : Resmin terse çevrilmesini sağlar.
► opacity : Resme şeffaflık verir.
► sepia : Resme kahverengi tonlarında bir efekt uygular.
Örneklerimiz için bir elma resmini kullanalım ve tüm değerleri bu resim üzerinde uygulayalım. Değerler üzerinde değişiklikler yaparak daha iyi anlayabilirsiniz.
Önemli Filter özelliğini kullanırken birden fazla değer vermek isterseniz, değerler arasına boşluk bırakarak yazabilirsiniz.
Html ve Css kodlarımız şu şekilde,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
<style> div { width: 240px; text-align: center; } h3 { color: cornflowerblue; } #blur { filter: blur(5px); } #brightness { filter: brightness(200%); } #contrast { filter: contrast(200%); } #drop-shadow { filter: drop-shadow(8px 8px 10px gray); } #grayscale { filter: grayscale(100%); } #hue-rotate { filter: hue-rotate(90deg); } #invert { filter: invert(100%); } #opacity { filter: opacity(30%); } #saturate { filter: saturate(800%); } #sepia { filter: sepia(100%); } #multi { filter: contrast(200%) brightness(150%); } </style> <div> <h3>Orjinal Resim</h3> <img src="" /> <h3>filter: blur(5px);</h3> <img id="blur" src="" /> <h3>filter: brightness(200%);</h3> <img id="brightness" src="" /> <h3>filter: contrast(200%);</h3> <img id="contrast" src="" /> <h3>filter: drop-shadow(8px 8px 10px gray);</h3> <img id="drop-shadow" src="" /> <h3>filter: grayscale(100%);</h3> <img id="grayscale" src="" /> <h3>filter: hue-rotate(90deg);</h3> <img id="hue-rotate" src="" /> <h3>filter: invert(100%);</h3> <img id="invert" src="" /> <h3>filter: opacity(30%);</h3> <img id="opacity" src="" /> <h3>filter: saturate(800%);</h3> <img id="saturate" src="" /> <h3>filter: sepia(100%);</h3> <img id="sepia" src="" /> <h3>filter: contrast(200%) brightness(150%);</h3> <img id="multi" src="" /> </div> |
Efektlerin uygulanmış hali şu şekilde,
CSS FİLTER ÖZELLİĞİ TARAYICI DESTEĞİ
| Özellik | Chrome | IE | Firefox | Safari | Opera |
| filter |
53.0 18.0 -webkit- |
13.0 | 35.0 |
9.1 6.0 -webkit- |
40.0 15.0 -webkit- |
Bu resimde tarayıcıların filter özelliğini hangi versiyon ile birlikte sorunsuz desteklemeye başladığını görebilirsiniz.
Tarayıcı uyumluluğu ile ilgili daha kapsamlı ve güncel bilgi almak isterseniz caniuse sitesini ziyaret edebilirsiniz.
Önemli Bu özellikleri eski tarayıcılarda da sorunsuz bir şekilde kullanmak istiyorsanız, ön eklerle birlikte kullanmalısınız.
Örneğin blur ve brighness değerlerini -webkit- ön eki ile birlikte kullanalım.
|
1 2 3 4 5 6 7 |
-webkit-filter: blur(5px); filter: blur(5px); -webkit-filter: brightness(200%); filter: brightness(200%); |
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
