CSS 3.0 merakla bekleniyor ancak, popüler tarayıcıların yeni versiyonları desteklemesine rağmen, Internet Explorer’ ın yeni versiyonunun CSS 3.0 özelliklerini tam olarak desteklemeye yanaşmaması CSS 3.0 a geçişi oldukça yavaşlatıyor.

Bizi uzun zamanlar uğraştıran division ların ya da tabloların kenarlarına vermek istediğimiz kıvrılmaları (radius) CSS 3.0 ile yapmak mümkün .

Bunun yanında şu ana kadar büyük eksiklik olarak düşündüğüm bordera resim ekleme özelliği de mevcut.

Evet border’ a resim ekleyebiliyoruz. Bu özellik bizim işimizi oldukça kolaylaştıracak. Div ya da tablo çevresine birden fazla renk vererek her piksel için renkli bir kenarlık elde edebiliriz.

(border-image) Resimlerimiz kenar olarak belirleme

Border-image özelliği ile öğelerimizin kenarlıklarına resim atayabiliriz.

(border-radius) Kenar Köşelerini Yuvarlama

Border-radius özelliği ile öğelerimizin kenarlıklarını yuvarlama yapabiliriz. Ayrıca istediğimiz bir kenarı yuvarlamamız mümkün…

Border-color Her piksel için farklı bir renk

Border-color ile her piksel için farklı bir renk verebiliriz. Böylelikle çok renkli kenarlıklar elde etmemiz mümkün…

Örnek kod:/

.border{border:4px solid #666; -moz-border-top-colors:#777 #444 #111 #000;}

Yapılan tasarımlar artık daha çok canlılık kazanacak ve eklediğimiz CSS bize oldukça kolaylık sağlayacak.

Diğer eklenen özelliklerden bir tanesi eklen bir rengin transparanlık (opacity) derecesini derecesini ayarlayabileceğimiz sanırım bu özellikte sizi heyecanlandırmak için yeterli olacaktır. Tabi bu kadar özellikle yetinmek olur mu diyorsanız hayır yetmez diyenler yazımızın devamını okumaya devam etsin…

Arka plan (background) ile ekstra eklenen özellikler gerçekten işimizi kolaylaştıracak arka planın boyutunu ayarlama ve birden fazla arka plan eklememize olanak sağlıyor.

(Background-size) Arka plan boyutlandırma

CSS 3.0 bize arka planda boyutlandırma ihtiyacımızı karşılayacak özellikleri eklemesi ile 300px X 400px lik bir resmi arka plana 200px X 300px boyutlarına getirmemize imkan sağlıyor.

Örnek kod:/

.arkaplan { background-size: 200px 300px; background:url(back.jpg); }

Birden Fazla Arka Plan Resmi Ekleme ( Multiple Background)

Öğelerimize sadece bir tane değil daha fazla arka plan ekleyebiliriz. Ekleyeceğimiz arka planları "," (virgül) işareti ayırarak yazabiliriz.

Örnek kod:/

.arkaplan{ background:url('ilkresim.jpg') no-repeat left, url('ikinciresim.jpg') no-repeat right; }

Transparanlık(opaklık-opacity) Derecesini Ayarlama

Eksiklik diye nitelendirdiğimiz transparanlık derecesi artık mümkün olacak. .PNG ile transparanlık kullanabiliyorduk ama CSS 3.0 ile biz kendimiz renklerimize transparanlık derecesini ayarlayabiliriz. Örnek :/