css örnekleri | bildirgec.org

Günümüzde CSS kullanmayan site sayısı gittikçe azalırken buna ters orantılı olarak gelişen CSS araçlarının sayısı da gün geçtikçe artıyor. Her yeni bir araç, CSS geliştiricilerinin projeler üzerinde harcadıkları zamanı azaltmaya ve daha verimli kodlama yapmalarını hedefliyor.

İşte tam da bu noktada Back to Essentials web sitesi, İnternet üzerindeki CSS araçlarına yönelik bir liste hazırlamış. Ben de ilgilenen bildirgec okurları için bu yazıyı yayımlama gereği hissettim. Umarım işinize yarar.

Yazıtipleri

Typetester

Ekranda farklı yazıtiplerini karşılaştırabilmenize yarayan bir uygulama.

Em Calculator

Em Calculator, küçük bir JavaScript aracı olup genişletilebilir ve erişilebilir CSS tasarımları oluşturmanıza yardımcı oluyor. Pixel değerindeki verileri bağıl em birimlerine dönüştürüyor.

CSS'yi kodlamak kolay olabilir ancak buna rağmen her kodcuyu delirtebilecek bazı konseptleri de bulunmaktadır. Bu yazımızda kimilerine göre zor olan ancak anlaması oldukça kolay olan CSS derslerini bir araya getirerek CSS bilginizi bir adım daha ileriye taşımanıza yardımcı olacak dersleri inceledik.

1. CSS Sekmeler ve Navigasyon

1.1. Genişleyebilen CSS Sekmeleri Dersi
Genişleyebilir CSS sekmelerinin anlamı, sekmenin içerisindeki metnin uzunluğuna göre genişleyebilen sekme başlıklarıdır. Kodun özünde start.gif ve end.gif adında iki adet görsel bulunuyor. start.gif görseli boyutu genişletmek için kullanılırken end.gif görseli değişmeden kalıyor.

1.2. Gelişmiş CSS Menüsü
Bu rehberde Photoshop'taki watercolor efektini nasıl tasarlayabileceğiniz anlatılmış. Bu rehber size adım adım bir menü tasarımını nasıl kırpabileceğinizi ve ardından CSS kullanılarak nasıl onları bir araya getirebileceğinizi gösteriyor. Pek çoğunuz muhtemelen dikey ya da yatay menünün CSS ile nasıl kodlanacağını bilyorsunuzdur. Gelin şimdi bunu bir sonraki seviyeye taşıyarak CSS'nin position özelliğini kullanan gelişmiş bir menü tasarlayalım.

free css drop-down menu

Tomas Bagdanavicius tarafından geliştirilmiş ve ücretsiz olarak sunulan, aralarında NVIDIA.com, Adobe.com, MTV.com sitelerinin menü örneklerinin de yer aldığı, Aşağı Açılır (Drop-Down) css menüler, hız, kullanım ve düzenleme esneklikleri ile site menüleriniz için güzel alternatifler olacaklar.

NVIDIA.com sitesinin menü örneğini görmek için buraya tıklayabilirsiniz.

NVIDIA.com horizontal improved css drop-down menu

850+ 1,2,3 kolonlu, rengarenk ve akışkan özellikleri ile kaliteli, CSS ve XHTML hazır tema şablonlarını, ücretsiz olarak indirebileceğiniz bir tema galerisi.

Örnek:

Temaları önizleme yapabilir ve temalar hakkında yorumunuzu site üzerinden diğer kullanıcılar ile paylaşabilirsiniz.İsterseniz kendi temanızı ekleyerek gelecek yorumlar ile tasarımınız hakkında bilgi sahibi olabilirsiniz.

Tema galerisine gidin.

css, yeni nesil web tasarımı için neredeyse kaçınılmaz hale geldi. Esneklik, tasarım güzelliği ve diğer pek çok nedenden ötürü artık css pek çok tasarımcının gözdesi konumunda.

Nope sitesi 40'dan fazla ders, ipucu ve örneği toplayarak harika bir liste hazırlamış. Bu listede pek çok yararlı css tekniğine ilişkin ders, yöntem bulmanın yanısıra; size ilham verecek harika tasarımlar göreceksiniz.

CSS Style Generator

CSSText, css ile metin düzenlemek için kullanılabilecek, online bir araçtır.Site üzerinde bulunan, düzenleme seçenekleri ile css bilgisine ihtiyacınız olmadan, metinlerinizi istediğiniz şekilde düzenleyebilir, düzenlenen metnin son halini görebilir ve kodlarına ulaşabilirsiniz.

Düzenleme Seçeneklerinden;

ÜST BÖLÜM
bold - Kalın Yazı
underline - Altı çizgili Yazı
overline - Üstü Çizgili Yazı
italic - İtalik Yazı
oblique - Eğimli Yazı
line-through - Üstü Çizgili Yazı
uppercase - Sadece büyük harf
SmallCaps - büyük-küçük harflerin hepsini büyük harfe çevirir. Fakat büyük harfle yazılmış olanları daha büyük, küçük olanları ise daha küçük yazar.