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

Position:Relative ve Absolute Kullanımı

absoluterelativeCss ile kodlama yaparken bir kutuyu tarayıcıda istediğimiz bir noktada konumlandırmak için "positon:absolute" kodunu kullanırız. Yanda gördüğünüz gibi sarı kutuyu tarayıcımızın yukarı ve sağ tarafına 100'er px uzaklığa hizalamış bulunmaktayız.

Eğer kodlama sırasında başka bir kutuya "position:relative" özelliği verildiyse bu sefer "positon:absolute" özeliğine sahip kutular ona bağlanıyor. Yani yanda gördüğünüz gibi gri kutu "position:relative" özelliğine sahip, sarı kutuysa "positon:absolute" özelliğine sahip olduğu için artık tarayıcının değil, gri kutunun yukarı ve sağ tarafına 100'er px uzaklığa konumlanmıştır.

İlgili kodlar aşağıda buyrun inceleyin,

HTML:
  1. <div id="tema">
  2. <div id="kutu"></div>
  3. </div>

CSS:
  1. div#kutu{
  2.     height: 50px;
  3.     width: 50px;
  4.     position:absolute;
  5.     top: 50px;
  6.     right: 50px;
  7.     background:#F90;
  8. }
  9.  
  10. div#tema{
  11.     margin: 0 auto;
  12.     width: 300px;
  13.     height: 200px;
  14.     position:relative;
  15.     background: #CCC;
  16. }

Ağustos 27th, 2009 Etiketler: , , ,
| Kategori: CSS & XHTML | 1 Yorum » Yazar: abdullah