Forum
Aktif konular
Üyeler
Kurallar
Arama
[Döküman] - CSS İle Köşe Yuvarlama [Döküman] - CSS İle Köşe Yuvarlama
-
1- Yuvarlak Köşeler
Bu hem web sitemizi hızlandırır bir daha resm kullanmamıza veya arkaplana uysun diye ps'de arkaplansız yapmak gibi dertlerden kurtuluyoruz.
ilk önce bir .html dosyası açalım içine bu tagları atayalım.
<div id="kutu">
</div>Bunun içinede yazı atayalım
<div id="kutu">
<div class="yazi">
Emqcer - Tahribat - CSS3 - Deneme
</div>
</div>Daha sonra sayfamıza css'i tanıtalım ve stil.css'e şunları ekleyin
#kutu {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #FF9900;
height: 25px;
width: 250px;
}.yazi {
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: bold;
padding: 5px;
font-size: 14px;
color: #000000;
}Burda arkaplanı turuncu boyutlarıda 250x25 yaptık. Ekranda ki görüntü şu şekilde olacaktır.
Yuvarlak köşeli kutu yapımı bu kadar
2- Şimdi Yazıya Gölge verelim
.yazi class'ına bu kodu eklememiz yetecek
text-shadow: 2px 2px 2px #FFFFFF;
Şu şekil olacak kodumuz
.yazi {
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: bold;
padding: 5px;
font-size: 14px;
color: #000000;
text-shadow: 2px 2px 2px #FFFFFF;
}Burda 3 tane 2px var bunlar sol ,alt, sağ anlamına geliyor.Bunlarla oynayarak daha iyi bir gölge edebilirsiniz.Sondaki de renk kodu gölgenin rengini belirliyoruz.
Bunları ekledikten sonra şöyle bir görüntü çıkacak.
3. Olarak Yuvarlak Köşeli Kutuya Gölge Verelim
kutuya gölge vermek için #kutu adlı id'imize şu kodları ekliyoruz
box-shadow: 5px 5px 2px black;
-moz-box-shadow: 5px 5px 2px black;
-webkit-box-shadow: 5px 5px 2px black;Bu şekil olacak kodumuz.
#kutu {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #FF9900;
height: 25px;
width: 250px;
box-shadow: 5px 5px 2px black;
-moz-box-shadow: 5px 5px 2px black;
-webkit-box-shadow: 5px 5px 2px black;
}Burdaki 5px 5px 2px'ler sol,alt,sağ anlamına geliyor.bununla yine sizler oynayabilirsiniz.sondaki renk adlarını ister renk ismi ister rengin kodunu yazabilirsiniz.
bunları yaptıktan sonra görüntümüz bu şekilde olacaktır.
--------- Bunlardan Ayrı Olarak -------------
Hücreleme var süper birşey tabloya gerek duymayacağız artık.
.hucreler{
-moz-column-count: 3; --- burda 3 ler kac tane hücre olacagını belirtiyor ister 4 yapın ister 5 ,ister 2
-webkit-column-count: 3; -- aynısı
}burdakini .css'imizin içine atalım sonra .html dosyamıza gelip şunları koyalım
<div class="hucreler">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 1</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 2</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 3</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 4</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 5</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 6</p>
</div>Bunların Dezavantajı ie6 ve ie7 gibi saçma salak bir explorerlarda çalışmıyor olması. Tarayıcılar ne kadar çok çabuk gelişirse bunların kullanımı da o kadar gelişir diye düşünüyorum.
-
css mükemmel bişey ya.
her ne kadar tablo alışkanlığımdan vazgeçemesemde. kullanmaktan keyif oldığum bi dalgadır css. ve gelişmesi çok güzel.
ayrıca firefox rulz :F
-
Upistan ! yararlı olabilicek dokuman.
-
Döküman ekledim hocam, teşekkürler...
Kısayol
Şikayet
Özel Mesaj
Alıntı yap
Cevapla