CSS Filtre Efektleri ile Görüntü Ayarlama

Görüntü ayarlama Parlaklık ve Kontrast, veya görüntüyü Gri tonlama veya Sephia Gibi görüntü düzenleme uygulamasında bulabileceğiniz ortak bir özelliktir. Photoshop. Ancak, aynı efektleri CSS kullanarak web görüntülerine eklemek artık mümkün.

Bu yetenek, aslında hala Çalışma Taslağı aşamasında olan Filtre Efektlerinden gelir. Ancak, Webkit tarayıcısı bu özelliğin uygulanmasında bir adım gibi görünüyor.

Öyleyse bir deneyelim ve bu görüntüyü Mehdi Kh'in etkilerini göstermek için kullanacağız..

Efektler

Etkileri uygulamak çok kolaydır. Görüntüleri dönüştürmek için aşağıdaki pasaja bir göz atın gri tonlama;

 img -webkit-filter: gri tonlamalı (% 100);  

… Ve bunun için sepya ala Instagram.

 img -webkit-filter: sepya (% 100);  

İkisi de sepya ve gri tonlama değerler yüzde olarak belirtilir 100% maksimum ve uygulanan 0% görüntünün değişmemesini sağlar, ancak değer açıkça belirtilmediğinde 100% varsayılan olarak alınacak.

Resmin parlatılması da mümkündür ve bunu kullanarak da yapabiliriz. parlaklık aşağıdaki gibi işlev;

 img -webkit-filter: parlaklık (% 50);  

Parlaklık efekti yukarıdaki değerin üzerindeki kontrast ve sepya efekti gibi çalışır. 0% görüntüyü olduğu gibi tutacak ve uygulayacak 100% görüntüyü tamamen aydınlatacaktır; bu, görüntü yerine yalnızca boş bir beyaz sayfa gösterecektir..

Ayrıca parlaklık etkisi negatif değerlere izin verir, içinde olacak görüntüyü karartmak.

 img -webkit-filter: parlaklık (-50%);  

… Ve görüntü kontrastını bu şekilde ayarlayabiliriz..

 img -webkit-filter: kontrast (% 200);  

Değerin nasıl çalıştığı konusunda yukarıda da gördüğünüz gibi küçük bir fark var. kontrast() tarafından % 200, bunun nedeni değer 100% Resmin değişmeden kalacağı başlangıç ​​noktasıdır. Değer düşük olduğunda 100%, % 50 diyelim, görüntü daha az kontrast olur.

Ayrıca, efekti, aşağıdaki örnekte olduğu gibi bir bildirim bloğunda da birleştirebiliriz. Resmi dönüştürürüz gri tonlama ve artırmak kontrast aynı anda% 50.

 img -webkit-filter: gri tonlamalı (% 100) kontrast (% 150);  

Filtreyi CSS3 geçişi ile birleştirerek zarif bir hale getirebiliriz. duraksamak Efekt.

 img: hover -webkit-filter: gri tonlamalı (% 0);  img: hover -webkit-filter: sepya (% 0);  img: hover -webkit-filter: parlaklık (% 0);  img: hover - web-filtresi: kontrast (% 100);  

Son olarak, deneyebileceğimiz bir etki daha var; Gauss Bulanıklığı, hedeflenen elemanı bulanıklaştıracak.

 img: hover -webkit-filter: blur (5px);  

Photoshop'ta olduğu gibi, bulanıklık değeri piksel yarıçapında belirtilir ve değer açıkça belirtilmezse, 0 varsayılan olarak alınır ve görüntü olduğu gibi kalır.

Son düşünce

Spesifikasyonda aslında çok daha fazla etki var. gibi renk döndür, evirmek ve bombalamak, ama gerçek Web durumlarda daha az uygulandıklarını düşünüyorum. Böylece, tartışma sadece dört etki ile sınırlıydı.

Ve bu eğitimdeki resimlere tartışmanın uygulanmasına rağmen, özellik aslında DOM içindeki herhangi bir öğeye de uygulanabilir..

Son olarak, canlı demosu aşağıdaki linklerden görüntüleyebilirsiniz. Lütfen, Filtrenin şu anda yalnızca desteklendiğini unutmayın. Chrome 19 ve yukarıda.

• gösteri
• Kaynak İndir