CSS ile Resimlere Stil Verelim

İçeriğinizi konuyla alakalı görsellerle desteklemek hem yazınızın tesirini 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.
![]() | ![]() |
Yorum Gönder