css3 | bildirgec.org

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.

daha önce birçok kez duymuşsunuzdur: biz web geliştiricileri olarak, bu işi yapanlar olarak değişimin uçurumundayız. css3 ve html5 gibi geleceğin standartları işlerimizi büyük ölçüde değiştireceğe benziyor.

css3’ün nasıl etkilediğini aşağıdaki örneklerde görebilirsiniz.

1- güneş sistemimiz

bu örnekte css3'ün sborder-radius, transform ve animation özellikleri kullanılarak güneş sistemimizin bir modellemesi yapılmış. ayrıca güzel bir tooltip de kullanılmış, yan tarafta yazan gezegen isimlerinin üzerine gelince açıklaması çıkıyor. bu örneğin nasıl yapıldığına buradan bakabilirsiniz. bu animasyon sadece google chrome ve safari’de çalışıyor.

2- Flash reklamlar yerine CSS3 reklamlar

animasyon dünyasında flash’ın adı çıkmış, istenilse css3 ile de aynı güzellikte animasyonlar yazılabilir. bu örnekte birkaç flash reklam css3 ile yapılmaya çalışılmış, çok da güzel olmuş. ama şimdilik firefox ile çalışmıyor, chrome ile deneyebilirsiniz.

Web'in yeni modalarından da diyebileceğimiz CSS3 birçok webmaster'ın ilgi odaklarından. İşte size birbirinden harika ve hayret verici CSS 3 uygulamaları...bu uygulamaların zaman zaman bazı tarayıcılarda çalışmadığını belirtmekte fayda var. mesela neredeyse hiçbiri Internet Explorer ile çalışmıyor. En uyumlu tarayıcılar ise Safari ve Chrome.

css3 clock with jquery

analogue clock

3d cube that rotates using arrow keys

CSS3'ün en büyük sorunlarından biri birden fazla tarayıcıda çalışmasını sağlayabilmektir. bu şu anlama geliyor: en basitinden bir gölge efekti verebilmek için çapraz tarayıcı uyumlu bir şekilde kod yazmanız gerekiyor.

bu yazıda ise basit kullanıcı arabirimleri ile tamamen özelleştirilebilir kodlar üretebileceğiniz CSS3 araçları yer almaktadır.

CSS3 Generator
Efektlerin hepsini tamamen özelleştirebileceğiniz ve popüler CSS3 özellikleriden istediğinizi seçebileceğiniz bir araçtır.

CSS3 Please
bir kod düzenleyicisinde kod yazıyormuşsunuz gibi görünümü olan araç sağ üst köşede size önizleme olanağı sunmaktadır.

CSS3 Click Chart by Impressive Webs
çok fazla özelleştirilebilir değil fakat kodunu görmek istediğiniz efekte tıklamanız yeterlidir. ama şu da bir gerçek fazlasıyla efekt örneği var.

Henüz tam olarak yaygınlaşmayan ve geliştirme süreci devam eden HTML5 ve CSS3 ile şu anki durumda bile muhteşem uygulamalar yaratılmakta. Web sayfalarını tamamen interaktif ve etkileşimli hale getiren ayrıca görsel açıdan farklı ögeler yaratan bu tasarım dilleri yeni sürümleri ile oldukça fark yaratmakta. Aşağıdaki uygulamaların nasıl yapıldıklarını inceleyebilir veya tamamı ücretsiz olarak dağıtıldığı için siz de web sitenizde kullanabilirsiniz. İlgi Çekici HTML5 ve CSS3 Uygulamaları;

CanvasMol

Slidenafill, aklınıza gelebilecek her molekülü size gösterebilen harika bir html5 uygulaması. ATP, TNT, DNA gibi bazı molekülleri 3 boyutlu olarak gösterir. Ayrıca isterseniz renklendirmeyi değiştirebilir; x,y,z eksenleri etranfında oynatmayı durdurabilirsiniz. Birbirine bağlı birçok bloktan oluşan uygulama içinde bir periyoduk cetvelde bulunmakta.

GoogleBox

Google'ın 3 boyutlu heryönden gözükebilen şekli olan Googlebox bir css3 uygulamasıdır. Kutuyu istediğiniz gibi görebilmenizin yanında boyutlarını değiştirebiliyorsunuz.

malum kodlama yapan herkesin başının belasıdır internet explorer denen tarayıcı. kodları anormal bir şekilde yorumlar. microsoft'un vurdumduymazlığı nedeniyle birçok insan hala internet explorer 6.0 kullanır ve siz de sitelerinizi onlara doğru dürüst göstermek için çırpınır durursunuz. diğer internet tarayıcıları yeni standartları destekleme konusunda birbirleri ile yarışırken internet explorer'ın hiç acelesi olmaz. neyse ki css3pie (progressive internet explorer) var.

css3pie (progressive internet explorer) nedir?

başımızın belası, sitelerin görünümünün katili internet explorer'a css3 yetenekleri kazandıran bir dosyadan başka bir şey değil. hemen alt kısımda internet explorer'dan alınmış ekran görüntüsünü görebilileceğiniz üzere de oldukça tatmin edici bir sonuç verdiğini söylemek mümkün.

desteklediği css3 özellikleri

• border-radius
• border-image
• box-shadow
• multiple background images (arkaplanda çoklu resim)
• linear-gradient (arkaplan için renk geçişleri)

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ı)

Tek sayfalık web tasarımlarında, genelde içerik tek bir sayfaya sığdırıldığı için css ve javascript'e ağırlık verilmekte.jQuery ile slider vb. uygulamalar yapılırken css3 ile tasarımı ögelerini güçlendirerek daha şık durması sağlanabilir. Aşağıda içeriğinde birçok javascript uygulaması barındıran tasarım örnekleri bulunmakta. Bu örnekleri inceleyerek sizde tek sayfalık tasarımlar hakkında fikir sahibi olabilir veya farklı örnekleri inceleyebilirsiniz. Yaratıcı Tek Sayfalık Web Tasarımları;

Adam Woodhouse

Jan-Eike Koormann

David Spink

Mediocore - David Arazim