CSS ile Üzerine Gelince Dönen Resim

css-ile-donen-resimBildiğiniz gibi artık web tasarımında perspektif planlama yapabiliyoruz. Ayrıca transform tanımıyla da tasarımlarımızı istediğimiz yönde çevirebiliyoruz. Bu teknikler önceleri Flash desteğiyle yaptığımız animatif etkileşimleri HTML5 ve CSS3 ile çok daha hızlı ve performanslı yapmamızı sağlıyor. Daha önceleri de bol bol konuştuğumuz geçiş efektleri sayesinde bu animasyonları daha yumuşak hale de getirebiliyoruz.

Bu dersimizde bütün bu teknikleri bir arada kullanarak güzel bir hover efekti oluşturduk.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku


CSS veya jQuery ile Açılan/Kapanan Div

jQuery & CSS3 Toggle

Gelişen ve yenilenen web tasarımı dilleri sayesinde Toggle, yani fareyle etkileşim kurulduğunda gözüken, etkileşim kesildiğinde kaybolan elemanlar hazırlamak fazlasıyla kolay. Artık, eskiden olduğu gibi bu işlemi yapmak için sayfalarca JavaScript veya Action Script yazmamıza da gerek kalmıyor.

Bu makalemizde Adobewordpress ailesi olarak size iki adet açılıp/kapanan div örneği hazırlayacağız. Bunlardan birisi sadece CSS ile çalışacak, diğeri ise jQuery desteği ile işleyecek. (daha&helliip;)

Devamını Oku

CSS ile üzerine gelince açılan kutucuklar oluşturun!

CSS Açılabilir KutuWeb sayfanıza CSS desteği ile üzerine gelince açılan bilgi kutucukları ekleyebilirsiniz. Overflow elemanının hidden değeriyle gizleyeceğimiz detaylı bilgi sadece onmouseover ile aktif olmakta. Hazırlayacağımız örnekte bu uygulamayı HTML5 ile listeye eklenen section elemanı ile birlikte kullanacağız. Fakat istek dahilinde bu etki div veya table öğeleri için de uygulanabilir.

Makalenin alt kısmından tasarımı canlı olarak test edebilirsiniz.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

CSS ile Etiketlenmiş (Ribbon) Kutu

Merhaba arkadaşlar, önceden GIF veya PNG yardımıyla zar zor hazırlayıp hizaladığımız etiketli kutucuklar (ribbon boxes) artık CSS ile çok kolay!

Border kod satırının hünerleri ile etiketimizi, birkaç gölge efekti ile de dikkat çekici tasarımlar hazırlayabiliriz. Tabi uyumlu renk tonları da bu işin küçük sırrı.

Sizin yapmanız gereken kutunun içine yazacağınız yazıyı ve etiket ismini belirlemek, bu kadar…

(daha&helliip;)

Devamını Oku

Sitenize Duyuru Penceresi Ekleyin

Günümüzde birçok web geliştiricisi duyuru pencerelerini kullanmakta. İnternette de onlarca duyuru penceresi konulu makale var.

Duyuru penceresi dediğimiz şey sayfanın ilk izlenimidir. Hızlı açılmalıdır, kullanıcının kafasını karıştırmamalıdır. Fakat günümüzde birçok web sayfasında sayfa genelinden sonra anca yüklenip açılan duyuru pencereleri görmekteyiz.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku