css örnek | 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.

Css ile (message box) mesaj kutularını bilmeyen yoktur , bu örnekte mesaj kutularını biçimlendirmeyi öğreneceksiniz.
kodlar hakkında kısa bir bilgi;

Clean message box (mesaj kutusunu temizlemek için bir tuş oluşturalım )

...bir DIV layer içerisinde bir kaç text kodu ile birlikte aşağıdaki gibi CSS kodları kullanılır:

css ile kodlama yaparken yazı tipine bir türlü karar veremediğiniz olmuştur mutlaka. farklı farklı yazı tipleri denemiş yada nasıl göründüklerini hatırlamaya çalışmışızdır. işte size bu konuda zaman kazandıracak güzel bir web sitesi.
yazı tipleri ile oluşturulmuş örnekler özelliklerine (yazı tipi, büyüklük vb.) göre kodlandırılmış. beğendiğiniz yazı örneğinin sağ üst köşesinde bulunan "get css" butonuna basmanız yeterli ayrıca fontların mac ve windows görünümlerinede bakabiliyorsunuz.

kaynak

buradan basit bir css menüsünün nasıl yapıldığını görebilirsiniz.

buradan da css ile; sayfa kenarlıkları resmin yanına yazı yerleştirme sayfayı kolonlara bölme sayfa içinde bölüm oluşturma sayfayı dikey veya yatay ortalama mouse üstüne geldiğinde yanıp sönen butonlar mouse üstüne geldiğinde öne çıkan resim gibi bir kaç ugulamanın nasıl yapıldığını görebilirsiniz.