CSS ile Resimlere Stil Verelim

tarafından
13
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 600×230 resmimiz var. Biz bu resmin sayfamızda 500×190 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 600×400 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-no chrome firefox