CSS de Görüntü Düzenleme: Combining Teknikleri
İçindekiler
CSS de görüntü düzenleme yazı serimizin ilk iki yazısında Filters ve Blend Modes özellikleriyle görüntülerimizin düzenlemesini nasıl yapabildiğimizi öğrenmiştik. Bu yazımızda bu iki özelliği birlikte kullanarak resimlerimizi nasıl düzenleyebiliriz konusuna değineceğiz. Umarım faide olur. Webmaster Mutfakta kalın 🙂
Temel prensip
İlkel olmayan herhangi bir görüntü düzenleme genellikle sadece tek bir elementten fazlasını gerektirir. Buda pseudo elementler ile gerçekleştirebilir. Pseudo kullanımı aşağıdaki gibidir.
selector::pseudo-element {
property: value;
}Tüm Pseudo elementler;
- ::after
- ::before
- ::first-letter
- ::first-line
- ::selection
- ::backdrop
- ::placeholder
- ::marker
- ::spelling-error
- ::grammar-error
Bu element ile ilgili daha fazla bilgi için bu sayfayı ziyaret edebilirsiniz.
Ama ne yazık ki bir sorun daha ortaya çıkmaktadır. Img elementi değiştirilen elementlerin altında yer alır. Sonuç olarak ::before ve ::after resim tagları çalışamayacaktır. Bu sorunu çözmek için resimimizi örtmeye ihtiyacımız olacak ve bu durumda figure elementi en iyi çözüm gibi görünüyor. Bu nedenle biçimlendirme aşağıdaki gibi olmalıdır.
<figure>
<img src="image-url" />
</figure>
Oluşturacağımız tüm düzenleme efektlerinin ortak bir temel CSS’si olacaktır. Oda aşağıdaki gibidir.
figure {
position: relative;
}
figure:before,
figure:after {
content: '';
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
}
img {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}Biz ::before ve ::after pseudo elementlerini kullandık, böylece çeşitli Blend modes‘ler uygulayabiliriz. figure elementinin en uygun şekilde resimimizi örtmesi için genişlik ve yükseklik değerlerini %100 şekilde ayarladığımıza dikkat edin ve kusursuz bir hizalama yapabilmemiz için position özelliğini absolute olarak kullanmış olduk.
Çoğu durumda görüntülerimize pseudo elementler üzerinden filters, blend modes ve çeşitli efektler uygulayacağız. Düzenleyeceğimiz orjinal resim aşağıdaki resimdir.
High-Contrast Grayscale efekti
High-contrast bir görüntü oluşturmak için sadece contrast değerini daha yüksek yaparak ayarlabilirsiniz. Lakin brightness değerini arttırmak efektimizi daha etkileyici yapacaktır. Eğer filters özelliğini kullandıysanız. Bu işimizi rahatlıkla görecektir. Bununla birlikte blend modes’le en iyi sonucu almak için overlay özelliğiyle harmanlanmalı ek olarak box-shadow özelliği ekleyebilirsiniz. Bahsettiğimiz efektin CSS kodları aşağıdaki gibidir.
img {
filter: contrast(1.8) brightness(1.5) grayscale(1);
}
figure:before {
z-index: 3;
mix-blend-mode: overlay;
box-shadow: 0 0 200px red inset;
}z-index ekleme, bizim pseudo elementini resim üzerinde tutacaktır.
z-index, konumlandırma elementleri uygulanmış katmanların z-eksenindeki konumu belirlemek için kullanılır.
Box-shadow uygulamasından sonra görüntüyü hafiften kırmızı tutmak için blend modes’ın overlay özelliğini kullanmış olduk. Blend modes, filters karışımları ve filters özelliklerinin arasındaki farkı görmek için aşağıdaki resim üzerinde mouse ile gezebilirsiniz.
Pratik yapmak için, uygulamayı CodePen demosu üzerinden incelemenizi tavsiye ediyorum.
Resimlere eski fotoğraf efekti
Çoğu eski fotoğrafın rengi genellikle rengi yavaş yavaş yok olur ve dış kısmı kırmızımsı kahverengiyle kaplanır. Aynı efekti yeniden oluşturmak için daha fazla elemente ve filters kullanmak zorunda kalacağız. CSS’imiz aşağıdaki gibidir.
img {
filter: saturate(0.6);
}
figure {
filter: contrast(1.1) saturate(1.9) sepia(0.7) grayscale(0.3);
}
figure:before {
z-index: 2;
mix-blend-mode: multiply;
box-shadow: 0 0 250px brown inset;
background: rgba(125, 100, 0, 0.3);
}
figure:after {
z-index: 3;
mix-blend-mode: hard-light;
box-shadow: 0 0 150px pink inset;
background: rgba(198, 155, 0, 0.3);
}Bu sefer hem resime hemde figure elementine filters uyguladık. Temel anlamda resmimizin daha az renkli olmasını istiyoruz. Saturate filtresinin değerini 1 den düşük vererek başlıyoruz. Figure elementinin filtresini ise contrast, saturate, sepia, grayscale tüm özelliklerini blending ediyoruz. Yani harmanlıyoruz: Eğer bu filtreleri uygulamazsanız, daha çok kahverengiyi andıran bir efekt belirgin olacaktır buda bizim için istenmeyen bir durumdur.
Her iki pseudo elementinde yarı saydam kırmızımsı arkaplana sahip olmasını sağlıyoruz. Buda görüntülere kırmızımsı kahverengi görünümü verecektir.
Pratik yapmak için, uygulamayı CodePen demosu üzerinden incelemenizi tavsiye ediyorum.
Sarımsı pus efekti
Hiç rüzgar yüzünden havada kum tanecikleri askıya alınmış bir şekilde hafif bulutlu bir akşama şahit oldunuz mu? Bu hava koşullarında her şey sarımsı bir renk alır ve nesneler biraz soluk bir görünüme bürünür. Aynı efekti canlandırmak için sadece aşağıdaki CSS’e ihtiyacımız var.
img {
filter: saturate(0.2);
}
figure {
filter: contrast(1.8) brightness(1.1) saturate(1.5);
}
figure:before {
z-index: 2;
mix-blend-mode: multiply;
box-shadow: 0 0 100px rgba(0,0,0,0.5) inset;
background: rgba(125, 100, 0, 0.3);
}
figure:after {
z-index: 3;
mix-blend-mode: hard-light;
box-shadow: 0 0 500px rgba(0,0,0,0.6) inset;
background: rgba(198, 155, 0, 0.3);
}
Yaptığımız ilk şey resmimizin saturation değerini azaltmaktır. Gerekli rengi eklemek için pseudo elementlerine(:before ve :after) yarı saydam sarımsı arka plana sahip olmasını sağlıyoruz. :after ‘da Hard-light blend modes’unu kullanmak pus efektini daha belirgin hale getirecektir.
Pseudo elementlerde box-shadow kullanmak soğan üzerindeki odaklanmayı arttıracaktır. Son olarak high contrast, brightness ve saturation filtrelerini uygulayarak figure elementinin pus özelliğini güçlendiriyoruz.
Pratik yapmak için, uygulamayı CodePen demosu üzerinden incelemenizi tavsiye ediyorum.
Son olarak
Gördüğünüz gibi CSS’de resim düzenlemek o kadar da zor birşey değil. Bu yazıda aklından geçirdiğim noktaları elinde tutarsan, kendinize harika filtreler oluşturabilirsiniz. Tek yapmanız gereken CodePen demolarını incelemekten geçiyor.
Çay koyduk Webmaster Mutfakta kalın. İyi çalışmalar. 🙂
