CSS3 – Temel Fütüristik Özellikler

Her geçen gün daha fazla mükemmel CSS3 örnekleri görüyorum. Bazıları yapısal olarak oldukça karışık, bazılarıysa bir o kadar basit ancak bu sefer yapılmış olanın bu kadar basit olması size karışık geliyor.

Bu özellikler tasarımı o kadar güzelleştirip bir o kadar da basitleştiriyor. En basitinden border-radius, text-shadow, box-shadow gibi özellikler bizi fazladan html, css ve görsel kullanımından kurtarıyor. Tabi bir de -webkit-transition gibi daha modern hareketler sağlayan özellikler de var. (Firefox 3.7 çıksa da şu transition özelliğini onda da kullansak. Daha desteklemiyor bu özelliği.)

Hal böyleyken ve bu kadar özellikten bahsederken, -ki bu sadece ufacık bir kısmı- IE(8) hala CSS3 desteklemiyor. Tabi sevindirici bir haber yok değil. IE 9 itibariyle hem HTML5 hem de CSS3 desteği verecek. -HTML5’i daha önceki yazımda anlatmıştım.-

Temmuz 2010 Tarayıcı KullanımıNeredeyse bütün tasarımcılar IE’den nefret eder. Halen tarayıcı marketinin neredeyse %45’ine sahip olan bir tarayıcının kullanıcı tecrübesini artırmak için tasarlanmış internet standartlarının neredeyse hiçbirini deslekmemesi komik olduğu kadar trajik. Ve çoğu tasarımcı bu eski tarayıcılarda da tasarımları düzgün görünsün diye birçok güzel ve müşteriye heyecan verebilecek özellikten vazgeçiyor. Konuyu fazla dağıtmadan ama merakınızı giderebilecek güzel bir yazıyla konuyu kapatıyorum. Burada eski tarayıcılara da dönük tasarımlar da yapmamız gerektiğini savunan ve bunu nasıl yapabileceğimizi anlatan güzel bir makale mevcut: A Complete Guide to Progressive Enhancement

O zaman hala sormadığım soruyu sorayım artık: Nedir bu yeni CSS3 özellikleri?

Belki de en çok kullanılanlarından biri;

border-radius

border-radius bize kutucukların kenarlarını yuvarlama olanağı sağlar. Büyüklük değeri olarak uzunluk ya da yüzde değeri verebiliriz. “Yüzde” kutunun boyutlarına göre belirlenir. Kullanımı şu şekildedir.

border-*-*-radius: <uzunluk> | <yüzde>

Yıldızla (*) belirtilen yerlerden ilki alt ya da üst (top – bottom) ikincisi sağ ya da sol (right – left) border‘ı belirler. Örneğin üst-sol border 10px, üst-sağ border 5px, alt-sol border 15px, alt-sağ border 20px olsun istersek bunu şu şekilde yazarız.

border-top-left-radius: 10px;
border-top-right-radius: 5px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 20px;

Veya tek seferde şöyle yazabiliriz:

border-radius: 10px 5px 15px 20px;

Verdiğimiz değerler üst-soldan başlayıp saatin ters yönünde devam eder. Burada verdiğimiz değerler ovalin hem x hem de y ekseninde aynıdır. Yani farkında olmadan iki değer birden vermiş oluyoruz. x-y ekseninin aşağıdaki örnekteki gibi farklı olmasını istersek onu da şöyle yazarız.

border-*-*-radius: x / y;
border-radius:15px 0 10px 25px / 15px 0 10px 20px;

Border Radius

border-radius’u farklı tarayıcılar için farklı söz dizimi ile yazmak gerekir.

-moz-border-radius: <uzunluk> | <yüzde>;  /* Firefox 1+ */
-webkit-border-radius: <uzunluk> | <yüzde>;  /* Safari 3-4 */
 border-radius: <uzunluk> | <yüzde>;  /* Opera 10.5, IE 9, Safari 5, Chrome */

Firefox’da sözdizimi biraz farklı:

-moz-border-radius-topleft: <uzunluk> | <yüzde>;
-moz-border-radius-topright: <uzunluk> | <yüzde>;
-moz-border-radius-bottomleft: <uzunluk> | <yüzde>;
-moz-border-radius-bottomright: <uzunluk> | <yüzde>;

Örnek

box-shadow

