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


IMGRID ile Resimlerinizi Yönetin

imgridIMGRID, sizler için hazırladığımız bir resim grid kütüphanesidir. HTML5 ile oluşturulmuş, CSS3 ile stilize edilmiş tasarım jQuery ile fonksiyonel hale getirilmiştir. Ancak yapının esnekliği sadece teknik bazda değil, kullanıcı arayüzü tarafında da bulunmaktadır. 3 ayrı şekilde boyutlandırmayı tek fonksiyon altından sunan IMGRID tamamıyla responsive olarak geliştirilmiştir.

Bütün işlemlerini client side olarak yürüten IMGRID’ın geliştirmeleri Adobewordpress tarafından versiyonlanarak devam edecektir. Şimdi biraz detaylar ve kullanım üzerine konuşalım. Ama öncesinde örneği test etmek isteyebilirsiniz.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

jQuery ile Kırık Resimleri Onarın

broken-imageWeb sayfanızdaki kırık linkleri jQuery desteğiyle bulabilir, bir başka görselle değiştirebilirsiniz. Böylece ziyaretçilerinizin çalışmayan resimlerle karşılamamış olursunuz. İnternette, web sayfanızdaki kırık görselleri size bildiren yüzlerce araç mevcut. Ancak bu işlemi birkaç satır kod yazarak daha hızlı ve kolay bir şekilde yönetebilirsiniz.

İşte karşınızda Adobewordpress tarafından geliştirilen bir diğer jQuery plugini : jQuery Image Fixer

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

lorempixel

Lorempixel ile Sınırsız Random Görsel

Tasarımın dijital kolunda deneme ekranları çizerken büyük metin alanlarını hep Lorem Ipsum aracı sayesinde doldurduk. Yıllar içerisinde Lorem Ipsum resmileşti, bütün tasarım ajansları ve iş kolları tarafından kullanılır hale geldi. Türkçeye de “Taklit Yazı Bloğu” olarak geçti. Masaüstü yayıncılık ile uğraşanlar büyük hız kazandı. Peki ya dijital, hatta çerçeveyi küçültelim, web tasarımcıları? Paragrafları Lorem Ipsum ile bir şekilde doldurduk. Ama onca resim alanı nasıl özgün bir şekilde doldurulacak?

Metinlerin Lorem Ipsum’u varsa görsellerin de Lorempixel’i var!

Lorempixel sınırsız sayıdaki görseli istediğimiz boyutta göstermemizi sağlıyor. Evet, yanlış duymadınız. Lorempixel sayesinde, istediğiniz kategori ve renk yoğunluğundaki görseli, belirleyeceğiniz boyutta özgün bir şekilde web sayfanızda yayınlayabilirsiniz. (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 Background, Background-Size ve Background-Position Artık Çok Kolay!

CSS Arka PlanCSS ile arka plan öğeleri bazen can sıkabiliyor.

Background, background-image, background-size, background-position diye uzayan giden kod satırları insana bildiğini de unutturuyor. Bu yüzden sizler için CSS’in gayet karışık gözüken arka plan yapısını anlatan bir tablo yayınlıyoruz.

Tablo sayesinde arka plan resminin boyutunu, pozisyonunu ve türünü değiştirebileceğiniz kodları test edebilirsiniz. Böylece arka plan resimlerinize tam anlamıyla hakim olabileceksiniz.

Tabloyu görüntülemek için örneğe göz atın.

ÖRNEĞİ GÖRÜNTÜLE

Devamını Oku