CSS ile geometrik şekiller nasıl oluşturulur beraber inceleyelim.Bu şekillerin kullanarak site tasarımında resim yerine kullanılması sayfanın boşuna resim indekslemesine  mani olabiliriz.

  •  KARE

CSS’in sadece 3 özelliği ile bir kare oluşturabiliriz. 🙂

 

 

 

 

 

Html

 


<div id="Kare"></div>

 

Css

 


#Kare{

width:200px; // Genişlik

height:200px; // Yükseklik

background-color:red; // Arkaplan Rengi

}

 

Görünüm

 

 

  • ÜÇGEN

CSS ile üçgen oluşturmak isteyen arkadaşlar ilk başta zorlanmışlardır.CSS’de border özelliği bloğun kesişim açısı 45 derece olarak tanımlanmıştır.Bu saye de üçgen oluşturabiliriz.

Html

 


<div id="ucgen"></div>

 

Css

 

#ucgen{
 width: 0px;
 height: 0px;
 border-color:red yellow blue green;
 border-style: solid;
 border-width: 100px 100px 100px 100px;
 }

Görünüm

 

 

Eğer bir köşe hariç diğer köşeleri transparent değeri verirsek üçgen şeklini elde etmiş oluruz.

Css

 

.ucgen{
 width: 0px;
 height: 0px;
 border-color:transparent transparent blue transparent; // saat yönünde tanımlanır
 border-style: solid;
 border-width: 100px 100px 100px 100px;
 }

Görünüm

 

 

 

 

  • DAİRE

CSS3 border-radius  özelliğini kullanarak daire yapabiliriz.border-radius nesnelerin köşelerini yuvarlamayı sağlayan bir özelliktir.IE9+, Firefox 4+, Chrome-Safari 5+ ve Opera ile uyumludur.

 

 

 

Html

 


<div id="daire"></div>

 

Css

 


#daire{

width:150px;

height:150px;

background-color:#417191;

-webkit-border-radius:75px;

-moz-border-radius:75px;

}

 

Görünüm

 

Ekran Alıntısı

 

  • ELİPS

CSS ile elips oluşturmak için dairedeki gibi border-radius özelliğini kullanacağız.Eğer border-radius özelliğine 100% değeri ya da  100px / 100px değerini verirsek elips şekili oluşur.

 

Html

 


<div id="elips"></div>

 

Css

 


#elips{

width:150px;

height:150px;

background-color:rgb(115,194,112);

-webkit-border-radius:100%;

-moz-border-radius:100%;

}

 

Görünüm

 

Ekran Aslıntısı

 

  • KÜP

Küp yapımında transform özelliğini kullanmamaz gerekir.Bir başka derste küp yapımını transform özelliği ile beraber inceleyebiliriz.

 

Bir sonraki makalede görüşmek üzere…

 

Facebook'dan yorumla