Css 3 ile yeni gelen özelliklerden biriside oval köşelerdir. border-radius şimdi bu özellik ile sınırlayı zorlayıp neler yapabileceğimizi görelim. örnek olarak html div etiketini kullanıcaz.

Not: Sayfamızdaki örnekleri düzgün göremiyorsanız büyük ihtimalle explorerın eski bir sürümünü veya eski bir tarayıcı kullanıyorsunuzdur.İyi bir tarayıcı edinin!

<div style=”

border:2px solid #940; // örnek olarak biz border ekliyoruz;

border-radius:20px;  // ve tüm köşeler 20px girintili oval

width:200px; //genişlik

height:50px; // yükseklik

“>Grafitr</div>

Css 3 ile oval köşeli daha doğrusu köşesiz kutumuzu yaptık ama tabiki bununla bitmedi

<div style=”

border:2px solid #9c0; // yeşilimsi kenarlık;

border-radius:30px 80px 0 100px ;  // ve tüm köşeler 20px girintili oval

width:100px; //genişlik

height:100px; // yükseklik

“>Grafitr</div>

Css 3 her köşeye ayrı ovallik derecesi verilebiliyormuş demekki bitiremiyorum hala şimdi bunun içine birde başka bir css3 nimeti olan gradiet background eklemeden olmaz;

<div style=”

border:2px solid #9c0; // yeşilimsi kenarlık;

border-radius:30px 80px 0 100px ;  // ve tüm köşeler 20px girintili oval

width:100px; //genişlik

height:100px; // yükseklik

background-color: #9c0; //arkaplanı yeşil yaptık

background-image: -webkit-gradient(linear, right top, left bottom, from(rgba(0,0,0,.35)), to(transparent)); // ve örnek bir gradiet kullanıyoruz…

“>Grafitr</div>

Css 3 ile birde gölge kodunu parlama olarak kullanabiliriz

 

<div style=”

border:2px solid #9c0; // yeşilimsi kenarlık;

border-radius:30px 80px 0 100px ;  // ve tüm köşeler 20px girintili oval

width:100px; //genişlik

height:100px; // yükseklik

background-color: #9c0; //arkaplanı yeşil yaptık

background-image: -webkit-gradient(linear, right top, left bottom, from(rgba(0,0,0,.35)), to(transparent)); // ve örnek bir gradiet kullanıyoruz…

box-shadow:0px 0px 10px #af5; //gölge koduyla fosfor gibi birşey yaptık.

“>Grafitr</div>

Tabi bukadarla bitmiyor ancak kısaca şeklini oluşturmuş olduk burada anlatılmak istenen asıl şey artık her grafik için resim kullanıp sayfalarımızı ağırlaştırmak zorunda değilmişiz demekki  css 3 ün nimetlerinden yararlanıp güncel olmak gerek.