CSS filtreleri photoshop’a benzer filtreleri HTML elemanlarına uygulamamızı sağlıyor. Tek satır CSS kodu ile bu efektleri verebilmek çok hoş. CSS gittikçe web’in görselliğini tek başına karşılayacak bir yöne doğru gidiyor. Bu filtreler genelde resimler, ardalan resimleri ve kenar çizgilerine uygulanmaktadır.
Not: İnternet Explorer eski sürümleri standart olmayan filtre desteğini sunuyor.
Yapısı: filter: <filter-function> [<filter-function>]* | none
Aldığı Değerler: grayscale | blur | sepia | saturate | opacity | brightness | contrast | hue-rotate | invert
Başlangıç Değeri: none
Uygulanabilen Elementler: Grafikler ve kapsayıcı elementler
Kalıtsallık: yok
Sayfa yüklenmeden önce filtre elemana uygulanır ve sonra sayfaya yüklenir. Biz filtre eklediğimizde orjinal resme bu efekt sayfa taranmadan önce uygulanır.
Hasan Şama(@hasansama)’nın çektiği fotoğraf üzerinde efektleri deneyelim. - Resmin ana fikri kabuklar wall-e’nin etrafını sarmış. -
Siyah-Beyaz (GRAYSCALE) Efekti
Tanımlana resmi siyah-beyaz hale getirir.
Tek satır kod ile bunu yapabilmek süper bir şey. 100% değer tam filtreleme yaparken 0% değeri ise filtre’sız halini veriyor.
hue-rotate(Renk Tekeri)
Hue(renk) renk çemberinde 0 ile 360 arasındaki renklere karşılık gelir. 0 kırmızı, 120 yeşil ve 240 mavidir. http://www.colorschemedesigner.com/ Sitesindeki tekerdeki her açı için farklı renkler mevcuttur. Verdiğimiz her değer renk tekerinde bir renge karşılık geliyor.
Örnekler tanımlardan daha açıklayıcı oluyor. 240 mavi tonlarını öne çıkarır.
Kahverengi ağırlıklı Filtre (Sepia)
Sepia filtresi kahverengi tonları önce çıkaran antik görünümlü resimler oluşturmamızı sağlar.
Kontrast (Contrast)
Resmin kontrast değeri ile oynarız. 0% değeri resmi siyah yaparken 100% değer resmin orjinalini verir.
Televizyondaki kontrasta alışık olanların seveceği bir filtre.
Bulanıklaştırmak(Blur)
Resmimize bulanıklaştırmak için kullanılabileceğimiz bir filtredir.
Uygulanan bulanıklaştırmanın yarıçap değeri olarak belirlenen değerdir. Yüksek değerlerler resmi daha bulanık yapacaktır.
Ters Çevirmek (Invert)
Resmin görüntüsünün terse çevrilmesini sağlar. Verilen değer resmin ne kadar terse çevrileceğini belirler. 100% değeri resmi tamamen çevirir.
100% değeri resmi fotoğraf negatifi görünümü kazandırıyor.
Saydamlık (opacity)
Resimlerin saydamlığını ayarlamak için uygulanan filtredir.
CSS’deki opacity ile çakışan bir özellik. Bunun daha hızlı çalıştığı yazıyor.
Parlaklık (brightness)
Yine televizyondan alışık olduğumuz parlaklık filtresi.
Gölge(drop-shadow)
box-shadow’a benzer parametreleri var.
CSS’de zaten box-shadow vardı niye buna ihtiyaç var derseniz. Örnekteki saydam içeriği olan alanların gölgeyi etkilediğini dikkatinize sunarım.
Çoklu Filtre Kullanımı
Aralarında boşluk bırakarak birden fazla filtre kullanabiliyoruz. İşte burada tasarımcılardan sağlam rol çalıyoruz. :D Artık bizimde resim işleme aracımız var.
Resmi siyah beyaz yapıp, ayrıca kontrastını düşürerek baskı görünümü verebiliyoruz. Tabi geniş kullanım olanakları olan bir alan gerisi sizin tasarım görüşünüze kalmış.
Tarayıcı Desteği
 |
 |
 |
|---|---|---|
| 18+ (-webkit) | desteklemiyor | 35+ |
Mobil Tarayıcılar
 |
 |
|
|---|---|---|
| 4.4 (-webkit) | 6.0 (-webkit) | 35.0 (-webkit) |
Kaynaklar
- http://www.html5rocks.com/en/tutorials/filters/understanding-css/
- html5-demos.appspot.com/static/css/filters/index.html
- http://caniuse.com/#feat=css-filters
- https://developer.mozilla.org/en-US/docs/Web/CSS/filter
- http://net.tutsplus.com/tutorials/html-css-techniques/say-hello-to-css3-filters/
- http://www.hongkiat.com/blog/css-filter/
- http://blog.teamtreehouse.com/css-filter-effects
- http://davidwalsh.name/css-filters