Benim gibi 80’lerde doğmuş biriyseniz muhtemelen eski albümleri gömmüşsünüzdür ve o albümler içerisinde fotoğraflarınız vardır. Fiziksel bir albümü içerisinde var olan fotoğraf nesneleri ile elinde tutmanın olduğu zamanlar.
Elbette birçok uygulama var ve fotoğraflara efekt ekleyebiliyor, ancak bunu kendi uygulamanızda veya web sitenizde normal bir fotoğrafı gösterirkende yapabilirsiniz, elbette bir coder iseniz.
Burada CSS ile web sitesi veya uygulamalara eklenen fotoğraflara vintage/eski efekti eklemeyi göstereceğim. CSS ile oynamayı çok seviyorum.
Bu CSS efekti sadece fotoğrafı tarayıcıda yorumlarken efekt verir, bu fotoğrafın orijinaline dokunmadığı ve resmi cihazınıza kaydederseniz orijinalini göreceğiniz anlamına gelir, yani yalnızca görüntülerken efektli olacaktır ki CSS mantığı budur ve coderler bilir. Ekran görüntüsü alırsanız tabi iş değişir.
Vintage fotoğraf görüntüsü için CSS ile şunları yapmaya çalışacağız:
- Eski kameralar tarafından çekilen fotoğraflarda sıklıkla görülen, kenarların etrafına gradyan tabanlı koyulaşan bir vinyet.
- Yaşlanma izlenimi vermek için resme sarımsı-turuncu bir renk.
- Görüntünün üzerine ince bir film grenli doku.
- Görüntüyü biraz bulanıklaştırmak çünkü geçmişte lensler her zaman keskin netliğe sahip değildi.
- Parlaklık, kontrast ve doygunlukta bazı ayarlamalar.
Örnek kodu aşağıya ekliyorum:
Nihai CSS kodu şu şekilde oluyor:
.filtered{
width: 800px;
height: 450px;
border-radius: 10px;
margin: 2px;
background-image:
radial-gradient(ellipse, #0000, #0007),
linear-gradient(0deg, #9725, #9725),
url(https://i.ibb.co/vJt5HSh/noisy-texture-300x300-o10-d10-c-a82851-t1.png),
url(https://i.ibb.co/m4sGRmK/pexels-pixabay-247431.jpg);
background-size: auto, auto, auto, cover;
background-repeat: repeat;
background-position: center;
filter: blur(0.05em) saturate(0.7) contrast(1.5) brightness(1.2);
}