Günümüz anlatım ve sunumlarında görsel yükü artık infografikler (infographic) taşıyor. Dev firmaların da büyük verilerini yine infografik şabloları ile sosyal medyada anlatır olması bu tasarım tipini daha da popüler kılmakta.
Genellikle Adobe Illustrator üzerinde hazırlanan ve düzenlebilen bu şablonları siz de anlatımlarınızda kullanmak ister misiniz? Adobewordpress ailesi olarak sizler için 10 kaliteli ve ücretsiz infografiği derledik.
(daha&helliip;)
Eğlenceli bir makale ile yine sizlerleyiz. Bugün sizlerle deftere çizeceğimiz bir eskize hayat vereceğiz. Böylece web tasarımının en derinlerine dokunmuş olacağız. Biraz uzun soluklu olsa da gayet eğlenceli. Yukarıdaki gibi deftere karaladığımız tasarımları ilk Photoshop‘a, daha sonra da HTML ve CSS‘e dökeceğiz. Tabii bu işlemleri yaparken bütün bu teknolojilerin en son versiyonlarını ve en güncel tanımlarını kullanacağız. Herşey hazır olduğunda aşağıdakine benzer bir sonuç elde edeceğiz.
Başlamaden önce malzemelerimizi hatırlayalım :
Responsive WordPress temaları üzerine konuşmaya devam ediyoruz.
Mobil cihazlarının kullanımının artmasıyla Responsive kelimesini daha sık duymaya başladık.İşte karşınızda Ağustos ayında sizler için seçtiğimiz 10 adet ücretsiz WordPress teması.
Liste gayet kaliteli, bu temaların niçin bedava dağıtıldığını merak edeceksiniz. (daha&helliip;)
Sosyal ağların günden güne büyümesi tasarımcıları, bu alanlardaki kitlelerini genişletmeye zorluyor.
Önceki makalelerimizde birçok sosyal ağ iconu paylaşmıştık. Fakat bu sefer CSS3 desteğiyle performans dostu bir sosyal ağ kutusu hazırlayacağız. Görsel açıdan da şık olan bu kutuyu çok beğeneceksiniz!
(daha&helliip;)
Web sayfanıza renkli geçişlere sahip etkileyici bir menü hazırlamak ister misiniz? Hem de sadece CSS kullanarak… Aşağıdaki css menü örneğini test ederek başlayabilirsiniz.
(daha&helliip;)
Etiketler, web sayfanızda anahtar kelimeler oluşturmanıza ve ziyaretçiyi ulaşmak istediği yere daha kolay ulaştırmanızı sağlar. Ayrıca sitenizin arama motoru optimizasyonu (SEO) işlemi dahilinde de önemli bir adımdır.
Peki WordPress sitelerde etiketlerimizi widget olarak nasıl listeleyeceğiz?
Huzurlarınızda Ultimate Tag Cloud Widget!
CSS’in transition (geçiş) özelliği ile nasıl animasyonlar hazırlayacağımızı öğrenmiştik. Bu makalemde ise JavaScript desteği ile sayfaya girildiğinde otomatik olarak renklenen başlıklar hazırlayacağız. İşin güzel kısmı ise bunu hiçbir görsel kullanmadan yapacak olmamız.
(daha&helliip;)
Bu makalemizin konusu renkli bir yazı efekti. Photoshop ile birkaç dakikada hazırlayabileceğiniz bu yazı tasarımı sunumlarınız için gayet şık bir tercih olabilir.
Başlayalım
Photoshop’u açtıktan sonra istediğimiz boyutlarda yeni bir çalışma alanı oluşturuyoruz. Ben 690×235 piksel boyutlarında çalışacağım. Açtığımız yeni çalışma alanının arkaplan rengini siyah olarak ayarlayabilirsiniz. Burası sizin tercihiniz.
CSS ile birçok button hazırladık. Fakat yukarıda gördükleriniz basılma hissiyatını en çok verenler.
Box-Shadow ile hem 3 boyut hem de basılma efekti oluşturacağız. Yani buttonu tasarlarken bir yandan da hover için alt yapı oluşturmuş oluyoruz. Bu şu demek oluyor; 50% daha hızlı yüklenen buttonlar ve aynı oranda artan performans.
(daha&helliip;)“Bu makalede hazırlayacağımız buttonlar performans-tasarım açısından en iyiler listemde.”
Daha önceki yazılarımda HTML5’in yeni elemanlarını tanımıştık. Şimdi onlardan birini, aside’ı kullanarak birkaç button hazırlayalım.
Beraberinde CSS3 ile aramıza katılan çerçeve özgünleştirme özelliklerini de kullanacağız. Ve tabiki :before :after bölümleri ile objelerimizin sol ve sağ taraflarında farklı farklı stiller oluşturacağız.
HTML 5 offers a new element to mark additional information that can enhance an article but isn’t necessarily key to understanding it.
Yukarıda da anlatıldığı aside çeşitli metinlere destek amaçlı oluşturulabilecek küçük anlatımlardır. Yazının altında duran alıntı metinler gibi olduğu söylenebilir. Kullanılması zorunlu değildir fakat uzun makalelerde anlaşılabilirliğin arttırılması için tavsiye edilir. Biz ise yeni kod birimini button olarak kullanacağız. HTML5’in temelinde aside’ın button işlevine dair bir anlatım yok. Fakat HTML5’in sunduğu en büyük yenilik özgürlük!
(daha&helliip;)
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
WordPress SEO by Yoast Türkçe Derslerle AdobeWordPress’te!
CSS Variables (Custom Properties) nedir?
Bootstrap Class Listesi
2021 Logo Trendleri