css3 | bildirgec.org

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

Her geçen gün ajax ile yapılan dolayısıyla jQuery ile yapılan uygulamalar artmakta. Artık flash alternatifi olarak görülen jQuery ile inanılmaz uygulamalar yapılmakta. jquery.com'dan derlenen haziran ayının en iyi jQuery uygulamaları;

dualSlider - Demo

Çift taraflı jQuery tabanlı bir taraflı olan dualSlider ile hem manşet için hazırladığınız alt metin hem de manşetin kendisi küçük bir zaman aralığı ile kayma efektini gerçekleştirir. Birçok sayfa kullanabileceğiniz bu uygulamada resim yerine herhangi bir html dosyası, video, metin gibi birçok alternatif tercihte bulunabilirsiniz. Ayrıca slayt özelelliğini, "Play/Stop" (Başlat/Bitir) tuşu ile başlatıp durdurabilirsiniz.

jQuery Easy Confirm Dialog - Demo

jQuery ile hazırlanan bu farklı tooltip uygulamasını web sayfalarınızdaki ziyaretçilerinize uyarı niteliğinde sunabilirsiniz. Farklı uyarılar olarak kullanabilir veya belirli soruları sormak için kullanabileceğiniz muhteşem bir jQuery tooltip uygulaması.