açıklama

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?

  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 ve jQuery Yardımıyla Resimlere Caption

Vatanay Özbeyli Yorum yazın CSS3, jQuery, Tasarım Unsurları

Merhaba arkadaşlar. Bu yazımda CSS ve jQuery yardımıyla görsellerimiz için açıklama metinleri oluşturacağız. Bu işlemi yaparken jquery-1.8.3.min.js dosyasına ihtiyaç duyacağız.

Dosyayı buradan indirebilirsiniz veya direkt olarak aşağıda gösterdiğim gibi çağırabilirsiniz.

Bu işlem içerisinde JS kodları barındırsa da performans olarak problem yaratabilecek nitelikte değil. Yani hiç düşünmeden kullanabilirsiniz.

JavaScript‘in replace koduyla çalışmakta. Sayfa içerisindeki altyazı classına sahip tüm görsellerin title değerini örnekte gördüğünüz gibi göstermekte. (daha&helliip;)

Devamını Oku

CSS ile Etiketlenmiş (Ribbon) Kutu

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

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