CSS | bildirgec.org

Web tasarımı bu günlerde HTML5 ve CSS3 ile büyük bir Upgrade yaşamakta. Tarayıcı desteklerinin giderek artması ile somut kullanımını giderek daha sık görmeye başladığımız, web dillerinin bu yeni versiyonları için hazırlanmış örnekleri ve eğitimleri, ilgili web sitelerinde çok daha fazla sayıda görmek mümkün.

Aşağıda listelenmiş olan CSS3 eğitimleri (teknikler, örnekler) ile, daha önceleri yapamadığınız veya yapmak için ek bazı dosyalara/görsellere ihtiyaç duyduğunuz, "göreni kendisine hayran bırakan" tasarımsal özellikleri, CSS3 ile nasıl yapabileceğinizi öğrenebilir ve hemen denemeye başlayabilirsiniz.

Apple HTML5 Showcase: Apple tarafından yakın zaman önce açılan ve içeriğinde HTML5 ve CSS3 tekniklerinin bulunduğu bir tanıtım sayfası.

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)

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

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.

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

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.