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:
-
-
<img src="images/defocu.jpg"/>
-
-
</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 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,
CSS:
-
div#kutu{
-
height: 50px;
-
width: 50px;
-
position:absolute;
-
top: 50px;
-
right: 50px;
-
background:#F90;
-
}
-
-
div#tema{
-
margin: 0 auto;
-
width: 300px;
-
height: 200px;
-
position:relative;
-
background: #CCC;
-
}
Css meraklılarının öğrenmekte zorluk çektikleri bazı kodlar olduğuna inanıyorum. Bu kodları, şöyle bir iki şey yazıp, sonuçlarını görmeden öğrenemezsiniz. Bunlardan biride "clear" kodudur. Temelde çok kolay bir yapısı olan bu kod, bence Css'in iş bitirici kodlarındandır.
Yanyana gelen iki kutudan birinin diğerinden kısa olması sonucu, aşağıdaki kutulardan biri yukarı kayabilir. Bu da tasarımımızda istenmeyen bir görüntü ortaya çıkarır. Clear, bu sorunu ortadan kaldırır. Sözlerle tam olarak anlaşılmadıysa, yandaki resimi ve aşağıdaki kodları inceleyebilirsiniz.
CSS:
-
div#main{
-
width: 300px;
-
height: auto;
-
}
-
-
div#left{
-
width: 150px;
-
height: 170px;
-
float:left;
-
background: url(images/left.png);
-
}
-
-
div#right{
-
width: 150px;
-
height: 80px;
-
float:left;
-
background: url(images/right.png);
-
}
-
-
div#bottom{
-
width: 150px;
-
height: 80px;
-
float:left;
-
background: url(images/bottom.png);
-
}
-
-
.clear{clear:both;}
HTML:
-
-
-
-
</div>
-
-
-
</div>
-
-
<div class="clear"></div>
-
-
-
</div>
-
-
</div>
Bugün öğreneceğimiz 2-3 satırlık bir CSS koduyla, köşeleri oval kutular yapacağız.
Bazı tarayıcıların eski versiyonları bu kodu desteklemiyor olsada, kullanımı son derece kolay olduğu için benim tercih nedenim. Kendi blogumun yorum kısmındaki kutucukları da bu kodu kullanarak yaptım. Eskiden bu tip kutular yapmak için harcadığım zamanı düşündüğümde kodun bazı tarayıcılarda çalışmaması canımı sıkmıyor. Çünkü hazırladığım kutucuğun şeklini değiştirmem saniyelerimi alıyor. Kod aşağıda buyrun, deneyin. Ne demek istediğimi daha rahat anlayacaksınız.
CSS:
-
.comments{
-
-moz-border-radius: 0.5em;
-
-webkit-border-radius: 0.5em;
-
background: #F8E0E4;
-
padding: 10px;
-
}
Tarayıcımızın içinde kaydırma çubuğunun kısa sayfalarda görünmeyip, uzun sayfalarda görünmesi nedeniyle, sitemiz tarayıcının içinde kayıyormuş gibi bir görüntü oluşturur.
Bunu yok etmek için, kaydırma çubuğunun kısa sayfalarda da görüntülenmesini sağlamamız gerekmektedir. Bunu için yapmamız gerekense .css dosyamıza bir satır kod eklemektir.
html { overflow-y: scroll; }
Hepsi bu kadar, artık sitenizdeki tüm sayfalar kısa veya uzun olsun, tarayıcınızın içinde kaydırma çubuğuyla beraber görüntülenecektir.
İletişim için 
