Bu 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.
(daha&helliip;)
IMGRID, 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.
Web 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
(daha&helliip;)
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;)
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?
CSS 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.
CSS ile görsellere verilen geçiş efektlerinden daha önce bahsetmiştik. Şimdi yavaş yavaş detaylandırıyoruz.
Bu makalede sadece bir adet teknikten bahsedeceğim. Bu tekniği iki ayrı görsel tipi üzerinde uygulayıp sonuçları sizinle paylaşacağım.
İlk olarak örneği görüntülemenizi öneririm.
(daha&helliip;)WordPress sitenizde anasayfa konularının sağ tarafına ilgili kategorinin görselini koymanız mümkün. Madde madde konuyu detaylandırmadan önce aşağıdaki kategorileri içeren bir sitemiz olduğunu varsayalım.
Kategori Adı — Kategori ID Numarası
Makaleler — 1
Dersler — 4
WordPress Kullanıcılarının En Sık Karşılaştığı Hatalar ve Çözümleri
Sitenize Kolayca Slider Ekleyin
Photoshop’u Türkçe Yapma, Türkçeleştirme
Kolayca fotoğraflarınızın kalitesini arttırın!
CSS Renk İsimleri
Sadece HTML5 ile Geliştirilmiş 20 En Etkileyici Oyun
After Effects Ders 1 : Giriş
Ders 2 : Bootstrap Grid (Izgara) Yapısı
CSS3 ile Animasyonlu Flat Butonlar