hover

HTML5 ve CSS3 ile Resim Açıklamaları

Vatanay Özbeyli 3 Yorum CSS3, HTML5

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.

CSS ile Linklerinize Animasyonlu Hover

Vatanay Özbeyli 2 Yorum CSS3

Klasik altı çizgili yazıları animatif hale getirmeye ne dersiniz? CSS3’ün after tanımlamasıyla birlikte bu işlemi yapmak mümkün.

Bu dersimizde linklerimiz için şık bir hover efekti hazırlayacağız.

CSS ile Üzerine Gelince Dönen Resim

Vatanay Özbeyli 6 Yorum CSS3

Bildiğ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.

CSS ile Üzerine Gelince Büyüyen Resimler

Vatanay Özbeyli 10 Yorum CSS3

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

CSS ile SEO ve performans dostu harika resim açıklamaları

Vatanay Özbeyli 3 Yorum CSS3, HTML5, SEO

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?

Sadece tek division kullanıyor.
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.
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.
CSS3 ‘ün yeni teknikleriyle süslü.
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.
Yazılar seçilerek kopyalanamaz.

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

Vatanay Özbeyli 8 Yorum CSS3, Tasarım Unsurları

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

Sadece CSS ile TAB Mantığı Kullanarak Listeleme

Vatanay Özbeyli 2 Yorum CSS3, Tasarım Unsurları

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.

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

Vatanay Özbeyli 7 Yorum CSS3, Tasarım Unsurları

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 :