div | bildirgec.org

CSS3 tamamen yaygınlaşmasa ve tüm tarayıcılar tarafından tam olarak desteklenmemiş olsa bile birçok başarılı uygulama yapılmakta. Web sitelerinizi daha interaktif ve daha renkli hale getiren bu uygulamalar arasında çizim örnekleri bile bulunmakta. Günümüzde hala imajlar kabul görürken css'nin sınırları zorlanarak ascii karakterler ile birçok farklı çizim örnekleri de yapılıyor. Birçoğunun detaylı açıklaması da verilen aşağıdaki uygulamaların benzerlerini siz de yapabilirsiniz.

Sweet CSS3 Buttons
(Tatlı CSS3 Butonları)

CSS Logo

CSS Olympic Logo
(CSS Olimpik Logo)

Her web projenizde kullanabileceğiniz ilginç bir css ve jquery uygulaması olan jQSlickWrap, metinleriniz ve imajlarınız arasındaki düzeni istediğiniz gibi yönetmeye yarayan bir uygulamadır.

Web sitenizdeki bir yazıda, yazının sağına veya soluna imaj yerleştirebilirsiniz. Genelde imaj çerçevesinin sınırlarını metinler geçemez. Bunu değiştiren jQSlickWrap imaj-metin ilişkisini istediğiniz ölçüde düzenlemenizi sağlar.

Düzgün bir şekli olmayan imajlar ile metinlerinizi tam olarak konumlandırmayı sağlayan bu uygulama ile web siteniz tam bir uyum içine girer. Ayrıca klasik web kültürünün sınırlarından çıkarak sıradışı bir görünüme sahip olursunuz.

CSS ile web tasarımın dışında yapabileceğiniz farklı bir uğraş olan resim çizimi oldukça zor olsada css3 ile birliklikte çok az da olsa biraz kolaylaşmız gözüküyor. pixel'ler kullanılarak yapılan tasarımlar, ascii karakterler ile oluşturulan tasarımlar ve css3 desteklikli tasarımlar bulunmakta. Aşağıda yüksek kalitede css ile yapılan çizimler bulunmakta. Nasıl yapıldığını inceleyebilir, benzer çalışmalara adım atabilirsiniz. CSS ile Yapılan Çizimler;

Twitter Fail Whale

Homer Simpson

Skull with Flames
(Alevli Kafatası)

Homer Simpson

Css ile resim çizilir mi?" diye sorsalar "çizilir ama çok uğraşmak gerekir" derdim. "Peki nasıl çizilir?" deseler ilk aklıma gelecek yöntem div'leri pixel olarak kullanarak uzun uğraşlar sonucu bir resim ortaya çıkarmak olurdu. fakat şimdi anlatacağım çalışmada çok daha profesyonel bir teknik kullanmışlar.

öncelikle şunu belirteyim ki yukarıdaki çok sevdiğim Homer Simpson resmi tamamen Css ile hazırlanmış.

Nasıl mı?

Zen Coding

Bir website tasarımında html kod yazarken ne kadar zaman harcarsınız? Etiketler, özellikler, tırnak işaretleri, parantezler vs. Özellikle de benim gibi bütün karakterleri sıfırdan tek tek yazan biriyseniz sizi bu zaman kaybından kurtaracak ve çok kolayca html/css kodu oluşturabileceğiniz bir uygulamadan bahsetmek istiyorum: Zen Coding.

Zen Coding

html/css kodu yazmanın en hızlı yolu olan Zen Coding Sergey Chikuyonok tarafından geliştirildi. Hem Mac hem de Windows ortamında çalışabilen versiyonları olan Zen Coding'i kullandığınız editöre (dreamweaver, GEdit vs) entegre ederek iç içe geçmiş en karmaşık div yapılarını oluşturma zahmetinden kısa zamanda kurtulabileceksiniz.

HTML4'ün yavaş yavaş beklentilere cevap verememesiyle birlikte yeni arayışlara giren tasarımcılar div ayraçlarını CSS ile verimli şekilde kullanmaya başlamışlardı. Ne kadar iyi kodlamalar yapılsa da HTML4'ün artık yetmediği ortaydı.

HTML5 ise dilde yalınlık ilkesini amaç edinen yeni özellikleri ile kullanıcıların işini kolaylaştıracak. Daha az kodla sitelerimize aynı görünümleri verebileceğiz. Alistapart kaynağında okuduğum html5 içeriğinde bu yalınlaşma gayet iyi açıklanmış.

Tablolar yerine div kullanmak istermisiniz?

Neden div derseniz; css ve javascript'ler ile uyumlu çalışması sonucu tablolar ile yapılan tasarımlar ile elde edemeyeceğiniz görselliği sitelerinize kazandırır ve sitenizin görsel öğelerini kolay ve hızlı bir şekilde yönetebilmenizi sağlar.

divcounter sitesinde istediğiniz web sitesinin kaynak kodu içerisindeki tag'leri saydırabiliyorsunuz. sonuçlar açılma ve kapanma sayıları olarak bir tablo içinde ayrı ayrı listeleniyor.

bildirgec.org sorgulamasının sonucu