CSS3 Border-Radius Kullanımı
Merhaba Arkadaşlar,
Bu dersimizde sizlere CSS3 ile hayatımıza giren ve tasarımlarımızda yoğunlukla kullandığımız ” border-radius ” bileşenini anlatacağım. Önceden değişik ve uzun yollar ile buton resim div vb. tasarım ekipmanlarının keskin kenarlarına eğim vererek tasarımlar yapılıyordu. Ancak günümüz teknolojilerinde bu işlem için ( yeni nesil tarayıcılarda ) tek satırlık bir kod yeterli olacaktır. Border-radius adı verilen bu bileşen istenirse tek değer ile , istenirse iki değer ile veya tercihe göre 4 değer ile kenarları süsleyebilmektedir. Şimdi uygulamamıza geçelim ve bunu daha yakından inceleyelim..
İlk olarak iki adet dosya oluşturuyoruz. Bunlar ” index.html ” ve ” stil.css ” adlarında olacaktır. İlk olarak ” index.html ” dosyamızı açalım ve ana tag ‘leri yazdıktan sonra 3 ayrı kullanım için 3 div açalım.
<html>
<head>
<title>Bilgisayaci.Org - Border-Radius Uygulaması</title>
<link rel="stylesheet" type="text/css" href="stil.css" />
</head>
<body>
<div class="uyg1">Tek Seçenekli Kullanım</div>
<div class="uyg2">İki Seçenekli Kullanım</div>
<div class="uyg3">Üç Seçenekli Kullanım</div>
</body>
</html>
Bunları yazdıktan sonra sayfamızı çalıştırırsak sadece yazıları görürüz. Düzenlemeler için ” stil.css ” dosyamızı açıyoruz ve şu kodları yazıyoruz :
.uyg1{padding: 20px; background-color: #E9FFDD; border: 2px solid #000; width: 150px; margin-bottom: 20px; border-radius: 20px;}
.uyg2{padding: 20px; background-color: #FBE3E4; border: 2px solid #000; width: 150px; margin-bottom: 20px; border-radius: 5px 20px;}.
.uyg3{padding: 20px; background-color: #c4cfff; border: 2px solid #000; width: 150px; margin-bottom: 20px; border-radius: 20px 10px 5px 0px;}
Gördüğünüz gibi padding , background-color , border , margin gibi alışılagelmiş bileşenlerimizin dışında birde ” border-radius ” kullandık. Eğer CSS3 ile yazdığınız kodları destekleyecek kadar yenilenmiş bir tarayıcıya sahip iseniz bu kodları yazdıktan sonra oluşturulan div ‘lerimizin kenarlarında ki farkları görebileceksinizdir. Keskin olması beklenen kenarlar bu küçük kod ile verilen değerler ile eğim kazanmıştır.
Peki Ya Eski Tarayıcılar ?
İşte o konuya geldiğimizde CSS3 ile border-radius ‘un alt kodları da karşımıza gelmiştir. Her tarayıcı için ayrı ayrı yazacağımız kodlar ile hemen hemen her kullanıcıya bu görüntüyü sağlıklı bir biçimde sunabileceğiz. Yeni yazacağımız kodlar sonrasında ” stil.css ” sayfamızın alacağı son görüntü şu şekildedir :
.uyg1{padding: 20px; background-color: #E9FFDD; border: 2px solid #000; width: 150px; margin-bottom: 20px; border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; -webkit-border-radius: 20px; -ms-border-radius: 20px;}
.uyg2{padding: 20px; background-color: #FBE3E4; border: 2px solid #000; width: 150px; margin-bottom: 20px; border-radius: 5px 20px;-moz-border-radius: 5px 20px; -o-border-radius: 5px 20px; -webkit-border-radius: 5px 20px; -ms-border-radius: 5px 20px;}
.uyg3{padding: 20px; background-color: #c4cfff; border: 2px solid #000; width: 150px; margin-bottom: 20px; border-radius: 20px 10px 5px 0px; -moz-border-radius: 20px 10px 5px 0px; -o-border-radius: 20px 10px 5px 0px; -webkit-border-radius: 20px 10px 5px 0px; -ms-border-radius: 20px 10px 5px 0px;}
Yeni eklediğimiz kodların karışık gelme ihtimaline karşı küçük bir açıklama yapayım :
-moz- : Mozilla tabanlı internet tarayıcısı içindir.
-o- : Opera tabanlı internet tarayıcısı içindir
-webkit- : Chrome & Safari internet tarayıcısı içindir
-ms- : Microsoft internet tarayıcısı içindir
Not : Bu ders içeriğinde kullanılan dosyaları İndir Sayfası 9 No ‘lu Maddeden İndirebilirsiniz..
Tüm Yorumlar