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>
UstaDerslik
