1. HTML Entity Character Lookup

Yazmış olduğunuz harf ve karakterlerin html karşılığını bulabiliyorsunuz.

2. Blueprint CSS framework

Çıktı alabilmeniz için proje üzerinde tablolarını kullanarak sağlam bir temel sağlar.
3. Typetester

Web tasarımcısının hayatını kolaylaştıran bu uygulama ekran için font karşılaştırması yapan çevirimiçi bir uygulamadır.

4. Em Calculator

Css tasarımı yaparken ölçeklenebilir ve erişebilir küçük bir javascript aracıdır.

5. Web Developer Toolbar

Firefox için hazırlanan bu uygulama ile menü ve araç çubuğunuza web geliştirici araçları ekleyebilirsiniz.

6. MeasureIt

Web sayfası üzerinde piksel genişlik ve yüksekliği hesaplamak için cetvel kullanarak çizim yapabilirsiniz.

7. ColorZilla

Yine firefox için diğer gelişmiş araçlar gibi renk seçimini iyi bir şekilde yapmanızı sağlıyor.

8. Firebug

Bu eklenti ile haya ayıklayabilir, düzenleyebilir ve css, html, javascript ekranları ile detaylı bir şekilde kod yapısını inceleyebilirsiniz.

9. Designers Toolbox

Her çeşit baskı ve web döküman boyutları

10. What the Font?

Bir resim göndererek veritabanında bulunan en yakın sonuçları size bildiren bir uygulamadır.

11. Formspring

Bu uygulama kendi bünyesinde bulunan bilgiler ile bütünleşik olarak firma ve organizasyonlara online form hazırlama imkanı verir.

12. Easy Web Form Builder

Sitenizi farklı tarayıcılarda test edebilirsiniz.

13. Icon Finder

Simge arama motoru

14. Button Browser

Buton galerisi ve Buton hazırlayıcı

15. Rounded Corner

Köşeleri yuvarlatılmış kutular oluşturmanızı sağlar ve resim dosyaları ile beraber html-css kodunu sizlere sunar.

16. BlogFlux Button Maker

Buton oluşturabileceğiniz güzel bir uygulama.

17. Vecteezy

Ücretsiz vektör grafikleri edinebilirsiniz.

18. Background Image Maker

Arkaplan grafikleri oluşturabileceğiniz güzel bir uygulama.

19. Photoshop Brushes

Bilgisayarınıza yükleyebileceğiniz photoshop fırça setlerine ulaşabilirsiniz.

20. Tartan Maker

Klas tasarımcılar için yeni moda uygulaması.

21. Color Schemer

Renk yönetimi için kullanabileceğiniz en iyi araçlardan birisidir.

22. Webs

Web sitenizi ücretsiz oluşturabilirsiniz.

23. Sampa

Ücretsiz web sitesi oluşturabileceğiniz güzel bir uygulama.

24. Format Pixel

Çevirimiçi dergi, broşür, katalog ve portföy oluşturabileceğiniz faydalı bir site.

25. Weebox

Flash tabanlı website oluşturmanızı sağlayan bir uygulamadır.

• kaynak: Bildirgec.org | devsnippets.com | pelfusion.com

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

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ı

2. Border Image

border-image

Adından da anlaşılabileceği üzere border-image, her bir nesnenin sınırları için bir görsel kullanabilmemizi sağlıyor. İlk olarak görsel, nesenin her bir köşesi için oluşturuluyor. Görselin her bir köşesi, HTML nesnesinin bir köşesine işaret ediyor. Ardından bu görsel aşağıdaki sözdizimi kullanılarak siteye aktarılıyor.

border: 5px solid #cccccc;
-webkit-border-image: url(/images/border-image.png) 5 repeat;
-moz-border-image: url(/images/border-image.png) 5 repeat;
border-image: url(/images/border-image.png) 5 repeat;

{border: 5px;} özniteliği sınırın genel genişliğini belirtirken ardından uygulanan her bir border-image kuralı görsel dosyasını hedefliyor ve tarayıcıya görselin o 5px genişliğindeki alanın ne kadarını doldurması gerektiğini söylüyor.

Sınır görselleri de tıpkı köşelerde olduğu gibi sınır başına tanımlanabiliyor. Bu sayede her bir sınır için farklı görseller kullanılabilmesinin de önü açılmış oluyor.

border-bottom-right-image
border-bottom-image
border-bottom-left-image
border-left-image
border-top-left-image
border-top-image
border-top-right-image
border-right-image

