CSS3 ile daire çizmek

CSS3 ile resim kullanmadan daire çizmek mümkün.

CSS Kodumuz:

CSS3 ile resim kullanmadan daire çizmek mümkün.

CSS Kodumuz:

.daireclass {
 background-color: #c06;
 height: 150px;
 -moz-border-radius:75px;
 -webkit-border-radius: 75px;
 width: 150px;
}

HTML Kodumuz:

<div class="daireclass"></div>

Sonuç:

https://yazilimsinifi.files.wordpress.com/2013/01/1_735.jpg

Daha farklı şeylerde deneyebilirsiniz.

Örnek (Kenarlıklı Daire)

.daireclass {
 background-color: #c06;
 border: 3px solid #333;
 height: 150px;
 -moz-border-radius:75px;
 -webkit-border-radius: 75px;
 width: 150px;
}

Sonuç:

https://yazilimsinifi.files.wordpress.com/2013/01/2_627.jpg

CSS ile Oval Köşeli Kutucuk Modeli Oluşturmak

Bu derste CSS kullanarak kenarları oval olan kutucukları nasıl yapabileceğimizi göstermek istiyorum.

Html kısmına alttaki kod parçacığını yazıyoruz.

<div class=”kutucuk”>

</div>

Css kısmına alttaki kod parçacığını yazıyoruz.

.kutucuk
{
background-color:#ffb519;
width:400px;
height:40px;
display:block;
-khtml-border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius: 5px;
}

Evet arkadaşlar kenarları yuvarlak yapmış bulunmaktayız. Bu kod parçacığı İE, Chrome, Firefox, Safari, Opera ile sorunsuz çalışmaktadır. Kolay gelsin…  Sedat Demirdoğan