css3 | bildirgec.org

web browserlar tam anlamıyla CSS3'ü desteklemese de web sitelerinde css3 sıkça kullanılmaya başlandı. bu makalede css3 dünyasında nelerin olduğuna değineceğiz. aşağıda sizlere ilham vereceğini düşündüğüm farklı tarzlarda css3 örnekleri mevcut. css3 ile neler yapılabilir sorusunun cevabına yanıt bulabileceğiniz örneklere göz atalım.

CSS3 & jquery saat

analog saat - tutorial

3d cube that rotates using arrow keys- tutorial
(yön tuşlarıyla hareket ettirebileceğiniz 3d küp) -

CSS ile web tasarımın dışında yapabileceğiniz farklı bir uğraş olan resim çizimi oldukça zor olsada css3 ile birliklikte çok az da olsa biraz kolaylaşmız gözüküyor. pixel'ler kullanılarak yapılan tasarımlar, ascii karakterler ile oluşturulan tasarımlar ve css3 desteklikli tasarımlar bulunmakta. Aşağıda yüksek kalitede css ile yapılan çizimler bulunmakta. Nasıl yapıldığını inceleyebilir, benzer çalışmalara adım atabilirsiniz. CSS ile Yapılan Çizimler;

Twitter Fail Whale

Homer Simpson

Skull with Flames
(Alevli Kafatası)

Html5'in yeniliklerinden biri olan web sayfasında herhangi bir eklenti gerektirmeksizin video oynatabilme özelliğini kullanarak geliştirilmiş SublimeVideo, video oynatıcılarda isteyebileceğiniz tüm özelliklere sahip olan, özelleştirilebilir bir html5 video oynatıcısıdır.

Tüm tarayıcılarda kullanabileceğiniz ayrıca iPhones, iPads ve Android yüklü telefonlarda da kullanılabilecek olan bu muhteşem html5 video player oldukça kullanışlıdır.

Ses kontrolü, tam ekran modu, zaman ve ters zaman göstergesi, boyutlandırma, şık efektler gibi birçok özelliği bulunan bu html5 video oynatıcıda arayabileceğiniz tüm özellikler bulunmakta. Ekstra olarak sayfada tooltip olarak küçük bir pencere olarak video oynatıcıyı açma, videoları galeri şeklinde sıralama gibi özelliklerde bulunuyor.

Esneklik ve kullanılabilirlik...
Bu iki kelime bana jquery'i ve tabii ki css'i çağrıştırıyor.
Buyrun size birbirinden esnek ve kullanışlı, tüm projelerinizde kullanabileceğiniz jquery ve css3 kaynakları:

1. TubePlayer - Youtube için Jquery Player

TubePlayer, oldukça akıllı bir jquery video oynatıcı youtupe player api'yi kullananlar için. Ayrıca youtube videolarınız için kendi kontrol ve bileşenlerinizi de oluşturabilirsiniz.

2. BonBon - css3 Butonları

BonBon, oldukça güzel görünümlü css3 butonları ve gerçekten de çok kullanışlı.

3. Orbit - JQuety Resim Slider

Oldukça güzel bir resim slider eklentisi, dilerseniz resimlerin üzerine başlık, açıklama vs. ekliyebiliyorsunuz.

Html5'in bu kadar popülerleşmesini sağlayan elementlerden biri de canvas elementidir. Web uygulamalarında oldukça popülerleşebilecek olan canvas, 2D olarak dinamik fotoğraflar yapabileceğiniz bir bileşendir. Javascript üzerinden çalışan bu element ile birçok muhteşem uygulama yapılabilir. Aşağıdaki birbirinden eğlenceli canvas uygulamalarını inceleyebilirsiniz. Html5 Canvas Uygulamaları;

Canvas Aquarium

Tarayacı üzerinden sanal olarak siz de büyük bir akvaryuma ve dilediğiniz kadar balığa sahip olabilirsiniz. Gerçekçi balık hareketleri, hareketli su efektleri, kabarcıklar sayesinde oldukça hoş bir uygulama. Daha fazla balık istiyorsanız akvarmuya tıklamanız yeterli.

Twitter. Canvas. 10K

Arka planında siyah hareketli kabarcıkların bulunduğu ve Twitter ile entegre edilmiş hoş bir Html5 Canvas uygulamasında her bir siyah kabarcık bir Twitter kullanıcısını belirtiyor. Haraketli hoş arka planı sayesinde farklı şekillerde kullanılabilecek çok güzel bir uygulama.

AviaSlider; birçok farklı benzersiz geçiş efektine sahip birçok projede farklı amaçlarla kullanabileceğiniz harika bir jquery slider uygulamasıdır. Interaktif olarak kullanabileceğiniz AviaSlider, diğerlerinin aksine farklı efekler sunarak ziyaretçilerinizi etkiler.

8 benzersiz geçiş efetli olan aviaslider'ı web sitenizde manşet veya resimleriniz için küçük bir galeri olarak kullanabilirsiniz. jQuery 1.32 ile hazırlanan bu uygulamayı istediğiniz gibi biçimlendirebilir html5 ve css3 ile renklendirebilirsiniz.

Sadece 8KB boyuntaki bu ufak uygulama içerisindeki farklı efektleri farklı sayfalarda kullanabilir ve tooltip eklentisi sayesinde resimlerin büyük hallerini sayfa içerisinde açılan küçük bir pencereden ziyaretçilerinize gösterebilirsiniz. Bu pencere açılırken resim harici sayfaya uygulanan karartma efekti sayesinde ziyaretçilerinizin resime dikkat çekmelerini sağlayabilirsiniz.

yeni bir on yıl içine girerken, 2010 yılında eğlenceli ve deneysel çalışmalarla dolu web tasarım eğilimlerini tahmin edebiliriz. etkileyici tasarımlar oluşturmak için html5 ve css3'ün yeni özelliklerinden yararlanmaya çalışıyoruz. serif yazı tipi ve dokulu arka plan popüler olacak. css3 sayesinde, köşeleri yuvarlatılmış menüler, akıllı telefonların yükselişiyle, mobil web tasarımı 2010 yılına damga vuracak gibi görünüyor.

1- serif fonts
son on yılda, çoğu web sitesi verdana veya arial font içinde tasarlanmış, ancak bu yeni on yılda değişecek. web tasarımda serif yazı tipleri daha fazla yer alacak.
daha detaylı bilgi için bu makaleyi okuyabilirsiniz.
örnekler;