CSS ile Üzerine Gelince Büyüyen Resimler

css-hover-zoom-imagesHaziran ayında “Görselleriniz üzerine gelince büyüsün” başlıklı makalemizde,CSS ile görselleri nasıl scale edeceğimizi konuşmuştuk. Bugün de yine aynı yapıyı, birden fazla görselde sunum şeklinde nasıl hazırlayacağımızı konuşacağız.

CSS3 ile yelpazemize renk katan transform tanımı beraberinde scale desteği de sağlıyor.

Moz, ms ve webkit ifadelerini de kullanarak hazırlayacağımız bu yapı görselleri büyütürken ufak bir geçiş efekti de kullanıyor.

Örneği görüntüleyerek başlayabilirsiniz.

ÖRNEĞİ GÖRÜNTÜLE

(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 SEO ve performans dostu harika resim açıklamaları

Merhaba arkadaşlar. Bu makalemizde görsel açıdan olduğu gibi performans ve SEO açısından da inanılmaz başarılı olan bir resim efektini anlatacağız.

Okumakta olduğunuz makalenin türevleri olabilir, fakat tarafımızdan hazırlanan bu CSS kodu yerli ve yabancı kaynaklarda bulabileceğinizin en iyilerinden biri. Neden mi?

  1. Sadece tek division kullanıyor.
  2. Köprü bağlantılar a block veya onclick ile değil, klasik href türünde. Böylece ziyaretçinin browserinin java desteği kapalı olsa bile tam performans ile çalışmakta.
  3. Yukarıda dediğim gibi, kod satırlarının içersinde JS yok. Bu yüzden hızlı ve her kullanıcı tarafından görülebilir.
  4. CSS3 ‘ün yeni teknikleriyle süslü.
  5. Yazılar paragraf içinde, yani tam anlamıyla açıklama metinleri oldular. Böylece arama motorlarının botları görsel arandığında <p> içindeki geniş açıklama metnini yayınlar. Kısaca SEO dostu diyebiliriz.
  6. Yazılar seçilerek kopyalanamaz.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

CSS Sprite Nedir? Neden ve Nasıl Uygulanır?

Sprite IconsCSS Sprite mükemmel tasarımlar oluşturmamızı sağlayan gayet kullanışlı ve hızlı bir teknik.

Görünüşte geçiş efektleri ve görseller olsa da temelinde performans yatmaktadır. Sprite tekniğinin ilk kullanım amacı daha hızlı açılan tasarımlar oluşturmaktı. Fakat CSS3‘ün de aramıza katılışıyla CSS Sprite web geliştiricilerinin güçlü bir silahı haline geldi.

Bu makalemizde Sprite tekniğinin temeline ineceğiz. Beraberinde açıklayıcı bir örnek hazırlayacağız.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

jQuery ile Açılır Pencere

jQuery ile Açılır Pencere

Sitenizde yapmak istediğiniz duyurular mı var? Ziyaretçilerinize küçük bir ipucu vermek mi istiyorsunuz? Canlı sohbet ve iletişim için uygun açılır pencere yapamıyor musunuz? Bu makalemiz sizler için geliyor!

tabSlideOut sayesinde web sayfamıza açılabilen pencereler ekliyoruz. jQuery‘nin bu yeni yardımcısı penceremize mükemmel özellikler katmamızı sağlıyor. Lafı uzatmaya gerek yok, sizler için hazırladığım örneği görüntüleyerek işe başlayabilirsiniz.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku