Css3 tek kelime ile heyecan verici. CSS web sitelerinin görünümünü düzenlemek ve yönetmek için kullanılan bir standarttır. CSS3 ile birlikte site görünümünü tek başına idare etme konusunda çok büyük bir gelişme gösterdi. CSS sadece yazı tipini ayarlayan ve sayfa planını oluşturduğumuz yapının üstüne tasarım araçlarına özel özellikleri(animasyon ve geçiş efektleri) olan bir standart haline geldi. CSS3 sayesinde web sitelerinin görsel işleri daha hızlı ve esnek şekilde halledilebiliyor. Photoshop’a daha az ihtiyacımız olacak.

Daha önce javascript ile yaptığımız görsel işlevselliği css3 ile yapıyoruz. Örneğin animasyon işleri artık css3 ile daha performanslı bir şekilde yapılıyor.

Kullanıcının gördüğü alanına ait tüm görsel ayarlar CSS tarafından yapılmalı. Animasyon, renk geçişleri, gölgeler vs.

CSS3 Modülleri

CSS3 geliştirilirken 40’ın üzerinde modüle ayrılarak geliştirmeye başlandı. Bu modüller önem durumuna göre sıralanarak çalışmaya başlandı. CSS3 gelişimi hala devam etmektedir. Modüller daha geliştirilme aşamasında tarayıcılar tarafından önek(prefix) yardımı ile kullanılmaya başlandı. Tüm modülleri ve durumlarını görmek için w3c’nin sitesine bakabilirsiniz.

Daha Dinamik CSS

:checked sözde sınıfı veya :target sözde sınıfı yardımı ile kullanıcının tıklama durumunu kontrol edebilmek artık CSS ile mümkün. Bu sayede daha önce javascript ile yaptığımız bir çok görsel hareketleri artık CSS ile yapabileceğiz. Akordiyon uygulaması, sekmeler, slider, lightbox vb tüm yapıları artık CSS3 ile yapabiliyoruz.

Ayrıca calc() değeri, @support kuralı, media sorguları gibi özellikler ile birlikte CSS3 daha dinamik bir hale geldi.

Tepkisel Tasarım(Responsive Design)

CSS3 ile kapsamı geliştirilen medya sorguları sayesinde gelişmekte olan ve yeni bir akım haline gelen tepkisel tasarım(responsive) web mecrasında büyük öneme sahip.

Sitemize farklı platformlar için farklı uygulamalar yapmamıza gerek kalmadan Sadece CSS yardımı ile tüm platformlar için tek merkezden kontrol edilebilen siteler oluşturma olanağı çok büyük avantaj.

Daha Az Resim

CSS3 ile gelen yeni özellikler sayesinde projelerimizde daha az resim kullanıyoruz. Renk geçişi, metinlere gölge vermek, kutulara gölge vermek, kenarları yuvarlatma özellikleri sayesinde resim kullanımı azaldı. Tabi böylece resim işleme programlarına(Adobe Phoshop) olan ihtiyaçta azaldı.

Daha önce her resim işlemi için resim işleme programı açmak sonra değişen resimleri alıp ilgili klasöre atmak gibi iş yükünden de kurtarıyor CSS3 bizi. Daha esnek bir kullanım sağlıyor.

İnteraktif Uygulama Geliştirme

Animasyon, geçiş efektleri ve dönüştürme özellikleri le artık CSS ile animasyon yapma imkanımız var. Daha önceleri flash ve javascript ile yaptığımız bir çok interaktif hareketleri CSS ile yapıyoruz. Daha performanslı, öğrenimi daha kolay ve HTML elemanları üzerinde animasyon yapma avantajları var.

Önek Sıkıntısı

Bu sorunun nedeni CSS3 özelliklerinin hala geliştirilmekte olması ve tarayıcıların geliştirme aşamasında bu özellikleri daha standartlaşmadan kullanmaya ve kullanıcılara kullandırtmaya başlamasından kaynaklanmaktadır. Bu durumu başlangıçta(belki hala) sorun olarak tanımlamasak da çok yoğun kullanımında bir sorun olarak karşımıza çıktığı kesin.

