CSS, websitelerini stillemek için iyi bilinen ve geniş kesimler tarafından kullanılan bir dildir. Halen üzerinde çalışılan üçüncü sürümü ile geliştiricilere zaman kazandıracak pek çok özellik CSS’ye dahil edilecektir. Her ne kadar sadece en modern tarayıcılar tarafından bu özellikler desteklense de, yakında geniş kesimler tarafından kullanılabilecek olan bu yeniliklerin neler olduğunu şimdiden görmek güzel. Bu rehberde size CSS3 ile hayatımıza girecek olan 5 tekniği göstereceğim.1: Genel Biçimlendirme
Dersimize başlamadan önce gelin dersimiz süresince kullanacağımız genel biçimlendirmemizi oluşturalım.XHTML’miz için aşağıdaki div elementlerine ihtiyacımız olacak.* #round, CSS3 kodu ile yuvarlak köşeler oluşturmak için* #indie, her biri farklı oranlarda yuvarlak köşeler oluşturmak için* #opacity, CSS3’ün saydamlık ile nasıl başa çıktığını göstermek için* #shadow, Photoshop kullanmadan nasıl CSS3 ile gölge efekti oluşturulabileceğini göstermek için* #resize, elementlerin boyutunu CSS3 ile nasıl değiştirebileceğimizi gösterebilmek için.Bunun için XHTML kodumuz şu şekilde olacaktır:
HTML belgemizde bazı yukarıdaki IDlere sahib bazı DIV elementleri oluşturduk. Şimdi de gelin temel CSS dosyamızı oluşturalım.
Sizin de gördüğünüz üzere tüm div etiketlerine 300px genişlik ve yükseklik atadık. Ayrıca onların her birini kendi soluna yaslayarak (float: left), üzerindeki divlerle oynayabileceğimiz bir sayfa oluşturduk.
2: Yuvarlatılmış Köşeler (Rounded Corners)
Yuvarlatılmış köşeler oluşturmak bazen zor olabilir. İlk olarak imajları oluşturmalı, ardından o imajları arkaplan resmi olarak atayacağımız başka divler oluşturmalı vs… Gerisini biliyorsunuz.Bu problem CSS3 ile, “border-radius” özelliği ile çözülmüş durumda. İlk olarak siyah bir div elementi oluşturacağız ve ona siyah renkli bir sınır atayacağız. Sınır atamamızın sebebi, daha sonra kullanacağımız border-radius özelliğinin işleyebilmesi için gerekli olması.
Bunu da şu şekilde yapacağız:
div‘i oluşturduktan sonra sayfanızı yenileyin (refresh). Şimdi siyah renkli, kare ve yaklaşık 300px genişliğinde ve yüksekliğinde bir div görüyor olmalısınız. Gelin şimdi de yuvarlatılmış köşeler üzerinde çalışalım. CSS3 ile yuvarlatılmış köşeler sadece iki satır kodla oluşturulabilir.
Sizin de gördüğünüz üzere neredeyse birbirinin aynısı olan iki satır ekledik. Aralarındaki tek fark “-moz” ve “-webkit“. -moz Mozilla Firefox’a, -webkit ise Safari/Google Chrome tarayıcları için gerekli.
HTML belgenizi yenileyin ve yumuşak görünümlü yuvarlatılmış köşelerin tadına varın. Şey, yumuşak görünümlü derken aslında sadece ve Firefox ve Safari’de buna ulaşabiliyorsunuz. Google Chrome’da köşelerin biraz daha keskin olduğunu göreceksiniz.Kodumuza geri dönelim, “border-radius“‘un bir değere ihtiyacı var. Bu değer köşenin keskinliğini belirtirken; daha büyük değer ise yuvarlatılmış köşeye işaret ediyor – tıpkı Photoshop’ta olduğu gibi. Bildiğim kadarı ile bu değer için herhangi bir üst sınır bulunmuyor.
3: Birbirinden Bağımsız Yuvarlatılmış Köşeler
Birbirinden bağımsız yuvarlatılmış köşeler, CSS2 ve öncesinde gününüzüm mahvolmasına sebep olabilir. Ne şans ki CSS3 bu sorunu çözüyor.Bu özellik, yukarıdaki ile aşağı yukarı aynı. Yine border-radius değerini kullanıyor, ancak kodumuzu biraz değiştirmemiz gerekiyor:
Kodumuza “topright” ve “bottomright” değişkenlerini dahil ettik; adından da anlaşılacağı üzere bu değerler div elementimizin sağ üst ve sol alt köşelerine işaret ediyor. Bu yeni özellikler ile sekme benzeri görünüme sahip elementler oluşturmanız mümkün.
Yukarıdaki özellikler ile birlikte ayrıca “topleft” ve “bottomleft” özelliklerini de kullanabilirsiniz.
4: CSS3 İle Saydamlığı (Opacity) Değiştirmek
Günümüzde saydamlık efektini oluşturabilmeniz için birkaç satırlık kod yazmanız gerekiyor ve bunlar da genel olarak standart CSS2’nin sunduklarının dışında özellikleri dahil etmek için bazı “hack”ler uygulamak zorunda bırakıyor bizi. Yine CSS3, bu işlemi çok basitleştiriyor.Bu kod satırının hatırlaması çok kolay, sadece “opacity: değer;“. Kolay değil mi?
Kodumuz şu şekilde olacak.
5: CSS3 İle Gölge Efekti Oluşturmak
Photoshop üzerinde gölge efekti oluşturmak için yapmanız gerekenler incir çekirdeğini doldurmaz. Ancak bunu web uygulamalarınıza dahil etmek istediğinizde muhtemelen önce gölgeyi bir imaj olarak kaydetmek isteyecek, ardından onu arkaplan resmi olarak kullanmak isteyeceksinizdir. Daha fazlası değil! (En azından modern tarayıcılar için). Ne yazık ki şimdilik sadece Safari ve Chrome bu özelliği destekliyor.Kod sadece bir satırdan oluşuyor, ancak biraz uzun ve 4 farklı değeri var!
İlk değer için, 3px kullandım. Bu değer gölge ile div elementi arasındaki yatay mesafeyi tanımlıyor. İkinci değerde ise 5px kullandım, bu da kutu ile gölge arasındaki yatay mesafeyi tanımlıyor.
Bir diğer px değeri olan 10px ise gölgenin radyanını (radius – yarıçap) belirliyor. Diğer bir deyişle gölgenin bulanıklığını (blur) ya da onun aşamalı renk değişikiğinin (gradyan – gradient) ne kadar “geniş” olacağını belirtiyor.Son olarak kullandığımız son değer #ccc ise gölgenin rengini belirliyor. Bunun anlamı gölgemiz sadece gri olmak zorunda değil, dilersek #f00 kullanarak kırmızı renkli bir gölgemiz de olabilir.
Tüm yukarıdaki bilgiler ışığında kodumuzun son hali aşağıdaki gibi olacak.
Sizin de gördüğünüz üzere div elementine beyaz arkaplan rengi, siyah sınır ve açık gri gölge ekledim.
6: CSS3 İle Yeniden Boyutlandırmak
CSS’nin en son sürümü ile elementlerin boyutunu değiştirmek mümkün. Şimdilik bu özellik sadece Safari üzerinde çalışıyor.Bu kod ile elementin sağ alt köşesinde küçük bir üçgenin belirmesini sağlamak mümkün. Daha sonra bu üçgeni sürükleyerek elementin boyutunu değiştirebilirsiniz. Kodumuz yine çok basit, sadece bir satır ve halihazırda bildiğiniz bazı elementler tarafından destekleniyor olabilir. Bu değerler “max-width“, “max-height“, “min-width” ve “min-height“.
Kodumuz aşağıdaki şekilde olacak.
Kodumuzda normal CSS’mize iki satır daha kod ekledim: “resize: both” ve “overflow: auto“. Overflow içeren satır, yeniden boyutlandırmanın çalışabilmesi için gerekli ve herhangi bir tür overflow değeri içerebilir, yeter ki kodumuz orada olsun.
Kullandığımız bir diğer satır kod da “resize: both“. Bu satır, elementimizin hem dikey (vertical) hem de yatay (horizontal) olarak (both) yeniden boyutlandırılabilmesinin önünü açıyor.
Sonuç
Bu makaleden ne öğrenmelisiniz? Önümüzdeki birkaç yıl içerisinde işlerimiz çok daha kolay olacak, web sayfaları çok daha hızlı yüklenecek ve ailenizle geçirebileceğiniz daha fazla zamanınız olacak! Her ne kadar şimdilik bu özelliklerin tüm tarayıcılarda doğru olarak çalışacağın beklemek doğru olmaz – ancak bir tarayıcıda yuvarlatılmış köşelerin görünmesi, diğerinde görünmemesinde yanlış olan hiçbir şey yok. Bunu bir yükseltme olarak ele alabilirsiniz.CSS3 ile ilgili daha fazla bilgi almak için www.css3.info sitesini ziyaret edebilirsiniz.Kaynak: nettuts
