CSS3 ve güzellikleri

CSS3 kulislerde konuşula dursun, tasarımcılar CSS3′ün getirdiği
yeniliklerle gelen kolaylıkları kullandıkları günü hayal etmeye devam
ediyorlar. Gerçi CSS ve tasarımcı dostu tarayıcımız Firefox bazı yeni
özellikleri şimdiden getirmiş olsa da (örneğin: CSS3 ile gelecek olan
border-radius özelliğini moz-border-radius olarak Firefox’ta şimdiden
kullanabiliyoruz), en azından sorunlu ‘tarayıcımız’ Internet Exporer’ın
da bu özellikleri anlayabileceği gün için biraz daha beklememiz
gerekiyor.
Peki nedir bu yeni özellikler? Aslında hepimiz bir çoğunu uzun
zamandan beri kullanmamıza rağmen, kullanabilmek için ‘bin dereden su
getiriyoruz’. Haydi, ileriki günlerde sahip olacağımız bu özelliklerden
bazılarına beraber göz atalım.
Resimleri kenar olarak atama (border-image)


CSS3 ile öğelere atadığımız kenarlıklara (border) pek güzel
yenilikler geliyor. Bunlardan biri ‘border-image’. Bu yeni ve hoş
özellik ile istediğimiz herhangi bir resmi öğelere kenarlık olarak
atayabiliyor, yüksekliklerini belirleyebiliyoruz.

Yukarıdaki örnekte olduğu gibi, CSS’in 3. versiyonu ile istediğimiz bir resmi herhangi bir öğeye kenarlık olarak atayabileceğiz.
Kenar köşelerini ovallaştırma (border-radius)


CSS3 ile gelen muazzam yeniliklerden biri de öğenin kenarlıklarını
ovallaştırma özelliği. Bu özellik ile herhangi bir öğenin istediğimiz
bir kenarını ovallaştırma şansına sahip olacağız.
Tarayıcımız Firefox, bu özelliğe şimdiden alışmamız için şimdiden
kısmen destekliyor bile. Özelliği aşağıdaki gibi kullanmamız mümkün:

1. .isim { border: 1px solid #333; -moz-border-radius:10px; }
   
2. .isim2 { border:1px solid #000; -moz-border-radius-topleft:10px; -moz-border-radius-bottomright:10px; }
   

Kenarlara birden çok renk atama (border-color)


Aşağıdaki örneği görebilmek için Firefox tarayıcısını indirin!Hiç de fena görünmüyor değil mi?

Gördüğünüz gibi, CSS3′ün farklı ve pek yararlı bir özelliği de,
örneğin 8 piksellik bir kenarın her pikseline istediğimiz rengi
verebilmemiz. Bu özelliğin yardımıyla rengarenk kenarlar
oluşturabileceğiniz gibi, rengi pikselden piksele açarak artalan
efektli kenarlar oluşturabilirsiniz.
Tarayıcımız Firefox ile bu özelliği aşağıdaki kullanım şekliyle şimdiden kullanmanız mümkün;

1. .isim { border: 6px solid #000; -moz-border-top-colors: #555 #666 #777 #888 #999 #000 ; }
   

Arkaplan boyutunu belirleme (Background-size)


CSS3 ile gelen yenilikler tabii ki sadece kenarlık cephesinde değil.
Yeni ve yararlı özelliklerden bir diğeri ise arkaplan boyutunun
belirlenebilmesi.
Bu yararlı özelliğin yardımı ile, örneğin 100×100 piksel boyutlarındaki
bir resmi, 50×50 pixel boyutlarında arkaplan olarak atamanız mümkün
olacak.
Kullanabilmek için biraz beklememiz gerekecek olan özelliği ileriki zamanlarda şu şekilde kullanacağız;

1. .isim { background-size: 200px 50px; background:#333; }
   

Birden fazla arkaplan


Bu pek güzel özellik ile, herhangi bir öğeye birden fazla arkaplan
öğesi ekleyebilme şansına sahip olacağız. Arkaplanları ise arada virgül
(,) kullanarak belirleyeceğiz.

1. .isim { background:url(‘birinciresminadresi’) no-repeat left, url(‘ikinciresminadresi’) no-repeat right; }
   

Renk opaklığını belirleme (Opacity)


Diğer bir muazzam özellik ise, herhangi bir öğeye atadığımız rengin transparanlık oranını belirleyebilmemiz.

Özelliğin yardımıyla, herhangi bir grafik işleme programında bolca
kullandığımız ‘Alpha’ veya ‘Transparency’ özelliğini CSS üzerinden
istediğimiz öğeye atayabileceğiz.
Metinleri birden fazla sütuna paylaştırma


Bu muazzam özelliğin yardımıyla, herhangi bir metni birden fazla sütuna paylaştırabileceğiz.
Aşağıdaki örneği görebilmek için Firefox tarayıcısını indirin!Tarayıcımız
Firefox’un ‘-moz-’ kullanımıyla desteklediği özelliğin yardımı ile,
istediğimiz bir metni sütunlara dağıtabiliyoruz. Sütunları istediğimiz
bir genişlik ile belirleyebileceğimiz gibi, herhangi bir sütun sayısı
ile de belirleyebiliyoruz.

1. .isim { width:300px; -moz-column-count: 2; -moz-column-gap: 10px; }
   
2. .isim2 { width:300px; -moz-column-width: 140px; -moz-column-gap: 10px; }
   

Yukarıdaki örnek kodlarda dikkatinizi çekmiş olan ‘-moz-column-gap’ ile sütunların arasındaki boşluğun genişliğini belirliyoruz.
3. versiyon CSS’in getireceği bazı güzelliklerden bahsettik. Bu
özelliklerin ne zaman gelecekleri ve tarayıcıların (özellikle Internet
Explorer’ın) ne zaman tam olarak destekleneceğini tam olarak bilemesek
de, geldikleri zaman işe yarayacak olan özellikler olacaklarını görmüş
olduk.