Tarayıcı Desteği

Yeni nesil bütün tarayıcılar(Firefox, Chrome, Opera, Safari ve internet Explorer 10) CSS3’ü desteklerken, kullanımda olan tarayıcı listesinde gördüğümüz iki İnternet Explorer sürümü 8 ve 9’un CSS3 desteği sırası ile %15 ve %54. Bu durum CSS3 özelliklerini kullanırken bizi çekimserliğe itmekte. Buradaki mantığımız destekleyen tarayıcılar için CSS3 kullanmak, desteklemeyenler için javascript yardımı almak yönünde olmalıdır.

Geliştirilmekte olan bazı modüllerin tarayıcı desteği bulunmamaktadır. Ancak otomatik güncelleme sayesinde yenilikler Firefox, Chome ve Opera’ya kullanıcının güncellemesine gerek kalmadan eklenmektedir.

CSS3 Özellik Araçları

Bazı özellikleri kullanırken çevrimiçi veya editör yardımı bizi hızlandırmaktadır. Renk geçişi, farklı gölgeleme teknikleri, animasyon, geçiş efektleri vb. yeni özellikleri bir araç yardımı ile kullanmak bize hız sağlıyor. Bir çok çevirimiçi site bu özellikleri kullanmamızı sağlaması bir avantaj.

Geliştirme Devam Ediyor

CSS3 henüz gelişmesi devam eden bir standart. Halen üzerinde çalışılan modüller bulunmakta.

Tüm listeyi görmek için w3c’nin sitesine bakabilirsiniz.

Kaynaklar

CSS filtreleri photoshop’a benzer filtreleri HTML elemanlarına uygulamamızı sağlıyor. Tek satır CSS kodu ile bu efektleri verebilmek çok hoş. CSS gittikçe web’in görselliğini tek başına karşılayacak bir yöne doğru gidiyor. Bu filtreler genelde resimler, ardalan resimleri ve kenar çizgilerine uygulanmaktadır.

Not: İnternet Explorer eski sürümleri standart olmayan filtre desteğini sunuyor.

Yapısı: filter: <filter-function> [<filter-function>]* | none
Aldığı Değerler: grayscale | blur | sepia | saturate | opacity | brightness | contrast | hue-rotate | invert
Başlangıç Değeri: none
Uygulanabilen Elementler: Grafikler ve kapsayıcı elementler
Kalıtsallık: yok

Sayfa yüklenmeden önce filtre elemana uygulanır ve sonra sayfaya yüklenir. Biz filtre eklediğimizde orjinal resme bu efekt sayfa taranmadan önce uygulanır.

wall-e

Hasan Şama(@hasansama)’nın çektiği fotoğraf üzerinde efektleri deneyelim. - Resmin ana fikri kabuklar wall-e’nin etrafını sarmış. -

Siyah-Beyaz (GRAYSCALE) Efekti

Tanımlana resmi siyah-beyaz hale getirir.

Tek satır kod ile bunu yapabilmek süper bir şey. 100% değer tam filtreleme yaparken 0% değeri ise filtre’sız halini veriyor.

hue-rotate(Renk Tekeri)

Hue(renk) renk çemberinde 0 ile 360 arasındaki renklere karşılık gelir. 0 kırmızı, 120 yeşil ve 240 mavidir. http://www.colorschemedesigner.com/ Sitesindeki tekerdeki her açı için farklı renkler mevcuttur. Verdiğimiz her değer renk tekerinde bir renge karşılık geliyor.

Örnekler tanımlardan daha açıklayıcı oluyor. 240 mavi tonlarını öne çıkarır.

Kahverengi ağırlıklı Filtre (Sepia)

Sepia filtresi kahverengi tonları önce çıkaran antik görünümlü resimler oluşturmamızı sağlar.

Kontrast (Contrast)

Resmin kontrast değeri ile oynarız. 0% değeri resmi siyah yaparken 100% değer resmin orjinalini verir.

Televizyondaki kontrasta alışık olanların seveceği bir filtre.

Bulanıklaştırmak(Blur)

Resmimize bulanıklaştırmak için kullanılabileceğimiz bir filtredir.

Uygulanan bulanıklaştırmanın yarıçap değeri olarak belirlenen değerdir. Yüksek değerlerler resmi daha bulanık yapacaktır.

Ters Çevirmek (Invert)

Resmin görüntüsünün terse çevrilmesini sağlar. Verilen değer resmin ne kadar terse çevrileceğini belirler. 100% değeri resmi tamamen çevirir.

100% değeri resmi fotoğraf negatifi görünümü kazandırıyor.

Saydamlık (opacity)

Resimlerin saydamlığını ayarlamak için uygulanan filtredir.

CSS’deki opacity ile çakışan bir özellik. Bunun daha hızlı çalıştığı yazıyor.

Parlaklık (brightness)

Yine televizyondan alışık olduğumuz parlaklık filtresi.

Gölge(drop-shadow)

box-shadow’a benzer parametreleri var.

CSS’de zaten box-shadow vardı niye buna ihtiyaç var derseniz. Örnekteki saydam içeriği olan alanların gölgeyi etkilediğini dikkatinize sunarım.

Çoklu Filtre Kullanımı

Aralarında boşluk bırakarak birden fazla filtre kullanabiliyoruz. İşte burada tasarımcılardan sağlam rol çalıyoruz. :D Artık bizimde resim işleme aracımız var.

Resmi siyah beyaz yapıp, ayrıca kontrastını düşürerek baskı görünümü verebiliyoruz. Tabi geniş kullanım olanakları olan bir alan gerisi sizin tasarım görüşünüze kalmış.

Tarayıcı Desteği

Chrome explorer Firefox
18+ (-webkit) desteklemiyor 35+

Mobil Tarayıcılar

Android Mobil Safari Chrome
4.4 (-webkit) 6.0 (-webkit) 35.0 (-webkit)

Kaynaklar

Kısa çizginin(-) tanımına internette baktığımızda kullanım alanlarının başında ilk sırada

“Satır sonunda, yer kalmadığı için yarım kalan kelimelerin bölünmüş olduğunu, yani devamının altta olduğunu göstermek için satır sonunda kullanılır. Bu görevde kullanılınca birleştirme çizgisi denir.”

Bilgisi yer alır. Bu işi web mecrasında yapmak için CSS3 ile gelen hyphens(kısa çizgi) özelliği kullanılır. Şimdi bu makalede bu özelliği inceleyeceğiz.

CSS kısa çizgi özelliği bir satıra sığmayan kelimenin nasıl bölüneceğini belirler. Bu bölme işini HTML’de tanımlana lang özniteliğinde belirtilen dile göre yapar.

Yapısı: hyphens: <deger>
Aldığı Değerler: none | manual | auto
Başlangıç Değeri: manual
Uygulanabilen Elementler: Tüm elementler
Kalıtsallık: var

Değerlerini inceleyelim.

  • none: Satır sonuna sığmayan kelime tire ile ayrılmaz. Sadece boşluk olan bölümlerden satır başı yaptırılır.
  • manual: Kelimeler satıra sığmadığında sadece kelime içinde tire geçiyorsa ise tireli olan kısımdan kesilir. &shy; karakterini tire konacak yere koymamız gerekiyor. Normalde gözükmüyor ama kelime kesildiğinde tire gözüküyor.
  • auto: Kelimeler satıra sığmadığında tarayıcı tarafından otomatik olarak HTML’de belirtilen dile göre bölünür.

Bir örnek yapalım.

kesik çizgi

Firefox’da denedim çalışıyor. Gayetde güzel çalışıyor. Unutulmaması gereken şey dil tanımının yapılması. Chrome’da auto çalışmıyor.

Tarayıcı Desteği

Chrome explorer Firefox
29+ (-webkit; auto hariç) 10+ (-ms) 6+ (-moz)

Mobil Tarayıcılar

Android Mobil Safari Chrome
desteklemiyor 4.2 (-webkit) desteklemiyor

Kaynaklar