CSS ile Resimlere Stil Verelim

Web sitesinde(blogda) içeriğin önemi su götüremez bir gerçek. Bloglarda akıcı bir dille ve imla kurallarına uyularak yazılmış benzersiz içerikler her zaman iş yapar.

İçeriğinizi konuyla ilgili görsellerle desteklemek hem yazınızın etkisini arttıracak, hemde anlaşılmasını kolaylaştıracaktır.
Bu yazımızda sayfamıza koyduğumuz resimlerimize CSS ile stil vermeyi basitçe anlatacağız.

1 - Resmimizin ebatlarını belirleyelim :
Diyelim ki 600x230 resmimiz var. Biz bu resmin sayfamızda 500x190 gözükmesini istiyoruz. Kodumuz şu:

.pictures {
 width:500px;
 height:190px;
}

class="pictures" değeri verdiğimiz tüm resimlerimiz şöyle gözükecek.


2 - Resmimize çerçeve (border) ekleyelim :

.pictures {
 width:500px;
 height:190px;
 border:5px solid #000;
}

Web sitesi sahipleri, resimlere genellikle çerçeve koymuyor. Bunun hoş durmadığını düşünüyorlar. Tabii ki zevk size kalmış.
Resimlere çerçeve yerine daha değişik bir görsellik de eklenebilir.

3 - Resime gölgeli çerçeve (Gölge Efekti) :

.pictures {
 width:500px;
 height:190px;
 border:5px solid transparent;
 -moz-box-shadow:0 0 15px #333;
 -webkit-box-shadow:0 0 15px #333;
 box-shadow:0 0 15px #333;
}

4 - Resmimizin köşelerini yuvarlayalım (Radius Özelliği):

.pictures {
 width:500px;
 height:190px;
 border:5px solid transparent;
 -moz-box-shadow:0 0 15px #333;
 -webkit-box-shadow:0 0 15px #333;
 box-shadow:0 0 15px #333;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 -goog-ms-border-radius: 10px;
 border-radius: 10px;
}

Önerilerim :
a ) Sayfanıza, yazınızı destekleyecek, anlaşılmasını kolaylaştıracak resimler eklemeye dikkat edin.
b ) Yazının uzunluğuna göre 2 yada bilemedin 3 resimin yeterli olacağını düşünüyorum. Ama iki satır yazıya 2 resim bile çoktur.
c ) Resimler 600x400 boyutunu geçmesin. Büyük boyutlu resimler sayfanızın açılış hızını düşürür. Bu da ziyaretçi kaybı demektir.
d ) Mutlaka resim kullanacaksanız yüksek çözünürlüklü, kaliteli resimler seçin.
e ) Resimlerinizi yeniden boyutlandırmak için webresizer sitesinden faydalanabilirsiniz.

Tweet