CSS Oval köşe yapımı

CSS ile çeşitli teknikler kullanılarak çok farklı ve hoş tasarımlar yapılabildiğini biliyoruz. CSS konusuna meraklıyım yeni şeyler öğrenmeyi ve denemeyi seviyorum. Fakat işin kötü tarafı bazı istediklerimizi yapabilmek için ciddi bir uğraşı titiz bir çalışma gerekiyor. Örnek vermek gerekirse “oval köşe yapmak” diyebilirim.  Arama yaptığımız zaman bir sürü teknik çıkıyor karşımıza. Çok basit bir işlem gibi gözüken köşeleri yuvarlatmak tasarımdan soğutuyor insanı yahu. :D Burada 25 farklı teknik bulunan bir liste mevcut.

Benim asıl bahsetmek istediğim en kolay yoldan kafamız karışmadan oval köşeler yapabilmek. Bunun için 2 servis önerisinde bulunacağım.

border-radius.com değerleri girin oluşturulan kodu kullanarak oval köşeli elemanlar oluşturun.Hepsi  bu kadar.  Bu kodlarla yaptığınız oval köşeler Firefox 3+ Chrome 4+ Safari 3.1+ Opera 10.5+ I.E 9+ tarayıcılarında gerektiği gibi görünüyor. Ben 2 farklı tarayıcıda denedim. Firefox ile problem yok fakat Internet Explorer 8 desteklemiyor. Şaşırmadım tabiki buna bekliyordum zaten IE işi zora koşuyor hep :D

cssround.com bu sitede aynı şekilde kod kullanarak oval köşeler oluşturmanızı sağlamakta. Bunu her tarayıcının özellikle Internet Explorer’ın desteklemediğini söylemiştik. Ben illaki her tarayıcı köşeler oval görünsün istiyorum diyorsanız (Bence fazla uğraşmayın ama yinede en doğal hakkınız :D ) sitenin sağ üst köşeden “Images” linkini takip ederek bütün tarayıcılarda aynı sonucu alabildiğiniz yuvarlatılmış köşeleri yine aynı kolaylıkta oluşturabilirsiniz. Girdiğiniz değerlere göre oluşturulan resim dosyalarını ve CSS kodunu zip dosyası olarak indirip kullanın.

This entry was posted in Web araçları. Bookmark the permalink.

One Response to CSS Oval köşe yapımı

  1. özge says:

    çok güzel oldu web tasarım da bana çok yardımcı olacak teşekkürler

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*

Şu HTML etiketlerini ve özelliklerini kullanabilirsiniz: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>