Bu özellik Firefox 3.1, Safari ve Chrome’de destekleniyor. Özellik ayrıca Blog.SpoonGraphics üzerinde de kullanılmış.

Ayrıca bakınız:

• W3C Taslağı
• CSS3.info’da border-image
• Firefox üzerinde border-image

3. Kutu ve Metin Gölgeleri

box-shadow

Gölgeler: Gölge efektini hanginiz sevmiyorsunuz ki? Bu efektler bir web tasarımını doğru kullanıldığında çok güzel, yanlış kullanıldığında da çok kötü yapabilirler. Şimdi, CSS3 ile birlikte gölge efekti oluşturmak için Photoshop’a bile ihtiyacınız olmayacak. Bugüne kadar bu özelliği sitelerinde kullanmaya cesaret edenler ortaya fena işler çıkarmadılar. Özelliğin kullanımına güzel bir örnek olarak bu yıl yayımlanmaya başlayan 24 Ways websitesi gösterilebilir.

-webkit-box-shadow: 10px 10px 25px #ccc;
-moz-box-shadow: 10px 10px 25px #ccc;
box-shadow: 10px 10px 25px #ccc;

İlk iki öznitelik gölgenin elementten ne kadar uzağa kadar esneyeceğini gösteriyor. Yukarıdaki kod örneğinde bu x ve y açıları için 10 px olarak belirtilmiş. Üçüncü öznitelik ise gölgenin bulanıklık seviyesini belirtirken son öznitelik ise gölgenin rengini tanımlıyor.

Bununla birlikte text-shadow özelliği aynı efektin metin üzerine de uygulanabilmesini sağlıyor.

text-shadow: 2px 2px 5px #ccc;

Şimdilik bu özellik Firefox 3.1, Safari, Chrome (sadece box-shadow) ve Opera (sadece text-shadow) üzerinde kullanılıyor. Örneğin kullanıldığı web sitesi ise 24 Ways.

Ayrıca bakınız:

• W3C Taslağı
• CSS3.info’da box-shadow
• W3C Taslağı
• CSS3.info’da text-shadow

4. RGBA ve Geçirgenlik İle Kolay Saydamlık

opacity

Web Tasarımında PNGlerin Kullanımı saydamlığı anahtar bir tasarım özelliği haline getirdi. CSS3 ile birlikte alpha ve geçirgenlik kurallarını kullanmak mümkün olacak.

rgba(200, 54, 54, 0.5);
/* örnek: */
background: rgba(200, 54, 54, 0.5);
/* ya da */
color: rgba(200, 54, 54, 0.5);

İlk üç numara kırmızı, yeşil ve mavi renk kanallarına işaret ederken son değer ise saydamlık efektini verecek olan alpha kanalını belirtiyor.

Alternatif olarak geçirgenlik kuralı ile birlikte renk ve geçirgenlik değerlerini ayrı ayrı belirtmek mümkün olacak:

color: #000;
opacity: #0.5;

Bu özellik Firefox, Safari, Chrome, Opera (opacity) ve IE7 (opacity, sorunlu). Bu özellik yine 24 Ways sitesinde kullanılmış.

Ayrıca bakınız:

• W3C Taslağı
• CSS3.info’da RGBA
• Saf CSS Geçirgenliği

5. @font-face İle Özel Web Yazıtipleri

@font-face

Web üzerinde daima güvenle kullanabileceğiniz yazıtipleri vardır: Arial, Helvetica, Verdana, Georgia, Comic Sans (hmm…) vs. Şimdi @font-face CSS3 kuralı ile birlikte yazıtipleri çevrimiçi bir dizin üzerinden çağrılabilecek ve web üzerinde kullanılabilecek. Ancak bu özellik telif hakkı sorunlarını da beraberinde getireceğinden şimdilik kullanabileceğiniz sadece birkaç yazıtipi bulunmakta.

Bu özelliğin kullanılabilmesi için gereken kod şu şekilde olmalıdır:

@font-face {
font-family:'Anivers';
src: url('/images/Anivers.otf') format('opentype');
}

Ardından font-family’nin geriye kalan öğeleri de günümüzde kullanıldığı şekilde kullanılmaya devam edecektir.

h1 { font-family: ‘Anivers’, Helvetica, Sans-Serif; }

Bu özellik Firefox 3.1, Safari, Opera 10 ve IE7 (çok sorunlu, eğer kendinizi yeterince cesur hissediyorsanız o zaman IE üzerinde font-face’i çalıştırmayı deneyebilirseniz) üzerinde çalışıyor. Bu özelliği kullanan bir web sitesi olarak TapTapTap gösterilebilir.

