Fotoğraflar üzerinde değişiklik yapmak ve efektler ile onları daha güzel hale getirmeye çalışmak çoğumuzun içinde bir tutkudur. Uyguladığımız farklı efektler ile fotoğraflarda bazı noktaları daha ön plana getirirken daha güzel görünümler elde edebiliyoruz. Photoshop kullanarak veya Instagram gibi farklı uygulamalar üzerinden uygulayabildiğimiz bu basit efekleri aslında CSS ile iki satır kod ekleyerek yapmamız da mümkün. Bugün CSS içerisinde yer alan background-blend-mode özelliğini kullanarak fotoğraflara CSS ile filtreler uygulamayı kısaca ele alacağız.
CSS background-blend-mode özelliği için öncelikle bir background resmi ve rengi seçmemiz gerekmektedir. Sonrasında uygulayacağımız blend özelliği için seçeceğimiz renk oldukça önem taşımaktadır.
Bugün bu modların iyi anlaşılabilmesi için fotoğraf olarak New York şehrinden güzel bir fotoğraf seçmeye çalıştım ve renk olarak da gün batımı tonlarına yakın bir turuncu rengi tercih ettim. Ancak her farklı fotoğraf ve efekt için bir kaç denemeden sonra sizlerin de en uygun hallerini bulacağınıza inanıyorum.
Öncelikle size CSS blend özelliği ile fotoğraflara filtre uygulamanız için gereken kodları vererek anlatıma başlayalım, her özellik için teker teker ele almaktansa daha küçültülmüş halleri ve resim altlarında belirterek oldukça kısa tutmaya çalışıcam yazıyı.
Öncelikle kodlarla başlayalım.
Eğer bunu style dosyanız içerisinde uygulamak isterseniz;
.filtre
{
background:#FFB506 url("new-york-city.jpg");
background-blend-mode: darken;
}
Veya html içerisinde style olarak tanımlamak isterseniz;
style="background-color:#FFB506; background-image:url(new-york-city.jpg); background-blend-mode: darken;"
Ben bu yazıda kolaylık olması açısından html olarak kullanmayı tercih ediyorum, ancak daha sağlıklı olanın kesinlikle CSS içerisinde tanımlamanız olduğunu belirtmeliyim.
Öncelikle kullanacağım resim dosyasını da sizlerle paylaşayım, blend modelarını ise uyguladıktan sonra alt bilgi olarak yazıp sizlere bırakıyorum.
Evet şimdi resmimiz üzerinde teker teker blend mode’ları değişerek ve alt bilgi olarak sizlere sunarak yazıyı da fazla uzatmadan kullanımı sizlere bırakıyorum.
MultiplyScreenOverlayDarkenLightenLuminosityColorSaturationHueExlusionDifferenceSoft-LightHard-LightColor-Burn
Efektleri sırasıyla yukarıda inceleyebilirsiniz, kullanmak istediğiniz her bir blend mode için ise resimlerin altında yer alan değerleri direkt olarak uygulayabilirsiniz. Tabi ki farklı modelarda aynı rengi kullanmak pek iyi bir sonuç çıkarmıyor ortaya ancak her fotoğraf için ayrı bir renk ve mode ile en iyi efektleri CSS üzerinden uygulayabileceğinize eminim, umarım işinize yarar.
2 yorum
açıkçası tam aradığım içerikti çok teşekkürler yazı için,javascript ve tonla kod ekleyerek yaptığım birkaç projeden sonra geçte olsa bu paylaşımı bulmak çok iyi geldi :)
Teşekkürler Ferhat bey, faydalı bir doküman olmuş.