Css İle Resmin Üzerine Yazı Yazmak

Yan tarafta yağmurlu bir İstanbul gününde çektiğim bir fotoğraf ve fotoğrafın üzerine yazdığım bir kaç kelimeyi görüyorsunuz. Bu gördüğünüz görüntüyü elde etmek için Photoshop veya Fireworks gibi programları kullanmak artık gereksiz, çünkü bu işlemi birkaç satır CSS kodu yazarak yapmak artık mümkün.

Aşağıda bu görüntüyü elde etmek için gerekli kodları bulabilirsiniz, kodları inceledikten sonra ufak bir deneme yapmanız sizin iyiliğinize olacaktır.

HTML:

<div class="image">
<img src="images/defocu.jpg"/>
<h2><span>DEFOCU.COM 2009</span></h2>
</div>

CSS:

.image {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position: absolute;
top: 250px;
left: 0;
width: 100%;
}
h2 span {
color:#FFF;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}

Css İle Resmin Üzerine Yazı Yazmak

Benzer Yazılar (İlginizi Çekebilir):

Yorumlar

Yorum Paneli

arama

Kategoriler

Herkes Ne Okuyor?

Etiket Bulutum