Web Teknolojileri Giriş – CSS3

CSS3 nam-ı değer CSS ailesinin en son üyesi, en genç üyesi ve en gelişmiş versiyonu. CSS3 yıllardır geliştirilen CSS1 ve CSS2 versiyonların üstüne çok fazla yenilikle ve mantıkla hayatımıza katıldı. Bir önceki yazım olan Web Teknolojileri Giriş – HTML5 ile birleştirildiğinde tadından yenmeyen içerikler ve görsellikler oluşturmanızı sağlayan stil şablon teknolojisi. Evet o da bir web teknolojisi üyesi.

CSS3 Nedir?

Şu an için en gelişmiş “Cascading Style Sheets” yani Türkçesi Basamaklı Stil Şablonudur. Önceki versiyonlarının güçlü taraflarının yanı sıra @media-queries, box-shadow, translate, transition gibi yeni özellikleri getirmiş bir teknolojidir. Makalenin devamında bunları inceleyeceğiz.

CSS3 hangi yenilikleri getirdi?

Adı üstünde stil şablonu olan bu teknoloji ile öncelikle mobil tasarımda ve görsellikte çığır açmayı ve özgürleşmeyi sağlayan seçici tanımları geldi. CSS seçiciler olmadan pek bir işe yaramayan bir teknolojidir. HTML sayfası içerisinde class ve id kullanarak ya da HTML5 ile gelen header,section,footer,aside gibi seçiciler ile birlikte kullanılmaktadır. Tasarımsal geçişlerin sağlandığı kodlar ile birlikte flash gibi artık açıklarından dolayı tehlikeli içeriklere mahal veren teknolojiler kullanılmaya gerek kalmamıştır.

Yeni gelen tanımlardan başlayarak anlatmaya devam edelim

@media-queries

Aslında başlıktaki gibi değil de @media olarak kullanılan bu teknoloji, öncelikle responsive yani mobil uyumlu sayfaların oluşturulmasında kullanılmaktadır.

Yukarıda görmüş olduğunuz kod ekran boyutu 480px ya da daha büyük ise arkaplan rengini açık yeşil renge döndürmek için kullanılır. Bu kodu çoğaltarak ya da screen alanı yerine başka değerler kullanarak belirli boyutlar arası değişik css atamaları yapabilirsiniz. Bunun için jQuery gibi teknolojiler kullanmanıza artık gerek yok.

transition

Bu da CSS3 içerisine yeni katılmış olan bir teknoloji. Adının tam Türkçe’ye çevrimi “geçiş” yani efekt olarak kullanılabilecek kabiliyetlerin ekstra programlamaya ya da flash teknolojisine gerek kalmadan buton gibi elemanlara uygulanması anlamına geliyor.

See the Pen flipster by Serkan Algur (@kaisercrazy) on CodePen.


Yukarıdaki örnek en kolay transition kullanımlarından. Buton üstüne gelince sağ tarafı kıvrılıyormuş gibi bir efekt oluşuyor.

@keyframes

İşte benim en sevdiğim tanım. Elemanların efekt olarak ileri geri, köşeden köşeye ya da istediğiniz şekilde tekrar eden ya da bir kere çalışan şekilde hareketlenmesini sağlayan animasyon altyapısı.

See the Pen CSS3 Heart by Tamer Aydn (@tameraydin) on CodePen.


Örnek üzerine tıklayarak atan kalbe ulaşabilirsiniz. Kodları inceleyebilirsiniz.

Flexbox Modelleme

Grid sisteminden sonra en büyük CSS3 yeniliği olarak görülebilir. Flexbox altyapısı sitenizin tasarımsal özelliklerinin -ki grid yerleşimi buna dail- web tarayıcısı tarafından derlenmesi ve esnek altyapı kullanarak elemanları sağa sola yaslamak için uğraşmanıza gerek kalmayan flex kapsayıcısının kullanılmasını sağlamaktadır.

See the Pen Gettin’ Flexy by GRAY GHOST (@grayghostvisuals) on CodePen.

Yukarıdaki örnek ise bize flexbox ile kutu yerleşimlerini göstermektedir (Temel olarak tek sayfa bir web sitesi flexbox ile yapılmış). CSS alanını açarak kodların sadeliğini görebilirsiniz.

CSS3 ile birlikte gelen çok fazla özellik bulunmakta. Tümünü anlatmak için size bir ansiklopedi oluşturmam gerekmekte. Bunun için sizi w3c resmi sayfasındaki tanımlara alıyorum. Bu linke tıklayarak ilgili alandan daha fazla bilgi ve örnek alabilirsiniz.

Dip Not: CSS3 Internet Explorer 8-9 tarafından desteklenmemektedir 🙂

Serkan Algur

WordPress ve Web üzerine makaleler yazan ve "yazılımcıyım" diye ortada dolanan bir deli :) Birkaç ay içinde taze baba :D

Bir Cevap Yazın