CSS3 beraberinde getirdiği yeniliklerle Web tasarımı açısından birçok kolaylık sağlamıştır. Tasarımcıların işini kolaylaştıran bu özellikler görsel açıdan daha güzel Web tasarımına olanak sağlamıştır.
CSS3 ile gelen yenilikler Google Chrome, Mozilla Firefox, Opera ve Internet Explorer 9 gibi tarayıcılarda desteklenmektedir.
CSS3 ile gelen başlıca yenilikler aşağıdaki gibi listelenebilir:
1) Border Özellikleri
a) border-color
Bu özellik sayesinde seçilen elementin istenilen kenarı renklendirilebilir.
Css kodu:
#style1 {
width:80px;
height:40px;
border:3px solid;
border-bottom-color:#000;
border-right-color:#009;
border-top-color:#093;
border-left-color:#F00;
}
Html kodu:
<div id=”style1”></div>
Ekran çıktısı:
Burada <border-bottom-color> alt taban kenar rengini, <border-right-color> sağ kenar rengini, <border-top-color> üst kenar rengini ve <border-left-color> sol kenar rengini belirlenmesini sağlayan kodlardır.
b) border-radius
Bu özellik sayesinde seçilen elementin kenarları oval yapılabilir. <border-radius> değeri ovalliğin yarıçapının uzunluğunu piksel olarak belirler.
Css kodu:
#style2 {
width:80px;
height:40px;
background-color:#09F;
border:1px solid #03F;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
}
Html kodu:
<div id=”style2”></div>
Ekran çıktısı:
Burada <border:1px solid #03F;> kodu ile kenarın kalınlığı 1 piksel olarak belirlenmiştir.
<border-radius:5px;> değeri ile kenara 5 piksel yarıçapında bir eğrilik kazandırılmıştır. Burada dikkat edilmesi gereken <-webkit-border-radius> ve <-moz-border-radius> ifadeleridir. Tarayıcıların farklılık göstermesi yazılan kodları da farklılaştıracaktır.
Aşağıda farklı tarayıcılar için kullanılacak ifadeler gösterilmiştir:
Chrome ve Safari için:<-webkit-border-radius>
Firefox için:<-moz-border-radius>
Opera ve İnternet Explorer 9 için:<border-radius>
•border-radius: değer; tüm köşelerinin "değer" kadar yuvarlanmasını sağlar.
•border-radius: değer1 değer2 değer3 değer4;
değer1: sol üst köşe
değer2: sağ üst köşe
değer3: sağ alt köşe
değer4: sol alt köşe olacak şekilde yuvarlar.
•border-top-left-radius: değer; (üst sol köşe)
•border-top-right-radius: değer; (üst sağ köşe)
•border-bottom-left-radius: değer; (alt sol köşe)
•border-bottom-right-radius: değer; (alt sağ köşe)
Css kodu:
#style3 {
height:40px;
width:80px;
background-color:#09F;
border:1px solid #03F;
border-radius:5px 8px 11px 14px;
-webkit-border-radius:5px 8px 11px 14px;
-moz-border-radius:5px 8px 11px 14px;
}
Html kodu:
<div id=”style3”></div>
Ekran çıktısı:
Bu örnekte seçilen elementin farklı köşeleri farklı derecelerde yuvarlanmıştır.
Aşağıda CSS3 ile birlikte gelen border-radius özelliği ile yapılmış birkaç örnek gösterilmektedir.
Css kodu:
#Ornek_A {
text-align:center;
color:#fff;
background-color:#666666;
height: 70px;
width:160px;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
}
#Ornek_B {
text-align:center;
color:#fff;
background-color:#666666;
height: 70px;
width:160px;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
}
#Ornek_C {
text-align:center;
color:#fff;
background-color:#666666;
height: 70px;
width: 70px;
-moz-border-radius: 35px;
border-radius: 35px;
}
Html kodu:
<table border="0" cellspacing="20" cellpadding="20">
<tr>
<td valign="middle"><div id="Ornek_A"><br />A</div></td>
<td valign="middle"><div id="Ornek_B"><br />B</div></td>
<td valign="middle"><div id="Ornek_C"><br />C</div></td>
</tr>
</table>
Ekran çıktısı:
2) Background Özellikleri
a) background-origin
Bu özellik sayesinde bir elemente atadığımız arka planın konumunu belirlenebilir. <background-origin> değeri arka planın konumu belirler.
Css kodu:
#style4 {
width:200px;
border:2px solid #000;
padding:35px;
background-image:url('resim.jpg');
background-repeat:no-repeat;
background-position:left;
background-origin:border-box;
}
Html kodu:
<div id=”style4”>Örnek</div>
Ekran çıktısı:
Burada görüldüğü gibi arka plan olarak atanan resim.jpg resmi <background-origin> değeri border-box olduğu için kenarlıkla bitişik olarak görülmektedir.
CSS Kodu:
#style5 {
width:200px;
border:2px solid #000;
padding:35px;
background-image:url('resim.jpg');
background-repeat:no-repeat;
background-position:left;
background-origin:content-box;
}
Html kodu:
<div id=”style5”>Örnek</div>
Ekran çıktısı:
Burada görüldüğü gibi arka plan resmi <background-origin> değeri border-box olduğu için elementin içeriğinin başladığı pozisyondan başlayacaktır.
b) background-size
Bu özellik sayesinde bir elemente atanan arka planın boyutlandırılması yapılabilir.
Css kodu:
#style6 {
width:550px;
height:250px;
background-color:#CCC;
background-image:url('resim.jpg');
background-size:auto;
}
#style7 {
width:550px;
height:250px;
background-color:#CCC;
background-image:url('resim.jpg');
background-size:275px 125px;
background-repeat:no-repeat;
}
Html kodu:
<div id=”style6”></div><br/><div id=”style7”></div>
Ekran çıktısı:
Yukarıda üstteki görüntüde style6’nın background-size:auto; değerini aldığı görülmektedir. Böylece bulunduğu elementin içerisini tamamen dolduracak şekilde gözükmektedir. Alttaki görüntüde ise background-size:275px 125px; değerini almaktadır ve arka plan resmi buradaki değerlere göre boyutlandırılmaktadır. Burada girilen ilk değer (275px) arka plan resminin genişliğini belirlerken girilen ikinci değer (125px) yüksekliğini belirler.
CSS Kodu:
#style8 {
width:550px;
height:250px;
background-color:#CCC;
background-image:url('resim.jpg');
background-size:200px auto;
background-repeat:no-repeat;
}
Html kodu:
<div id=”style8”></div>
Ekran çıktısı:
Bu örnekte <background-size> değerinin genişliği 200px, yükseklik değeri ise auto olarak belirlenmiştir. Burada tarayıcı arka plan resminin genişliğini 200px olarak ayarlarken yüksekliği resmin oranını bozmadan otomatik olarak ayarlamaktadır. Bu örnek background-size:auto 200px; olarak da değiştirilebilir. Bu durumda arka plan resminin yüksekliği 200px olurken, genişlik değeri auto olduğu için tarayıcı tarafından ayarlanacaktır.
3) Color Özellikleri
a) opacity
Bu özellik sayesinde elementin renginin tonunu değiştirmek mümkündür. RGB(red,green,blue) renk sistemiyle kırmızı, gri ve mavi renklerinin farklı oranlarda birleşmesi sonucu farklı renkler üretilmektedir. <opacity> özelliği sayesinde bu işlem basit bir şekilde gerçekleştirilebilir.
Css kodu:
#renk1a { background: rgb(255, 0, 0) ; opacity: 0.2; }
#renk2a { background: rgb(255, 0, 0) ; opacity: 0.4; }
#renk3a { background: rgb(255, 0, 0) ; opacity: 0.6; }
#renk4a { background: rgb(255, 0, 0) ; opacity: 0.8; }
#renk5a { background: rgb(255, 0, 0) ; opacity: 1.0; }
#renk1b { background: rgb(243, 191, 189); }
#renk2b { background: rgb(246, 143, 142); }
#renk3b { background: rgb(249, 95 , 94); }
#renk4b { background: rgb(252, 47, 47); }
#renk5b { background: rgb(255, 0, 0); }
Html kodu:
<table width="200" border="0" cellspacing="0" cellpadding="0" style=”color:#fff;”>
<tr>
<td width="40" id=”renk1a” height="40">1a</td>
<td width="40" id=”renk2a”>2a</td>
<td width="40" id=”renk3a”>3a</td>
<td width="40" id=”renk4a”>4a</td>
<td width="40" id=”renk5a”>5a</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="40" id=”renk1b”>1b</td>
<td id=”renk2b”>2b</td>
<td id=”renk3b”>3b</td>
<td id=”renk4b”>4b</td>
<td id=”renk5b”>5b</td>
</tr>
</table>
Ekran çıktısı:
Şekilde görüldüğü gibi ilk satırdaki renkler tanımlanan CSS kodlarında aynı(rgb(255, 0, 0)) fakat <opacity> değerleri farklı olduğu için tonlarda farklılık oluşmuştur. Alt satırdaki renklendirme tamamen RGB renk sistemiyle yapılmıştır. Bu örnekte <opacity> özelliğinin sağladığı kolaylık açıkça görülmektedir. Yine görüldüğü üzere <opacity> değeri arttıkça rengin tonu giderek koyulaşmaktadır. <opacity> maksimum 1.0 değerini alır ve bu değer o rengin orijinal halini gösterir.
<opacity> özelliği resim dosyalarına da uygulanabilmektedir.
Css Kodu:
#img1 { opacity: 0.4; }
#img2 { opacity: 1.0; }
Html kodu:
<img src=”resim.jpg” id=”img1”/><br/><img src=”resim.jpg” id=”img2”/>
Ekran çıktısı:
Css kodu:
#buton {
background:#03F;
color:#FFF;
text-align:center;
padding:5px 0px 5px 0px;
width:60px;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
}
#button:hover { opacity:0.4; }
Html kodu:
<div id=”buton”>Düğme</div>
Ekran çıktısı:
Fare ile elementin üzerine gelindiğinde ekran çıktısı;
Yukarıdaki örnekte CSS3 ün getirdiği yeniliklerle göz alıcı bir düğme yapılmıştır. Düğmenin üzerine fare ile gelindiğinde saydamlığın değiştiği görülmektedir. Bu örnekte ayrıca <border-radius> özelliği de kullanılmıştır.
4) Transition Özelliği
<transition> : <değer1> <değer2> <değer3> <değer4>;
değer1: Buraya girilen değer ile elementin hangi özelliğinin değişeceği belirlenir. Alabileceği değerlere örnek verilirse; background-color, color, width, margin, padding vs. Yani bu değer herhangi bir CSS değeri alabilmektedir.
değer2: Buraya girilen değer ile değişim süresi belirlenir ve birimi saniyedir. Örneğin; 3s.
değer3: Buraya girilen değer ile değişimin tipi belirlenir. Alabileceği değerler; ease, linear, ease-in, ease-out, ease-in-out.
değer4: Buraya girilen değer işlemin gecikme süresini belirler(delay) ve birimi saniyedir. Örneğin; 3s.
<transition> kodunun tarayıcılara göre yazım kuralı şöyledir:
Chrome ve Safari için:<-webkit-transition>
Mozilla için:<-moz-transition>
Opera için:<o-transition>
Standart CSS3 kodu:<transition>
Css kodu:
#style9 {
width:60px;
height:60px;
background-color:#0033CC;
transition:width 2s linear 0.5s;
-webkit-transition:width 2s linear 0.5s;
-moz-transition:width 2s linear 0.5s;
-o-transition:width 2s linear 0.5s;
}
#style9:hover { width:200px; }
Html kodu:
<div id=”style9”></div>
Ekran çıktısı:
Fare ile elementin üzerine gelindiğinde ekran çıktısı;
Burada elementin üzerine fare ile gelindiğinde genişliği <60px> den <200px> e genişlerken lineer bir şekilde değişecektir.
Css Kodu:
#style10 {
width:60px;
height:60px;
background-color:#009933;
margin-left:0px;
border-radius:5px;
transition:margin-left 3s linear, background-color 2s ease 3s;
-webkit-transition:margin-left 3s linear, background-color 2s ease 3s;
-moz-transition:margin-left 3s linear, background-color 2s ease 3s;
-o-transition:margin-left 3s linear, background-color 2s ease 3s;
}
#style10:hover {
margin-left:100px;
background-color:#FF0000;
}
Html kodu:
<div id=”style10”></div>
Ekran çıktısı:
Fare ile elementin üzerine gelindiğinde ekran çıktısı;
Burada elementin üzerine gelindiğinde <margin-left> değeri 0px den 100px e çıkmaktadır. Yani elementin sol kenarının bir dışta bulunan elementin sol kenarına olan uzaklığı 0px den 100px e çıkmaktadır. Bu işlem <transition> özelliği sayesinde 3 saniye içerisinde lineer bir hız ile gerçekleştirilmektedir. Yine elementin üzerine gelinmesinden 2 saniye sonra ve 3 saniye gecikmeli olarak <background-color> değeri yeşilden kırmızıya <ease> olarak değişmektedir. Bu örnekte <transition> özelliğinin multi(çoklu) olarak da yapılabileceği görülmektedir.
5) Web fonts Özelliği
<font-face> özelliği ilk olarak CSS2 de kullanılabilir hale getirilmiştir. Bu özellik Internet Explorer 5 sürümünden itibaren kullanılmıştır. Fakat CSS2 sürümünde yazı stilleri tescilli olan Embedded Open Type(.eot) formatlarını desteklemekteyken, CSS3 ile birlikte açık kaynak yazı stilleri olan OpenType(.otf) formatları kullanılabilir hale gelmiştir.
Örnek:
Css Kodu:
@font-face { font-family:Delicious; src: url(Delicious-Roman.otf); }
#style11 {
font-family:Delicious;
font-size:24px;
font-weight:bold;
}
Htlm kodu:
<div id=”style11”>Delicious-Roman Yazı Stili</div>
Ekran çıktısı:
