09-01-2015, 05:23 AM
Merhaba arkadaşlar. CSS nimetleri her geçen gün tematik blog yazarlarını keşfetmeye zorluyor. Bu CSS nimetinin özelliğinden bahsetmek istiyorum. Bu yazıda belirteceğim kodlar ile bir çok özelliği hiç resim kullanmadan oval hale getirebileceğiz.
Uyarı : CSS 3 kullanarak oval köşeler yaparsak yalnızca şu tarayıcılarda düzgün olarak görünecektir.
Firefox‘ta oval köşeler için aşağıdaki kodu kullanmamız gerekli;
PHP Kod:
Google Chrome ve Safari için ise;
PHP Kod:
Bunlar pixel cinsinden değerler alırlar. Örnek:
PHP Kod:
Eğer isterseniz her köşe için ayrı değerler belirtebiliyoruz. 4 köşe için de ayrı ayrı kod kullanmak isterseniz:
PHP Kod:
Yukarıdaki kodları çok az İngilizce biliyorsanız anlayabilirsiniz ama yinede Türkçe karşılıklarını verelim:
PHP Kod:
Örneğin sadece üst köşeleri yuvarlatmak istiyorsanız:
PHP Kod:
Uyarı : CSS 3 kullanarak oval köşeler yaparsak yalnızca şu tarayıcılarda düzgün olarak görünecektir.
- Mozilla Firefox
- Chrome
- Safari
Firefox‘ta oval köşeler için aşağıdaki kodu kullanmamız gerekli;
PHP Kod:
Kod:
-moz-border-radius Google Chrome ve Safari için ise;
PHP Kod:
Kod:
-webkit-border-radius Bunlar pixel cinsinden değerler alırlar. Örnek:
PHP Kod:
Kod:
-moz-border-radius: 5px;
-webkit-border-radius: 5px; Eğer isterseniz her köşe için ayrı değerler belirtebiliyoruz. 4 köşe için de ayrı ayrı kod kullanmak isterseniz:
PHP Kod:
Kod:
-moz-border-radius-topleft / -webkit-border-top-left-radius
-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 Yukarıdaki kodları çok az İngilizce biliyorsanız anlayabilirsiniz ama yinede Türkçe karşılıklarını verelim:
PHP Kod:
Kod:
- top : Üst
- bottom : Alt
- left : Sol
- right : Sağ Örneğin sadece üst köşeleri yuvarlatmak istiyorsanız:
PHP Kod:
Kod:
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;