Tantek ?

Bugün rastgele internette dolaşırken CSS3 ile ilgili yakında yeni açacağım blog siteme bir taslak hazırlayayım dedim ve http://www.w3.org sitesine girdim. CSS3'ün spesifikasyonlarından bazılarını Tantek Çelik isminde birinin yazdığını gördüm ve şaşırdım. Tantek değil ama Çelik isminden bir Türk olduğunu anladım ve gerçekten heycanlandım. Gerçekten çok da mutlu oldum. Biyografisi ile ilgili biraz araştırma yaptım ve ileri de gerçekten karşılaşmayı isteyeceğim birisi :)

CSS3 ve Getirdikleri

CSS(Cascading Style Sheets) yani stil şablonları -eğer temel seviyede basit bir websitesi istemiyorsanız- web tasarımcılığının tabiki de vazgeçilmez bir unsurudur. Kısa adıyla CSS bir websayfasının noktasından tablosuna kadar şekillendirilmesi ve bunların bütün tarayıcılarda aynı şekilde görünmesini büyük ölçüde sağlar. ( "büyük ölçüde sağlar", çünkü hala Internet Explorer'da zirvenin verdiği rahatlıkla desteklenmeyen CSS kodları vardır. Özellikle kullanımı hala yaygın olan IE6, web tasarımcılarının bu konuda en çok başını ağrıtan konulardan olmuştur. ) İnternetin görsellik tarihi CSS'in olduğu ve olmadığı tarih olarak ikiye ayrılır benim için. Çünkü CSS'in şu an getirdiği bunca kolaylık, -bilindiği takdirde- size resmen elle resim çizer gibi websitesi yapma imkanı tanıyor. Websitesinin genel şablonunu tek bir dosyadan kontrol etme olanağı sunan CSS ile insanlar eskisi gibi sitelerinde bir şey değiştirmek için tek tek dosyalarını düzenlemek zorunda kalmıyor.

CSS2'nin getirdiği özelliklerin üzerine geliştiriciler CSS3 ile daha da göze hitab eden ve kullanışlı özellikler eklemişler. Aşağıda sıralayacağım yeni özellikleri, elimden geldiğince sizlere anlatmaya çalışacağım;

{Not: Microsoft'un duyurduğu kadarıyla IE9, CSS3 desteği ile karşımıza çıkacak. Bknz}

Borders

* border-color=Bu özellik ile "border"larınıza soluklaşan renkler verme imkanınız var. IE8 daha eklenmeyen bu özellik bildiğim kadarıyla şu an sadece Firefox'ta çalışmaktadır.

Tarayıcınızın bu kutuların çerçevelerini soluklaşan renkte görmelidir.

Tarayıcınızın bu kutuların çerçevelerini soluklaşan renkte görmelidir.

* border-image= Tablo sınırlarınızı bundan sonra düz çizgiler halinde tanımlamak zorunda kalmadan motifli şekiller vermenizi sağlayan bir özellik.Safari ve Firox 3.1+ tarayıcılarında çalışmaktadır. Bknz (Örnek)

* border-radius= CSS2 ile bir tablonun kenarını yuvarlamak için yazdığımız onca koda bu özellik ile son verilmiş oluyor.

Safari 3 ve Firefox kullanıcıları bu özelliği görebilmektedir.

Daha fazla örnek için: bknz.

* box-shadow= Bu kod ile kutularınıza rahatlıkla gölge eklyebilirsiniz.Örnekler için: bknz.

Backgrounds

* background-origin and background-clip= background-origin ile arkaplanınızın, verdiğiniz numaralar orantısında sayfanın ya da tablonun neresinde durmasına karar verebiliyorsunuz. Bunu vereceğiniz üç değerle kontrol edebiliyorsunuz.

border-box -> Buraya vereceğiniz değerle arkaplanınızı hizaladığınız kutunun köşesine, border altında kalacak şekilde koyar.
padding-box -> Buraya vereceğiniz geğerle arkaplanızın yine hizaladığınız kutunun köşesine gitmesini sağlarsınız; fakat bu sefer farklı olarak border dayalı olur, altına girmez.
content-box -> Bunu kullandığınızda ise hizaladığınız kutunun içerisinde istediğiniz yere koyabiliyorsunuz.


Bknz

* background-size= Kodun kendisinden de anlaşılabileceği gibi arkaplanınıza istediğiniz boyutu verebiliyorsunuz.

Bknz.

* multiple backgrounds= Bu kod ile ortak alanda birden fazla arkaplan kullanabilirsiniz.

background: url(body-top.gif) top left no-repeat,
url(banner_fresco.jpg)  top 11px no-repeat,
url(body-bottom.gif) bottom left no-repeat,
url(body-middle.gif) left repeat-y;

Bknz.

Color

* HSL colors= Yeni bir renklendirme seçeneği.

H (Hue) -> Renk açısı. 0-360 arası değişir.(Örneğin; 0 ya da 360 kırmızı, 120 yeşil, 240 mavi. Renk açılarını için: bknz.)
S (Saturation) -> Renkteki yüzdeliği ifade eder. (Doygunluk)
L (Lightness) -> Renginizin ne kadar koyu ya da açık olmasını belirtmenizi sağlar.

Bknz.


* HSLA colors= RGBA bir RGB olduğu gibi HSLA da bir HSL renklendirmedir. Bu bize alpha kanalı sayesinde soluklaşan bir renk kümesi oluşturmamızı sağlar.

Bknz.

* opacity= Adında anlayacağınız gibi bu özellikten eminim pek çok tasarımcı hoşlanacaktır.

Bknz.

Devamı...