text | bildirgec.org

yazılara verilen hoş görünümlerin çekiciliğini anlatmaya gerek yok sanırım. örneğin hoş ve sade bir logonun bazen ziyaretçide bıraktığı intiba onun siteye bakışını değiştirebilir. benim de bu konuda araştırmalarımda yararlandığım, eğitimlerden seçtiğim birkaçının burada paylaşılmasının iyi olacağını düşündüm. Şurada gördüğüm bir photoshop eğitimini ve kullanılan tekniklerin çok kullanışlı ve yararlı olduğunu düşündüm. aynı teknikleri kullanarak siz istediğiniz her objeye gayet hoş bir gerçeklik kazandırabilirsiniz. İçinde öğrenebileceğimiz birçok şey var. İsterseniz linki takip ederek eğitimi orijinalinden de takip edebilirsiniz ama ben de bu yazıyı yazarken adım adım uygulayacağımdan orijinalinde yaşayabileceğiniz eksiklikler ya da atlamalar yaşanmayacaktır. Öyleyse yazımıza başlayalım:

çalışmamızın son hali bu şekilde olacak

Başlarken
En başta ışık ve gölgeyle alakalı aşağıdaki basit resmi incelemekte fayda var. Işığın vuruş yönü, gölge ve gölgenin düşüşü hakkındaki mantığımızı netleştirmek için bir göz atıp eğitime başlayalım.

light diagram

eskiden dinamik web sayfaları derken bunun server-side kısmını ele alırdık. ajax ile birlikte artık sadece kod değil görüntüde oldukça dinamik, yerinde düzenleme ile yapılan değişiklikler, kendini yenileyen div-ler ve benzer uygulamalar. hem programcının işini basitleştirdi, hem de ziyaretçinin daha hoş görünen bir sitede gezmesine sebep oldu. başlıktanda anladığınız gibi işimizi kolaylaştıracak ajax kütüphanelerinden neredeyse en ünlüsü olan jquery ile yapılmış örnekleri sizle paylaşmak istedim. bu örnekleri kullanmasınız bile jquery dili ve kullanışlılığı açısından size bir fikir verecektir.

*geçiş efektleri

innerfade

(tasarımlar üzerine uygulandığında iyi çalışan standart bir geçiş efekti)

flip

(flash'a benzeyen ama saf jquery ile yapılan geçiş efekti)

jquery circulate

(dairesel hareket kullanan bir animasyon)

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)