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.

Bunun içinede yazı atayalım

 

     

             Emqcer - Tahribat - CSS3 - Deneme

 

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

 

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 1

 
 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 2

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 3

 
 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 4

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 5

 
 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 6

 

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.