Css3 ün gelmesi tasarımcılar açısından birçok kolaylık getirdi. Bunlara örnek vermek gerekirse

  • Text Shadow,
  • Border Radius
  • Box shadow
  • Opacity
  • Multi Column
  • Border image
  • Font-face

Text Shadow:

Photoshopta kullandığımız drop shadow etkisini pratik bir şekilde uygulayabiliyoruz.

text-shadow:1px 1px 1px #eee;

1. değer x ekseninde aralık vermek için

2. değer y ekseninde aralık vermek için

3. değer ise verdiğimiz etkinin bulanıklaşması için kullandık

4. değer #fff verdiğimiz gölge etkisinin rengi için kullandık

Border Radius

Border radius web 2.0 stili tasarımlarda en çok kullanılan özelliklerden birisi tablo ve div lerde verdiğimiz kenarlıkları ovalleştirerek daha şık bir görünüm vermemizi sağlıyor.

border:2px solid #ccc;
-moz-border-radius:4px 4px 4px;//firefox için
-webkit-border-radius:4px 4px 4px;//safari ve chrome için

Border ImageBazı tasarımlarda gördüğüm kenarlıklar yerine resim kullanılıyor. Css 3 ile bunu yapmak mümkünmüş…

Round özelliği için

border:1.0em double; -moz-border-image: url(border.png) 28 round round;

Stretch border için

border:1.0em double; -moz-border-image: url(border.png) 28 stretch stretch;

Box ShadowText shadow tekniğine benzer bir örnek

-moz-box-shadow:1px 1px 3px rgba(0, 0, 0, 0.7);

1. değer x ekseni için

2. değer y ekseni için

3. değer blur

4. değer ise renk kodu

Opacity

Web 2.0 ile birlikte tasarımlarda yer yer transparan objelerde kullanılmaya başlandı eskiden transparan background için transparan png dosyasını kullanıyorduk fakat css3 opacity ile tasarımlarımızdaki transparan alanlar oluşturabiliyoruz.

opacity:0.2//%20 lik bir görünürlük değeri vermiş olduk.

Multi Column

Tasarımlarımızda kolonlu yapı için genellikle div, span ile ya da table ile kolonlu yapılar oluşturabiliyoruz fakat dinamik yapı kullandığımız zaman kolondan taşan yazının devamının bir sonraki kolonda çıkması problem oluşturabiliyor. Bu sorunu Multi Column ile çözebiliyoruz.

-moz-column-count:3;/* Kolon Sayısı*/
-moz-column-rule: solid 1px #fff; /*Kolonlar arasında aytaç için beyaz border kullandım */
-moz-column-gap:20px; /*kolonlar arası boşluk*/

@Font-Face

Web tasarımlarında yenilenen tasarım trendleriyle birlikte tipografide öne çıkmaya başladı dolayısıyla font seçimi önem kazandı ve sistem fontları yetersiz kalmaya başladı. Ancak web tasarımında özgürce font kullanılamıyor ya sistem fontu olması gerekiyor ya da resim olarak fontu siteye eklememiz gerekiyordu. Sistemde olmayan fontların kullanılmasını sağlamak için javascript ve flash kullanılarak bir çok teknik geliştirildi (sIFR, Cufon, Typeface…). Yalnız bu teknikler tam anlamıyla verimli olamıyor ya css desteği tam olmuyor ya da google tarafından indexlenmesinde problem çıkıyordu.Css 3 ile de artık sistem fontu olmayan fontlar eklenebiliyor. Fakat halen problemler devam ediyor…

dipnot:@font-face Css2 ile gelmişti fakat bazı problemlerden dolayı Css 2.1 de kaldırıldı Css3 ile tekrar geldi. – Fatih Hayrioğlu

style dosyamızda tanımlamamızı yapıyoruz

@font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); }
@font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf'); }

Kullanımı

h3 { font-family: Delicious, sans-serif; }

Not: Bir kaç şekilde renk kodunu verebilirsiniz. rgb(0,0,0) = black = #000

Örnek Sayfa

Faydalı Linkler:

http://www.fatihhayrioglu.com/

http://www.css3.info

http://sixrevisions.com/css/basic-css3-techniques-that-you-should-know/

http://www.1stwebdesigner.com/css/css3-techniques/