css 3 | bildirgec.org

1 - css3.com

css3 'ün resmi sitesi. css3'ün referans rehberini bulabileceğiniz ve blog tarzında css3 örneklerinin yayınlandığı sade bir site.

2 - css3please

css3 kodları tarayıcıdan tarayıcıya farklılık göstermektedir. bu site de css3 ile yapılabilecek bir görsellik için hangi tarayıcıda hangi kodun çalıştığını gösteren çok pratik bir site.

3 - css3generator

çok hızlı bir şekilde css3 kodu oluşturabileceğiniz son derece kullanışlı bir site. listeden eklemek istediğiniz css3 özelliğini seçdikden sonra piksel ve renkdeğerlerini girmeniz yeterli. her tarayıcı için gerekli kodları site bizim için oluşturuyor.

jQuery ile artık birçok uygulama örneği bulmak mevcut. Klasik uygulamaların dışında animasyonlar ve oyunlar da css3 ve html5 ile artmış durumda. Aşağıdaki uygulamaları doğrudan web sitenize ekleyebilir ve ziyaretçileriniz arasında rekabet ortamı yaratabilirsiniz. İşte muhteşem jQuery Oyun uygulamaları;

Twitch

Twich, pop-up penceleri üzerindeki 9 aşamalı minimal bir oyun serisidir. Her yeni seviyeye geçtiğinizde yeni bir pencere açılarak farklı bir oyun karşınıza gelir. Oyun sadece fare ile oynanır.

Browser Ball

Resimdeki plaj topu ile açılacak yeni pencerede oynayabilirsiniz. Benzer masaüstü uygulamalardan esinlenerek hazırlanmış bu oyun ile ziyaretçileriniz boş vakitlerini sizin sitenizde geçirecekler.

CSS 3 çalışmaları henüz tamamlanmadı fakat birçok tarayıcı css3'ü kısmen kullanıyor. Bu yüzden web tasarımcıları css 3'e son günlerden yüklenmiş durumdalar. web 2.0 ile css3 inanılmaz görsel tasarımları oluşturmak için muhteşem bir ikili. css 3 yeni olduğu için bilmeyen tasarımcılar için birçok yararlı dersler bulunmakta. işte css 3 öğrenmek için yararlı dersler;