Kutulara gölge vermeyi sağlayan özelliktir. Söz dizimi şu şekildedir:

box-shadow: inset <sağ-uzunluk> <alt-uzunluk> <bulanıklık> <kutunun kalınlığı> <renk>
box-shadow: inset 1px 1px 3px 4px #000;
  • 1. değer kutunun içine doğru gölge verir,
  • 2. değer gölgenin sağ tarafa olan kalınlığını verir,
  • 3. değer gölgenin alt tarafa olan kalınlığını verir,
  • 4. değer gölgeye bulanıklık verir,
  • 5. değer gölge verilen kutunun border kalınlığını arttırır,
  • 6. değer renk kodu.

Ters taraflara gölge vermek için uzunlukların önüne “-” koymamız yeterli:

box-shadow: -1px -1px 3px 4px #000;

Bunları hepsini ayrı ayrı da kullanabiliriz. Yani gölgenin bulanık olmasını istemezsek bulanıklık değerini tamamen çıkarabiliriz ya da dikdörtgenin etrafında sadece bulanıklık olmasını istersek diğerlerine “0” değerini vermemiz yeterli.

box-shadow: 1px 1px 3px 4px #000;
box-shadow: -1px -1px  #000; /* Bulanıklık yok */
box-shadow: -0 -0 3px #000; /* Sadece bulanıklık kullanıldı */

Aynı zamanda birden fazla box-shadow değeri verebiliriz.

box-shadow:
  0 0 10px #000,
  20px 15px 30px #ff0,
  -20px 15px 30px #0ff,
  -20px -15px 30px #00F,
  20px -15px 30px #f00;

Box Shadow

Farklı tarayıcılardaki söz dizimleri:

-moz-box-shadow: 0px 0px 4px #000; /* Firefox 3.5+ */
-webkit-box-shadow: 0px 0px 4px #000; /* Safari 3.0+, Chrome */
box-shadow: 0px 0px 4px #000; /* Opera 10.5, IE 9.0 */

Örnek

text-shadow

text-shadow aslında bir CSS2 özelliğidir. Ancak fütüristik bir özellik olduğu için bunu da eklemek istedim. Yazıya gölge eklemek için kullanılır. Söz diziminin mantığı box-shadow ile neredeyse aynıdır. Söz dizimi:

text-shadow: <sağ-uzunluk> <alt-uzunluk> <bulanıklık> <renk>
text-shadow: 1px 1px 3px #000; /* Firefox 3.5+, Opera 9+, Safari1+, Chrome */

Text Shadow

Örnek

@font-face

Siteler yazılardan oluşur değil mi? En güzel görünmesi gereken kısımlardan biri de yazılardır. Tasarımcılar bazı durumlarda sistemde varsayılan olarak bulunmayan font‘ları tasarımlarında kullanırlar. Ancak haliyle o font siteyi açanın bilgisayarında yüklü değilse görünmeyecektir. Bu durumda kullanıcıya “al bu font, bunu bilgisayarına yükle!” diyemeyeceğimiz için, bir şekilde tarayıcıda düzgün görünmesini sağlamalıyız. Bunun için birkaç yöntem var. @font-face bunlardan yalnızca bir tanesi.

Kullanılmadan önce dikkat edilmesi gereken önemli bir nokta var: Telif hakları. Kullanacağımız font‘un telif haklarını bilmemiz gerekiyor. Çünkü birazdan söz dizimlerinde göreceğiniz gibi css‘e ekleyeceğiniz bu font‘u isteyen herkes bilgisayarına indirebilecektir. Bu yüzden kullanacağımız font‘ların telif hakkının buna uygun olup olmadığını bilmeliyiz. Eğer uygunsa, hadi başlayalım!

Söz dizimi:

@font-face {
font-family: 'Zekton';
src: url('zekton.eot'); /* IE6+ */
src: local('Zekton'), /* Bilgisayarda zaten yüklü olup olmadığını kontrol eder */
   url('zekton.woff') format('woff'), /* Firefox 3.6 */
   url('zekton.ttf') format('truetype'), /* Safari 3+, Chrome, Firefox 3.5, Opera 10+ */
   url('zekton.svg#fontzekton') format('svg'); /* Safari 3.1+, Chrome 0.3+, Opera 9+ */
font-weight: normal;
}

