CSS ile Üzerine Gelince Parlayan Resimler

css-image-hover-shineBu dersimizde sadece CSS3 tanımlarını kullanarak üzerine gelindiğinde parlayan görseller oluşturacağız. Bu işlemi yaparken efekti barındıracak bir çerçeve ve beraberinde de küçük çaplı bir animasyon tanımı hazırlayacağız.

Örneği incelediyseniz derse başlayalım.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku


HTML5 ve CSS3 ile Resim Açıklamaları

css-html-hover

Bugün sizlerle HTML5 ile gelen figure ve figcaption tanımlarını CSS3‘ün animasyon öğeleriyle süsleyerek şık resim açıklamaları oluşturacağız. Bu işlemi daha önce, HTML5 öğeleri olmadan benzer yollarla “CSS ile SEO ve performans dostu harika resim açıklamaları” başlığı altında hazırlamıştık. Eski makalemizi güncellemektense bu süreçte gelişen teknolojinin nimetlerinden yararlanarak yenisini hazırlamaya karar verdik.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

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 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 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

Sadece CSS ile TAB Mantığı Kullanarak Listeleme

Web 2.0 ile paylaşılan içerik arttı, menüler genişledi, metinler bazen sığmadı, tab tekniği kullanılmaya başlandı. An itibariyle neredeyse her sitede kullanılmakta. Aynı açılır menüler gibi.

Bu yazımda tab tekniğinin temelinden bahsedeceğim. Beraberinde çok beğenerek hazırladığım bir çalışmayı sizinle paylaşacağım.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

CSS3 ile Geçiş Efekti (Transition) Kullanarak Windows 8 Tarzında Kutucuklar Hazırlamak

Her geçen gün JavaScript pastasından bir ısırık daha alan CSS gelişimini sürdürüyor. Bu makalemde ise CSS’in öne çıkan elementlerinden olan geçişleri (transitions) konuşacağız.

Bu yeni kod sistemi sayesinde iki renk, boyut, ölçeklendirme gibi birimler arasında geçiş sağlayabiliyoruz.

Özellikle son günlerde herkesin beğenisini kazanan Windows 8 benzeri menü örnekleri de konumuzun bir parçası.

Makalemize önemli örneklerle ve incelenmesi gereken kaynaklarla devam edelim :

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

CSS Kullanarak Button Tasarlamak

Web sayfalarında form objeleri dışında birçok türde buttonlar kullanılmakta. Bu dersimizde link, buttonlar,spanlar ve diğer tüm sınıflar için kullanılabilir kutular tasarlayacağız.

Ne yapacağımıza kısaca değinecek olursak ; ilk olarak basit bir taslak hazırlayacağız, sonrasında ise bu taslak üzerinden 5 adet örnek yapacağız.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku