CSS ile Resimlere Stil Verelim

css_for-pictureİnternet sitesinde(blogda) muhtevanın ehemmiyeti su götüremez bir gerçek. Bloglar da akıcı bir dille ve yazım kaidelerine uyularak yazılmış benzersiz muhtevalar her vakit iş yapar.

İç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.
explorer-nochromefirefox

Hiç yorum yok

Yorum yaparken:
1. Yaptığınız yorumun, mutlaka konuyla alakalı olmasına özen gösteriniz.
2. Yorumlarınızda yazım ve dil bilgisi kurallarına uymaya çalışın.
3. Konu ile ilgili olmayan sorularınız için İletişim sayfasını kullanınız.

Blogger tarafından desteklenmektedir.