CSS ile Yuvarlak

CSS3 ile kendini aşan yuvarlama (radius) komutları artık her türlü objeyi hazırlamamızı sağlıyor.

Bu yazımda en basit haliyle yuvarlak hazırlayacağız. Bu küçük teknik ileride hazırlayacağımız button ve türevi taslakları alt yapı oluşturacak.

İlk olarak kullanacağımız tanımlamalardan bahsedelim.

Tanımlamalar

  • border-radius objelerin köşelerini yuvarlamaya yarar. IE9+, Firefox 4+, Chrome, Safari 5+, ve Opera’da çalışmaktadır. Burada kullanacağınız radius değeri çemberinizin yarı-çapı olmalı.
  • border: 30px solid rgba(255, 255, 255, .5) ile arka plan renginiz üzerine beyaz renk tonunda bir çerçeve atabilirsiniz.

Örnek : Temel

İlk olarak div’e sıradan bir yuvarlak görüntüsü verelim.

Boyutlarım 200×200 piksel olduğu için yarı-çap değerimiz 100 piksel, dolayısıyla border-radius:100px olarak tanımlayacağız.

CSS Kodları

.basit{
background-color: #EC173A;
border-radius: 100px;
width:200px;
height:200px;
}

HTML Kodları

<div class="basit"></div>

Şimdi biraz daha gelişmiş bir örnek hazırlayalım.

Örnek : Gelişmiş

Bu sefer yuvarlağın içine yazı, kenarlarına ise çerçeve ekleyeceğim.

Yazıyı ortalamak için line-height, çerçeveyi oluşturmak için yukarıda tanımladığım border kodunu kullanacağım.

Aşağıdaki kodda 15 piksellik çerçeve eklediğim için yarıçap 15px artmakta. Dolayısıyla 115 olarak tanımladım.

CSS Kodları

.gelismis{
background-color: #6286a0;
border: 15px solid rgba(255, 255, 255, .5);
border-radius: 115px;
width:200px;
height:200px;
line-height:200px;
font-size:20px;
color:white;
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
text-shadow:#2d4251 5px 5px 5px;
}

HTML Kodları

<div class="gelismis">Yuvarlak Division</div>

CSS ile yuvarlak oluşturma konusu temel anlamda bu kadar.