Ayrıca bakınız:

• font-face ile kullanılabilecek yazıtipleri
• IE’de font-face’i kullanmak
• Web yazıtipleri, bir sonraki büyük şey – A List Apart

Her ne kadar CSS3 halen geliştirme aşamasında olmasına rağmen burada listelenen kurallar daha şimdiden bazı tarayıcılar tarafından desteklenmektedir. Özellikle Safari‘nin bu yeni özellikler için tam desteği bulunuyor. Ancak ne yazık ki, bence dünyanın en iyi tarayıcısı olmasına rağmen Safari’nin kullanıcı sayısı halen çok değil bu sebeple bu özellikleri sırf Safari kullanıcıları için eklemek, en azından şimdilik pek mantıklı bir çözüm değil. Ancak Apple’ın Mac bilgisayarlarının kullanım oranının gün geçtikçe günlük hayatımıza girmesi ile birlikte Safari’nin de kullanım oranı önemli ölçüde artacaktır.

Firefox da öte yandan İnternet kullanıcılarının %20′den fazla bir kesimini içeriyor. Daha da önemlisi, pek yakında yayımlanacak olan Firefox 3.1 pek çok CSS3 özelliğini de destekliyor. Firefox kullanıcılarının pek çoğunun tarayıcılarını güncelleyeceğini varsayarsak, bu tip yeni stilleme kurallarını destekleyen tarayıcıları kullanan kullanıcıların sayısı önemli ölçüde artacaktır.

Google Chrome ise bu yıl içerisinde yayımlandı. WebKit işleme motorunu kullanan Chrome, aynı işleme motorunu kullanan Safari ile aşağı yukarı aynı özelliklere sahip. Safari özellikle Mac kullanıcıları arasında popülerken, Chrome’nin de piyasaya giriş yapması ile Windows kullanıcıları arasında popülerlik kazanmaya başlıyor.

Yüzde bazında W3′ün tarayıcı istatistiklerine göre Kasım 2008 itibarıyla W3School kullanıcılarının %44.2′si Firefox, %3.1′i Chrome, %2.7′si ise Safari kullanıyor. Bunun diğer anlamı ise bu yeni özellikleri İnternet kullanıcılarının %50′sinin görebilecek olması. Özellikle web tasarım komünitesi içerisinde, ki bu kesim tarayıcı seçimi konusunda daha özenli davranıyor, CSS3 desteğine sahip tarayıcıların kullanım oranı %73.6‘ya kadar çıkıyor (Blog.SoonGraphics‘e göre).

6. Kötü yanları

Web siteniz artık pek çok güzel tasarım özelliğine kavuşmuş olabilir, ancak bu özellikleri kullanırken daima aklınızın bir köşesinde tutmanız gereken bazı kötü tarafları da yok değil:

• Internet Explorer: İnternet kullanıcılarının %46′sı bu yeni özellikleri göremeyecek, o yüzden bu yeni özellikleri web sitenizin hayati önem taşıyan bölümlerinde kullanmayın. İkincil tercihlerin de CSS kodunuz üzerinde oluşturulmuş olmasına dikkat edin.
• Doğrulanmamış Stil Şablonları: Bu CSS3 özellikleri henüz son hallerine ulaşmış değiller. Şimdilik bazı tarayıcıları hedefleyen etiketlerle birlikte kullanılabiliyor. Bu özellikler, CSS stil şablonunuzun doğrulanmaması ile sonuçlanabilir.
• Fazladan CSS Kodlaması: Son maddenin devamı olarak her bir tarayıcıda aynı kuralı uygulamak için tarayıcıları ayrı ayrı etiketlemenin yanısıra CSS derlemesinin son kodunu da sitenize eklemek, CSS kodunuzun uzamasına yol açacaktır.
• Potansiyel Olarak Berbat Kullanımlar: Tıpkı Photoshop filtrelerinin berbat kullanım örneklerine rastladığımız gibi bu yeni stilleme özelliklerinin kötü kullanımı sonucunda da ortaya berbat web siteleri çıkabilir. Özellikle gölge efekti daha şimdiden kulaklarımın çınlamasına yol açıyor. Özellikle kurumların pazarlama departmanlarının bu özelliği ne derecede kullanmak isteyebileceklerini düşünmek istemiyorum.

• Kaynak: Bildirgec - Smashing Magazine