CSS3 Oval Köşe ( Border Radius )
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

CSS3 Oval Köşe ( Border Radius )

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(2909)
RAPOR ET
CSS3 web tasarımda çok güzel özellikler getirmiştir.Bunlardan biride border-radius yani oval köşe bir çok yerde kullanabiliriz bunu.

Hemen kodlara geçelim.
4 köşeyide aynı oranda oval yapmak için kodumuz border-radius
bir örnek yapalım.
.buton{
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
}


4 köşeside 10 px derinlikte oval oldu.Ama biz tek köşe yada 2-3 köşesinine vermek istiyoruz.bunun içinde kodlarımız var.

border-top-left-radius = üst sol köşe
border-top-right-radius =üst sağ köşe
border-bottom-left-radius =alt sol köşe
border-bottom-right-radius =alt sağ köşe

şimdi bununla ilgili bir örnek yapablım.

#buton{
border-top-left-radius:15px;
-webkit-border-top-left-radius:15px;
-moz-border-top-left-radius:15px;
-o-border-top-left-radius:15px;
}


NOT :
css3 de kodları aynısını başına webkit moz o koyarak yazıyoz tarayıcı uyumu için.Yani her css3 kodu nu 4 kere yazıyoz.Bunu yapmazsanız daha sonra tarayıcı uyumsuzlukjları çıkar.

Genel bir örnek yapalım.


<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.kutu1{width:100px;height:100px;background:red;border-radius:25px;-webkit-border-radius:25px;-moz-border-radius:25px;-o-border-radius:25px;}
.kutu2{width:100px;height:100px;background:blue;border-bottom-left-radius:.5em;-webkit-border-bottom-left-radius:.5em;-moz-border-bottom-left-radius:.5em;-o-border-bottom-left-radius:.5em;border-top-right-radius:30px;-moz-border-top-right-radius:30px; -webkit-border-top-right-radius:30px; -o-border-top-right-radius:30px; }
</style>
</head>
<body>
<div class="kutu1"></div>

<div class="kutu2"></div>

</body>
</html>



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol