Yepyeni ve ilgilinizi çekecek bir makale ile tekrar karşınızdayım. Biliyorsunuz web tasarım ve kullanılan teknolojiler sürekli gelişmekte. Elbete Medyanadolu olarak bunları takip etmek ve yeni teknolojileri kullanmak bizim için bir zorunluluk oluyor. Zorunluluk derken yanlış anlamayın, güzel bir zorunluluk. İnsanın yeni şeyleri keşfederken ki heyecanını her solukta hissediyoruz.
Bu makaleyi sevgili arkadaşım Chris Spooner’ ın yazdığı bir makaleyi okuduktan sonra hazırladım.
CSS olgusu ile ilgili bilgisi olmayanlar için kısaca CSS nedir anlatayım. Cascading Style Sheets (Türkçede Stil şablonları) yani bilinen kısa adıyla CSS, HTML’ e ek olarak metin ve format biçimlendirme alanında fazladan olanaklar sunan bir web teknolojisidir.
İnternet sayfaları için genelgeçer şablonlar hazırlama olanağı verdiği gibi, bağımsız olarak harflerin stilini; yani renk, yazı tipi, büyüklük gibi özelliklerini değiştirmek için de kullanılabilir. Bu tekniğin en önemli özelliği kullanımındaki esnekliktir.
Bir web sayfası içerisinde birbiriyle uyumlu birkaç renk ve birkaç yazı tip kullanılır ve bunları her sayfada ayrı ayrı tekrar belirtmek yerine CSS yardımıyla bir sefer tanımlayıp bütün web sayfalarında ortak olarak kullanılabilir. Bu şekilde, sayfaların hafızadaki boyutu epey küçüldüğü gibi, güncelleme yapmak da kolaylaşır.
CSS kodları; HTML kodlarının içine yazılabildiği gibi harici bir CSS dosyası oluşturularak da işlem yaptırılabilir. Türüne göre
<BODY>veya
<HEAD>bölümlerinde yer alabilirler.
CSS kodlarının, HTML dosyasına eklenmesi temelde 3 farklı şekilde yapılabilir.
Daha fazla bilgiyi CSS’ in resmi websitesinde bulabilirsiniz.
Şimdi asıl konumuza geri dönersek, CSS3′ ün web tasarımına getireceği yeniliklerden bazılarını bahsedeyim.
1. Border Radius (Yuvarlak-Oval Köşeler)
Türkçe düşünecek olursak “oval köşeler” veya “yuvarlak köşeler” diyebiliriz.
İnternet tarayıcılarının varsayılan olarak kullandıkları düz köşeli kenarlıklardır. CSS3 ile 90 derece olan bu standart köşeleri kolaylıkla yuvarlak köşelere dönüştürebiliyoruz.
1 2 3 | -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; |
Bu gelişmeler olurken elbette bunları yakından takip eden ve doğru orantılı bir şekilde ilerleyen internet tarayıcılarını da düşünmek zorundayız. Daha önceki yazılarımda da bahsettiğim gibi web tasarımında dikkat edilmesi gereken önemli noktalardan bir tanesi erişilebilirliktir. Her tarayıcıda aynı görüntüyü, okunabilirliği en yakın biçimde mümkünse (bazı spesifik durumlar hariç) birebir bulmamız gerekiyor.
1 2 3 4 5 6 7 8 | -moz-border-radius-topleft: 20px; -moz-border-radius-topright: 20px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-top-rightright-radius: 20px; -webkit-border-top-left-radius: 20px; -webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-rightright-radius: 10px; |
Şuanda Google Chrome, Safari ve Firefox bu yazdığım kodlar ile düzgün bir gösterim sağlayabiliyorlar.
Bu makaleyi yazarken bir yandan da Internet Explorer’ ın bloguna göz gezdiriyordum ve neredeyse az önce yayınlanan bir güncelleme gördüm. Internet Explorer da CSS3 için kendi özel kodlarını açıkladı. Fakat daha deneme fırsatı bulamadım, zaten dedikleri gibi “Draft” yani taslak olarak yayınladıkları spesifikasyonlar var. Buradan ulaşabilirsiniz.
CSS3 Border Radius (Yuvarlak-Oval Köşelendirme) ile ilgili ekstra kaynaklar;
2. Border Image (Kenarlık Resimleri)
Bu yeni ve hoş özellik ile istediğimiz herhangi bir resmi öğelere kenarlık olarak atayabiliyoruz.
1 2 3 | border-width: 0 5 0 5; -webkit-border-image: url(anaButton.png) 0 5 0 5 stretch stretch; -moz-border-image: url(anaButton.png) 0 5 0 5 stretch stretch; |
Tek bir resim kullanarak kullanarak yukarıdaki kodlar sayesinde kolaylıkla güzel görünümlü buttonlar oluşturabilirsiniz.
CSS3 ün bu yeni özellği, ayrıca kenarların farklı alanlarına, farklı yükseklikler ve genişlikler vermemizi de sağlıyor.
1 2 3 4 5 6 7 8 | border-bottom-rightright-image border-bottom-image border-bottom-left-image border-left-image border-top-left-image border-top-image border-top-rightright-image border-right-image |
Bu özelliği Mozilla Firefox 3.1, Safari ve Google Chrome destekliyor.
CSS3 Border Image (Kenarlık Resimleri) ile ilgili ekstra kaynaklar;
3. Box Shadow and Text Shadow (Kutu ve Yazı Gölgelendirme)
Bu özellik sayesinde artık yazı veya kutu gölgelendirmelerinizde Photoshop kullanmanıza gerek kalmayacak.
1 2 3 | -webkit-box-shadow: 10px 10px 25px #ccc; -moz-box-shadow: 10px 10px 25px #ccc; box-shadow: 10px 10px 25px #ccc; |
1 | text-shadow: 2px 2px 5px #ccc; |
Kutu gölgelendirme özelliği şuanda sadece Mozilla Firefox 3.1, Safari ve Google Chrome internet tarayıcılarında desteklenmektedir. Yazı gölgelendirme ise sadece Opera da desteklenmektedir. Fakat yazının başında dediğim gibi bu makaleyi hazırlarken Microsoft’ un CSS3 için desteklediği bazı kod dizilimlerini açıkladığını gördüm, deneme fırsatım olmadı. Burayı tıklayarak bilgi sahibi olabilirsiniz.
CSS3 Box Shadow and Text Shadow (Kutu ve Yazı Gölgelendirme) ile ilgili ekstra kaynaklar;
4. RGBA ile Kolay Transparan Elemenetler ve Opacity Ayarları
PNG formatlı resimlerin son yıllarda ne kadar popülerleştiğini bilirsiniz. PNG hem düşük dosya ebatları hemde GIF formatından daha kaliteli görüntü kalitesiyle dikkat çekmektedir.
Şimdi ise CSS3′ ün yeni bu yeni özelliği ile istediğimiz her yere direk olarak CSS’ ten transparanlık verebiliyoruz.
1 2 3 4 5 | rgba(200, 54, 54, 0.5); /* örnek: */ background: rgba(200, 54, 54, 0.5); /* veya */ color: rgba(200, 54, 54, 0.5); |
Yukarıdaki kod üzerinde göründüğü üzere rgba yı kullanıyoruz. Yandaki rakamlar sırasıyla Red, Green, Blue ve Alpha değerlerini gösteriyor. Yani Kırmızı, Yeşil, Mavi ve son olarak Alpha kanalını kullanıyoruz. Son değer bize transparanlık vermemize yarıyor.
Alternatif olarak şu şekilde de kullanabiliriz
1 2 | color: #000; opacity: 0.5; |
Bu özelliği Mozilla Firefox, Safari, Google Chrome, Opera ve İnternet Explorer 7 destekliyor.
CSS3 RGBA Opacity ve Alpha ayarları ile ilgili ekstra kaynaklar;
@Font-Face Kullanarak Özel Yazı Karakterleri
Webte genelde tüm yazı tipleri aynı gibi görünür. Arial, Helvetica, Verdana, Georgia … v.b. Farklı bir font kullandığımızda, onu görebilmeniz için, kullandığımız yazı tipininde sizin bilgisayarınızda olması gerekir. İşte başka yazı karakterli kullanmaktan çekingemiz bundan kaynaklanır. Fakat CSS3′ ün @font-face özelliği, online bir kütüphaneden istediğiniz yazı karakterini seçerek, kullanıcılara göstermeyi başarıyor. Gerçekten çok güzel bir özellik.
Nasıl çalıştığını görelim;
1 2 3 4 | @font-face { font-family:'Anivers'; src: url('/images/Anivers.otf') format('opentype'); } |
Ve bnu bir Header da kullanalım;
1 | h1 { font-family: ‘Anivers’, Helvetica, Sans-Serif; } |
@font-face özelliğini destekleyen tarayıcılar ise Mozilla Firefox 3.1, Safari, Opera 10 ve IE7
CSS3 Özel Yazı Karakterleri (@font-face) ile ilgili ekstra kaynaklar;
- Özellik için kullanabileceğiniz online kütüphane
- Font-face in IE, making Web fonts work
- Web fonts, the next big thing - A List Apart
Olumlu Bakış
CSS3 hala yapım aşamasında denilebilir. Yukarıda bahsettiğim kurallar şuanda bazı internet tarayıcılarında desteklenebiliyor. Fakat hızla ilerleyen günümüz web tekonolojisinde çok yakın zamanda bu özellikleri her tarayıcıda görebileceğiz. Safari bu yeni özelliklere çok değer veriyor. Fakat, Mac kullanıcıların sürekli kullandığı bu internet tarayıcısının son istatistiklere göre kullanıcı sayısı gün geçtikçe düşüyor ve diğer popüler tarayıcıların gölgesinde kalıyor.
Firefox şuanda çok geniş bir kullanıcı sayısına ulaştı. Ki, benimde vazgeçemediğim bu internet tarayıcısı son sürümü 3.1 ile en yeni CSS3 kurallarını destekliyor. Çok yakında kullanıcılar internet tarayıcılarını güncelleyecekler, bu da internetteki çoğu kullanıcının CSS3 yeniliklerini rahatlıkla destekleyeceğini gösteriyor.
Google Chrome bu yaz çıkan bir internet tarayıcısı. Safari ile aynı alt yapıyı yani WebKit’ i kullanıyor. Google Chrome hakkında geniş bilgiyi Google Chrome İzlenimleri yazımda bulabilirsiniz.
Son olarak Kasım, 2008 de döküm alınan W3′ ün internet tarayıcıları istatistiklerinde %44,2 ile Mozilla Firefox, %3,1 ile Google Chrome ve %2,7 ile Safari gözüküyor. Bunun anlamı, internet kullanıcıların %50 sinin bu yepyeni özellikleri rahatlıkla destekleyebileceğini gösteriyor. Çeşitli communityler oluşturulup, internet kullanıcılarının doğru tarayıcıları seçmesine yardımcı olarak bu sayının %70 lerin üzerine çıkarılması planlanıyor.
Olumsuz Bakış
%46 olan İnternet Explorer kullanıcıları maalesef bu yeni özellikleri şuanda göremeyecekler. O yüzden şimdilik bu yeni özellikleri mümkün olduğunca az kullanmayı ve alternatiflerini üretmeyi düşünebilirsiniz.
CSS3 tam olarak yayınlanmış değil. Bu yüzden kullandığınız yeni özellikler büyük ihtimal Invalid olarak görünecektir. Önemsiyorsanız şimdilik kullanmamanız gerekmektedir. Fakat şunu da söylemeden geçemeyeceğim, herkes kendi standartlarını kendisi yaratmalıdır. Bu konuda daha sonra bir yazı yazabiliriz.
Birçok tarayıcı var ve bu internet tarayıcılarının CSS3 kodlarını görebilmesi için farklı kodlar yazmanız gerekiyor. Bu da stil dosyanızda ekstra bir kod yazımına yol açacaktır. Geniş projelerde sayfa hızını ve diğer olağan hataları tetikleyebilir.
Düşüncelerinizi aşağıdaki formu doldurarak bu sayfanın altında belirtebilirsiniz. Ayrıca yazıyı çeşitli sosyal medya sitelerinde paylaşıp, insanların daha hızlı bilgilendirilmesini sağlayabilirsiniz. Hoşçakalın.
Yazıyı Yazan Hakkında:
Mert TOL - tarafından 55 yazı Medyanadolu Creative Labs' a eklendi.
1992 yılından beri internet bilgi teknolojileri, web standartları, typography, photography, grafik sanatları, interaktif entegrasyonlar, google ve ses mühendisliği konularında profesyonel olarak hizmet veriyor. Medyanadolu' nun kurucularından ve işin başında Creative Director olarak çalışıyor.
Personal web sitesine buradan ulaşabilirsiniz.
Yeni yazılan yazıların eposta adresinize otomatik olarak gelmesini istiyorsanız lütfen tıklayın.
Gerçekten mükemmel bir makale olmuş, elinize sağlık. Aboneniz oldum bu yazıyı görünce, teşekkürü borç bilirim. Yeni yazılarınızı merakla bekliyorum. Saygılar.
Bu bilgiler için teşekkürler. Blogunuz çok güzel başarılarınızın devamını diliyorum.