CSS3 nedir? ne işe yarar?

CSS3’ün gelmesi birçok yeniliği beraberinde getireceğe benziyor. Çoğu kullanıcının hali hazırda duymuş olmasına rağmen henüz tüm tarayıcılar tarafından desteklenmediği için çok fazla gözle görülür örnek yok. Var olan örneklere aşağıda değinmeden önce göze çarpan en önemli özelliklerden biri tasarım yaparken neredeyse artık resim kullanmayacağımız olması. İstediğimiz çoğu şeyi CSS3 sayesinde yapıyor olacağız. Mesela menü butonları yaparken resim kullanırız çünkü oval yada kenarlı falan yapmak isteriz bu yüzden CSS kendisi yeterli gelmez. Resim kullanmakta takdir edersiniz ki çok fazla siteyi yorduğu için en azından CSS’e nazaran, CSS3 bu açıdan çok işlevsel olacağa benziyor. Hatta internette gördüğüm yorumlardan biriside photoshopla kapışacak seviyeye geleceğinden bahsetmişlerdi. Örneklere geçersek;

Rounded Corners ( Oval köşe yapımı)
Web tasarımında oval köşe kullanımı çok yaygındır. Malasef CSS3 öncesine kadar bu işlemi resim kullanarak yapıyorduk. Bu da siteye ekstra bir yoğunluk katıyor, sayfaların boyutları büyüyor ve sitenin geç açılmasına sebep oluyordu.

CSS’de border-radius özelliğini kullanarak kolaylıkla oval köşe oluşturabilirsiniz. Tabi bunun Webkit tarayıcılarda ve firefox’da çalışabilmesi için -moz-border-radius ve -webkit-border-radius kullanmamız gerekmektedir.

.rounded-corners {
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
}

Shadows (Gölge efekti verme)
Website hazırlarken gölge efekti vermenin ne kadar zor olduğunu hatırlarsınız? Box-shadow özelliği ile birlikte gölgeli kutular yapmak artık çok kolay!

CSS’de ise text-shadow özelliğini kullanarak birşeyler yapmaya çalışıyorduk. Şimdi box-shadow özelliğinin nasıl kullanıldığını görelim

box-shadow: 1px 1px 7px #2D1D1D;

Sizinde göreceğiniz üzere 4 farklı değer alıyor. bunlardan ilki yatay derinliği, ikincisi dikey derinliği, üçüncüsü ise gölge derinliğini ve son olarak sonuncusu ise gölgenin rengini tanımlar.
Border-radius özelliğinin kullanımında olduğu gibi , burada da -moz ve -webkit- önekleri kullanmamız gerekiyor.

box-shadow: 1px 1px 12px #2D1D1D;
-moz-box-shadow: 1px 1px 12px #2D1D1D;
-webkit-box-shadow: 1px 1px 12px #2D1D1D;

Transparency with RGBA and Opacity (RGBA ve Saydamlık verme)
Saydamlık değerlerine bakacak olursak 0 ile 1 arasında değer alabildiğini görürüz. Eğer 0 olursa tamamen şeffaf eğer 1 olursada tamamen saydam olmayan elde edilmiş oluyor. Örnek verecek olursak da kutuyu yarı saydam yapmak istiyorsak %50 şeffaflık vermek istiyoruz ki bu da 0.5’e tekabül eder. Şu şekilde yazılır;

opacity: 0.5;

Peki ya artalan resmini saydam yapmak istiyorsam ne olacak? Meraklanmayın RGBA ile yapabilirsiniz!

RGB CSS’in zaten eski versiyonlarında kullanılıyordu. Sırasıyla red (kırmızı), green (yeşil), blue (mavi) değerlerini alıyordu. RGBA ise A ile genişletilmiş hali olup A ise alpha’dan geliyor manasıda şeffaflık. Şu şekilde kullanabilirsiniz;

background: rgba(156, 87, 88, 0.5);

Kutunun rengi falan aynı kalıyor, sadece bu özellik artalan resmine etki ediyor. Ayrıca gölge efekti de saydamlıktan etkilenmiyor.

Border Images (Kenarlık Resimleri)
Border images özelliği CSS3’ün yeni özelliklerinden biri. Eskiden kenarlık yapmak istediğimizde resim kullanıyorduk ama CSS3 sayesinde istediğimiz şekilde yükseklik, genişlikler verebileceğiz. Kullanımı hakkında dah fazla bilgi almak isterseniz Border-image: using images for your border adlı yazıyı okuyabilirsiniz.

Bu yazımızda çok az örnekten bahsedebildik, ama bunlar sayesinde çok güzel şeyler ortaya çıkabilir. CSS3 bize daha fazlasını sunmaktadır, deneyin siz de neler yapabileceğinizi göreceksiniz.
Kaynak

Leave a Reply

Your email address will not be published. Required fields are marked *