Adım adım CSS3′ü tarayıcılar kendilerine katmaya başladılar ki tasarımda kolaylık artmaya başladı. Bilindiği üzere Internet Explorer güncel ve fonksiyonel bir tarayıcı olmadığından dolayı kan kaybediyor aksine Firefox, Safari gibi tarayıcılar ise günden güne yeni özellikler ile daha çok kullanıcı kazanıyor.
Şimdi ise Firefox ve Safari tarafından desteklenen bir yeni özelliği belirteceğim. Bir ID yada CLASS’ımızda tanımladığımız 1 satırlık bir kod ile kolayca yuvarlak köşeler elde edebiliriz.
#deneme_kutusu {
background-color: #444444;
color: #FFFFFF;
padding: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
bu size 5 pixel köşeli bir yuvarlak bir köşe elde etmenizi sağlayacak. İşte kutumuz:
Hiç dikkatinizi çekti mi bilmiyorum, eğer bir Wordpress kullanıcısı ise iseniz yönetim panelinize bir Internet Explorer ile birde Firefox yada Safari ile giriş yapın. Arada ki farkı görebiliyor musunuz? Evet Wordpress yönetim panelinizdede bu teknik uygulanmış.
Ayrıca her bir köşeye yuvarlama uygulamak zorunda değilsiniz. İsterseniz sol köşede 5px yuvarlama olsun sağ altta 10px, yani nasıl isterseniz.. Değişkenler şu şekilde:
- -moz-border-radius-topleft (Firefox) / -webkit-border-top-left-radius (Safari)
- -moz-border-radius-topright / -webkit-border-top-right-radius
- -moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
- -moz-border-radius-bottomright / -webkit-border-bottom-right-radius
Not: Bu yazı StylizedWeb ‘in buradaki yazısından esinlenerek yazılmıştır.
