Yazılım

CSS Oval Kenarlar – Rounded Corners

   Tuğrul Aşık

css-border-radiusWeb uygulaması geliştirmişseniz büyük ihtimal oval kenarlı butonlara ihtiyacınız olmuştur.  Oval imajlarla yapmaya çalışmışsınızdır – ki ben üniversitedeyken çok denemiştim- zaman zaman ise başka bir web sitesinin kodlarından kullanmışsınızdır.  (Not: Cahilliğin gözü kör olsun 🙂 )

CSS  bu noktada birçok esnek avantajı bizlere sunuyor. Sabit değerli oval imaj butonlardan ve onların getirdiği dezavantajlardan bizleri kurtarıyor.  Uyumluluğu yüksek,  küçük ayarlamalarla tüm tarayıcılarda çalışabilir yapılar elde edebiliyorsunuz. Web sitesinin tasarımına sadece bir developer gözüyle bakmamak adına bu tarz iyileştirmeler çok işimize yarayacaktır.

Oval kenar yapmak için birçok araç mevcut, yararlanabileceğiniz bazı bağlantıları ve birkaç örneği aşağıda bulabilirsiniz.

 

css_tugrul_rounded1

<div style="width:400px;height:300px;-webkit-border-radius: 0px 89px 0px 89px;
-moz-border-radius: 0px 89px 0px 89px;
border-radius: 0px 89px 0px 89px;
border:4px solid #DBD641;
background-color:#3D3535;
-webkit-box-shadow: #B3B3B3 10px 10px 10px;
-moz-box-shadow: #B3B3B3 10px 10px 10px; 
box-shadow: #B3B3B3 10px 10px 10px;">
Just modify width and height values to get what you need...</div>

css_tugrul_rounded2

<div style="width:400px;height:300px;
-webkit-border-radius: 44px;
-moz-border-radius: 44px;
border-radius: 44px;
border:4px solid #F21D16;
background-color:#780E06;">
Just modify width and height values to get what you need...</div>

css_tugrul_rounded3

border-radius: 11px; 
-moz-border-radius: 11px; 
-webkit-border-radius: 11px; 
border: 4px solid #144380;

 

 

Keyifli denemeler 😉