Öncelikle fontunuzu seçin. Tasarımınıza hangisini uygun gördüyseniz… Ya da internetten bedava (telif hakkı problemi olmayan) bir font indirin. Sonra onu Font Squirrel @font-face Generator ile diğer formatlara çevirin. Bence çok başarılı bir uygulama olmuş. Yüklediğiniz fontları diğer fontlara çevirmekle kalmayıp bunların uygulanmış HTML ve CSS kodlarını da birlikte veriyor. svg formatında diyez (#) işaretini göreceksiniz. O işaret o fontu önünde yazan id‘ye atar. Hangi kodun hangi tarayıcılarda çalıştığını yukarıda kodun içine yazdım. Kodu aynı sırada yazmanız çok önemli. Farklı sıralarda yazıldığında farklı tarayıcılarda yine farklı sorunlarla karşılaşılıyor.

Örneğin:

IE için en üste yazılan kodu alta yazarsak. IE bunu okurken kendine uygun olanı seçmek yerine ilk okuduğunun kendine uygun olmadığını görüp bunu çalıştırmaz. Bunu engellemek için IE’nin çalıştırdığı .eot uzantılı kodu en üste koyup aynı zamanda format(‘tipi’) gibi bir yazı ekleyerek diğerlerini çalıştırmasını engelleriz. Çünkü IE, src içinde birden fazla değer olduğu zaman bu kodu görmezden geliyor. Süpersin IE.

Ayrıca .svg formatının .ttf formatından önce yazılması da Safari’de bazı problemlere yol açıyor.

Şimdi de bunu bir elemente uygulayalım.

.font-face { font-family:Zekton; }
<p class="font-face">Lorem ipsum dolor sit amet</p>

Veee voilà:

@font-face

Kalın yazı kullanmak için ayrıca yükleyip kodları eklemeniz gerekiyor.

Örnek

gradient

Neredeyse bütün tasarımlarda gradient kullanılır. Geliştiriciler bunu görmüş olacaklar ki tarayıcılarına bu özelliği eklemişler. Diğer CSS3 özelliklerine nazaran bu özellik tarayıcılara göre değişik özellikler arz ediyor. Bazılarında arkaplan tekrar ettirebilirken bazılarında da sadece gradient kullanarak birden fazla dairesel gradient özelliğine sahip arkaplanlar kullanılabiliyor. Bu özelliği IE bile destekliyor. Tabi çirkin bir kodla. IE büyüksün?!

Söz dizimi:

background-image: -moz-linear-gradient(<başlangıç konumu>, <başlangıç rengi>, <bitiş rengi>); /* Firefox 3.6 */
background-image: -webkit-gradient(<tipi>,<başlangıç konumu>,<bitiş konumu>,from(<başlangıç rengi>),to(<bitiş rengi>)); /* Safari 4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='<başlangıç rengi>', EndColorStr='<bitiş rengi>'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='<başlangıç rengi>', EndColorStr='<bitiş rengi>')"; /* IE8 */

Örnek kod:

background-image: -moz-linear-gradient(top, #0ff, #fff);
background-image: -webkit-gradient(linear,left top,left bottom,from(#0ff),to(#fff));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#00ffff', EndColorStr='#ffffff');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#00ffff', EndColorStr='#ffffff')";

Bütün tarayıcılarda aşağıdaki gibi görünecek.

Gradient

En basitinden yani IE’nin kodundan açıklamaya başlayayım. startColorStr başlangıç rengini EndColorStr de bitiş rengini temsil ediyor. Fark ettiyseniz rengin altı karakterlik tüm kodunu yazdım. IE üç karakterlik kısaltılmış kodları kabul etmiyor. Ayrıntılara MSDN‘den bakabilirsiniz.

Firefox (Mozilla) kodunda da durum şöyle: Önce gradient‘in kutunun hangi açısından başlayacağını belirlemeliyiz. Örnekte top yani üstten başlattım. İstersek açı da verebiliriz -45% gibi-. Daha ayrıntılı bilgiyi Mozilla Developer Center’da bu iki bağlantıda bulabilirsiniz:

Safari, Chrome (Webkit)’te önce gradient tipini belirliyoruz. Örnekte ‘doğrusal (linear)’ seçtim. Sonra başlangıç noktası; sol-üst (left top), ondan sonra biriş noktası; sol-alt (left bottom), sonra başlangıç rengi; to(renk), en sona da bitiş rengi from(renk). Safari Reference Library‘den ayrıntılara da bir bakın bence.

Radial Gradient‘te de örnek verme zorunluluğu hissettim kendimde. Çünkü doğrusal olana göre bu dairesel olan daha karışık.

background-image: -moz-radial-gradient(<konum> | <açı>, <şekil> | <büyüklük>, <başlangıç rengi> | <başlangıç büyüklüğü>, <bitiş rengi> | <bitiş büyüklüğü>); /* Firefox 3.6 */
background-image: -webkit-gradient(<tipi>, <iç daire konumu>, <iç daire büyüklüğü>, <dış daire konumu>, <dış daire büyüklüğü>, from(<başlangıç rengi>), to(<bitiş rengi>)); /* Safari 4+, Chrome */

Örnek kod:

background-image: -moz-radial-gradient(center, circle, orange 0%, red 100%);
background-image: -webkit-gradient(radial, 120 45, 0, 120 45, 100, from(orange), to(red));

Örnek

transform

transform özelliği kutucukları ve onun için deki yazıları döndürmemizi, büyütüp küçültmemizi, konumlarını değiştirmemizi v.s. sağlar.

CSS Transform

Söz dizimleri:

Döndürmek için;

-moz-transform: rotate(45deg); /* Firefox 3.5 */
-webkit-transform: rotate(45deg); /* Safari 3.1, Chrome */
-o-transform: rotate(45deg); /* Opera 10.5 */
filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.70710678, M12=-0.70710678, M21=0.70710678, M22=0.70710678);  /* IE6, IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=-0.70710678, M21=0.70710678, M22=0.70710678, sizingMethod='auto expand')"; /* IE8 */
zoom: 1; /* 'filter' kodunun kutuyu tekrardan ölçeklendirmesini engeller */

/* Bu kısım IE'de orjini düzeltmeye yarar; @bakın http://wiki.github.com/heygrady/transform/correcting-transform-origin-and-translate-in-ie */
position: relative9; /* 9 tarayıcıya ozel; @bakın http://paulirish.com/2009/browser-specific-css-hacks/ */
top: -21px9;
left: -21px9;

IE kısmı biraz karışık. Matris değerleri girmemiz gerekiyor. 45 derecenin 2’ye 2 matris değerlerini girdim. Ayrıntılı hesaplama için aşağıdaki Matrix Filter başlıklı sayfayı inceleyin.

Büyütmek için;

-moz-transform: scale(1.5);
-webkit-transform: scale(1.5);
-o-transform: scale(1.5);

Örnek

transition

Değişimler arasında yumuşak geçişler yapmamızı sağlar. Çuğunlukla fare ile birşeylerin üzerine geldiğimiz zamanlarda kullanılır.

-moz-transition: all 0.4s ease-in;  /* Firefox 3.7+ */
-o-transition: all 0.4s ease-in;  /* Opera 10.5 */
-webkit-transition: all 0.4s ease-in;  /* Safari 3.2+, Chrome */

Şu anda Firefox (3.6) daha bunu desteklemiyor. Ama 3.7 versiyonunda destekleyeceğini açıkladı.

  1. İlk değer (all) değişimin hangi özelliğe uygulayacağını belirler. Yani bu opacity ya da size gibi şeyler olabilir. all yazdığımız zaman hepsine uygulayacağımızı belirtir.
  2. İkinci değer değişimin ne kadar sürede tamamlanacağını belirler. birimi saniye (s)‘dir.
  3. Üçincü değer de efekt türü. Ben ease-in efektini seçtim.

Transition’un çok geniş kullanım yelpazesi var. Ayrıntılar için aşağıdaki sayfaları kullanabilirsiniz.

Örnek

Faydasını Gördüğüm Güzel Kaynaklar:

  • Asiye Kartaca

    Örnek sayfası çok güzel olmuş. Uygulanmış kodları da görebiliyoruz.
    Ben de ie kullanıyodum, ama bu yazıdan sonra hiçbişeye destek vermediğini gördüm. Artık chrome kullanıyorum.

  • Berat Doğan

    Çok can çektiren özellikleri var CSS3’ün. Ama IE’yi destekleme zorunluluğu yüzünden mahrum kalıyoruz…