Web, işletme ve inovasyon hakkında bir takım yazılar İletişim için Form

Defocuyu takip etmek isteyenlere, RSS - FeedBurnerSanal Alemde Ben, Friendfeed - Flickr - Twitter - Vimeo


Css İle Resmin Üzerine Yazı Yazmak

resimeyaziYan 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:
  1. <div class="image">
  2.       <img src="images/defocu.jpg"/>
  3.       <h2><span>DEFOCU.COM 2009</span></h2>
  4. </div>

CSS:
  1. .image {
  2.    position: relative;
  3.    width: 100%; /* for IE 6 */
  4. }
  5.  
  6. h2 {
  7.    position: absolute;
  8.    top: 250px;
  9.    left: 0;
  10.    width: 100%;
  11. }
  12.  
  13. h2 span {
  14.    color:#FFF;
  15.    font: bold 24px/45px Helvetica, Sans-Serif;
  16.    letter-spacing: -1px;
  17.    background: rgb(0, 0, 0); /* fallback color */
  18.    background: rgba(0, 0, 0, 0.7);
  19.    padding: 10px;
  20. }

Ağustos 31st, 2009 Etiketler: , ,
| Kategori: CSS & XHTML, Web Tasarım | 1 Yorum » Yazar: abdullah