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;
-
}
Tarayıcılar yeni versiyonları ile CSS3 kodlarını kullanmamıza imkan tanıyor. Bu yeni kodlarsa tasarım yaparken işlerimizi oldukça kolaylaştırıyor. Bunlardan en sevdiğim bir kaçıda yazı ve kutularımıza gölge vermemizi sağlayan kodlar. Örneğin yanda gördüğünüz görüntüyü elde etmek artık bir ka satırlık bir css koduyla mümkün.
Yandaki resmi incelediğinizde, yazı ve kutulara gölge verdiğimizi görmektesiniz. Yanlız ikinci sıradaki "Yan Başlık" yazısına dikkat ederseniz, diğerlerinden farklı olarak yazıya iki ayrı renkte gölge verdiğimizi göreceksiniz. Bu yapıyla bir yazıya 2-3 ayrı renkte gölge vererek, yazılarınıza sanki Photosop'ta hazırlamışcasına buz ve ateş efektleri verebilirsiniz. Örneğin kodlarını inceleyip, örnek dosyayı aşağıdan indirebilirsiniz.
HTML:
-
-
-
-
-
<div id="golgeli_kutu">Evet, gölgeli kutu benim
</div>
CSS:
-
h1{
-
text-shadow: -1px 4px 10px #000;
-
color:#FFF;
-
}
-
-
h2{
-
text-shadow: -1px 2px 10px #3F0, -5px 10px 25px #C39;
-
color:#FFF;
-
}
-
-
#golgeli_kutu{
-
width: 200px;
-
height: 100px;
-
box-shadow: 2px 10px 10px #F60;
-
-webkit-box-shadow: 2px 10px 10px #F60;
-
-moz-box-shadow: 2px 10px 10px #F60;
-
background:#FC0;
-
}
Örnek dosyayı buradan indirebilirsiniz.
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>
Bir süredir, ziyaret ettiğim Tutsplus bir eğitim ağı. Bizdeki Pilli'yi andıran yapısıyla, bünyesindeki sitelerde Web Programlama (PHP, CSS, JQuery vb.) , Illustrator, Flash, Flex-ActionScript, Adobe After Effect, Ses gibi konularda gerçekten hoş eğitim dökümanları sunuyor.
Tutsplus'da her konuya ait farklı bir site olması, size bu büyük network'te kaybolmadan gezinme imkanı veriyor. Sitelerde ilgili konularda çeşitli makalelere ulaşabileceğiniz gibi makalelere iliştirilmiş örnek kodlara ve bir çok eğitim videosuna da ulaşacaksınız, bilginize...
Web Geliştiricileri İçin
Flash, Flex-ActionScript Meraklıları
Illustrator Dersleri
Tüm kanalların toplandığı sayfaya ulaşmak için tıklayın...
İletişim için 