Introduction to CSS3 – Part 1: What Is It?
(CSS 3'e giriş - bölüm 1 : nedir?)

Get Started with CSS
(CSS 3'e başlayın)

The fundamental problems with CSS3
(CSS 3 Hakkında Temel Sorular)

tüm seviyelerdeki javascript meraklıları için js kaynakları. başlangıç seviyesinden, profesyonel seviyeye kadar tüm konulara değinilmiş bu kaynakları bir yerlere not etmenizde fayda var.

1. Mozilla Developer Center

mozilla dev center her seviyeye hitap eden bir kaynak. javascript'e girişten tutun da, versiyonlar arası farklara kadar her türlü konuya değinilmiş bir site. hünerlerinizi
arttıracak, işlerinizi kolaylaştıracak araçlara da yer veriyor. bu araçlar firefox add-on' larından ide' lere kadar uzun bir yelpazede. ayrıca bilgi paylaşımı için birçok hizmet de
mevcut. posta listeleri, haber toplulukları, google groups, beslemeler ve irc bunlardan birkaçı.yeni başlayanlara tavsiyem Core JS 1.5 Reference'tan başlamaları. basite kaçsa bile işi js uzmanlarından görmek insanı daha da bir geliştiriyor, ufkunu açıyor. regular expression'dan tutun da nesnelere, alan adlarına kadar o kadar çok konuya, o kadar açıklayıcı bir biçimde değinilmiş ki kolay kolay kopabileceğinizi sanmıyorum.

Her ne kadar W3C'nin CSS3 tanımlamaları üzerinde çalışmalarını tamamlamamış olsa da, Mozilla Firefox, Opera ve WebKit tabanlı tarayıcılar (Safari, Chrome) halihazırda CSS3'ü tamamen ya da kısmen destekliyor durumda.

Bir web geliştiricisi olarak modern ve gelecekteki web standartları hakkında bilgi sahibi olabilmek önemlidir. Diğer geliştiricilerden bir adım önde olmak için yazının devamında bulacağınız CSS3 hakkında 20 mükemmel kaynak size CSS 3 öğrenmenizde yardımcı olacaktır.

1. CSS3 İlerleme Raporu

CSS Çalışma Ekibi tarafından geliştirilen CSS3 İlerleme Raporu web sitesi tüm CSS3 modüllerinin geçerli durumlarını belirtiyor. Özellikle CSS3'ün gelişimine katkıda bulunan ya da bulunmak isteyen geliştiriciler için bu kaynak, üzerinde çalışılan alanları görüp nereden katkıda bulunabileceğinize karar vermede yardımcı olacaktır.

CSS3 ile birlikte web tasarımında yaratıcılıkta patlamaya yol açacak pek çok yeni özellik bulunuyor. Bu özellikler CSS'nin stilleme kurallarında yer alıyor ve hazırlıkları halen süren CSS3 Tanımlaması'nda yer alıyor. Aslında bu yeni özellikleri müşterileriniz için geliştirdiğiniz web sitelerinde henüz önümüzdeki birkaç yıl boyunca kullanamayacaksınız ancak tasarım blogları ve Web tasarım komünitesini hedefleyen web siteleri, web tasarımının sınırlarını zorlamak için bu özellikleri kullanaral tasarımınıza biraz daha güzellik katabilirler ve endüstriyi geleceğe taşıyabilirler.

Yazının devamında bulacağınız 5 teknikle şimdiden geleceğin teknolojisi için hazırlık yapmaya başlayabilirsiniz.

1. Border Radius

Muhtemelen günümüzde en çok kullanılan CSS3 tekniği border-radius elementi. Standart HTML blok elementleri kare şeklindedir ve 90 derecelik köşelere sahiptir. CSS3 ile birlikte gelecek olan bu yeni özellik ile birlikte yuvarlatılmış köşeleri de web sitelerimizde kullanabileceğiz.

-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;

border-radius ayrıca köşelerin her birini ayrı ayrı stillememize de izin veriyor ancak bunun için kullanılan sözdizimi -moz ve -webkit için biraz farklı:

-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;

Bu özellik şimdilik Firefox, Safari ve Chrome tarafından destekleniyor. İlgili özellik ayrıca Twitter üzerinde de kullanılıyor.

Ayrıca bakınız:

• W3C şablonu
• CSS3.info'da border-radius
• Web Sanatı

Modern web tasarımı CSS olmadan olmaz. CSS'in esnekliği web geliştiricilerine güncellemesi daha kolay ve daha hızlı web siteleri yaratmasına olanak sağlar. Toxel, bu konuda müthiş bir arşiv oluşturmuş. İpuçları, teknikler, şablonlar, dersler, galeriler, kaynaklar ve araçlar hakkında bir 50 adet makaleyi bir araya toplamış. Mutlaka inceleyin.

css ipuçları ve teknikleri

• Web Tasarımınızı CSS3 ile Birlikte Geleceğe Hazırlayın [Smashing Magazine]
• CSS Tipografi: Kontrast Teknikleri ve En İyi Alıştırmalar [Noupe]
• Güçlü CSS Teknikleri ve Etkili Kodlama [Smashing Magazine]
• Linkler İçin Süper Havalı 4 Efekt [Css Globe]
• CSS Ustalarının 10 Prensibi [NETTUTS]
• Kodunuzu Temiz Tutmanız İçin 12 Prensip [Smashing Magazine]
• Tüm Zamanların 101 CSS Tekniği - Bölüm 1 [Noupe]
• Stillerinizi CSS Reset'i ile Resetlemek [Six Revisions]

• Onlarsız Yaşayamayacağınız 53 CSS Tekniği [Smashing Magazine]
• Tüm Zamanların 101 CSS Tekniği - Bölüm 2 [Noupe]
• CSS'te Yapsısal İsim Verme Adeti [Six Revisions]
• 10 Zorlayıcı Fakat Muhteşem CSS Tekniği [NETTUTS]
• CSS Styleguide'larıyla Kodun Okunabilirliğini Arttırmak [Smashing Magazine]
• 8 Özel Tek Satırlık CSS İpucu [Css Globe]
• 20 Üzeri Yaygın CSS Bug'ı ve Çözümleri [Noupe]
• 30 Üzeri Kopya Kağıdı (Cheat Sheet) ve Rehber [All Web Design Resources]
• Size CSS 3'ü Tanıtacak 5 Teknik [NETTUTS]
• Daha İyi CSS Kodlaması İçin 70 Uzman Fikri [Smashing Magazine]