Cuma , 20 Ekim 2017
Anasayfa » WEB » CSS » CSS ile Etkili Resim Efektleri

CSS ile Etkili Resim Efektleri

Eskiden can alıcı görüntüler oluşturmak için Photoshop gibi grafik programlarından faydalanırdık. Günümüzde CSS’e eklenen bir çok özellikle göz kamaştıran resimler ve galeriler oluşturmak mümkün hale geldi. Şimdi size internette gördüğün bir kaç tane güzel resim örneğini HTML ve CSS kodları ile birlikte yazacağım.

Polaroid Potoğraf

screenshot_27

DEMO

Polaroid makinaları bilirsiniz. Çekilen fotoğrafı anlık olarak çerçeveli olarak çıkartıp üzerine ilgili not düşmek için küçük bir alan bırakılırdı. İlk CSS efektimiz bu olsun ve kodlamaya başlayalım.

HTML

HTML kodlarımız poloraid sınıfını kullanacak ve ekranda 300px genişliğinde çerçeveli resimler oluşturacaktır. Fotoğraf hakkında bilgi içinde içinde 1 tane p etiket bulunacaktır.

Standart HTML etiketlerini yazarken Google Font ile çalışmaya dahil ettiğimiz el yazısı fontunu eklemeyi unutmayın.

CSS

Şimdi gelelim CSS kodlarının yerleştirilmesine, arkaplan rengini koyulaştırmak için body etiketine renk kodumuzu ekliyoruz.

.Polaroid nesnelerinin ekranda 300px görünmesi ve içerideki p etiketini absolute olarak kullanabilmek için position değerini relative yapıyoruz. float:left değeri ile resimler yan yana gelmesi ve margin ile de resimler arasıda boşluk oluşmasını sağlıyoruz.

.polaraid img  ile resimlere çerçeve ekleyip resmin bulunduğu alana tam sığması için 100% genişlik veriyoruz.

.polaroid p ile şekilli el yazısı oluşturuyoruz.

 

Şerit Fotoğraf

resim2

Birden fazla gölge ve üzerinde geldiğinde fotoğrafın açıklamasını gösteren fotoğraf örneği

DEMO

HTML

CSS

 

 

 

 

Kaynak:https://designshack.net/articles/css/4-fun-css-image-effects-you-can-copy-and-paste/

Hakkında Hayri

İlginizi Çekebilir

CSS Slider Yapımı

Bu yazımızda CSS ile Basit Slider yapacağız. İlk olarak slidera konulacak resimlerin boyutlarını ayarlıyoruz. Bu örneğimizde …

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir