Günümüz web tasarımının en popüler HTML, CSS ve JS frameworklerinden biri olan Bootstrap bünyesinde yüzlerce class barındırmakta. Liste bu kadar uzun olunca hatırlanması da güçleşiyor.
Adobewordpress sizler için bu geniş listeyi tek ekranda topluyor. (daha&helliip;)
Web tasarımının klasikleşmiş popup yapıları yerlerini modallara bıraktılar. Sayfa değişimine gerek kalmadan ve yeni sekme açmadan çalışan modal öğeleri web kullanıcılarına büyük kolaylıklar sağlamakta.
İnternette karşılaştığımız neredeyse tüm modal tasarımları da jQuery desteğiyle hazırlanmakta. Ancak gelişen teknolojiler yeni teknikleri de beraberinde getirmekte.
CSS3‘ün :checked selector tanımı sayesinde hiçbir JavaScript kütüphanesine ihtiyaç duymadan hem basit hem de performanslı modal yapısı oluşturabilirsiniz.
(daha&helliip;)
Web tasarımı ile uğraşanlar bilir, Photoshop ile çizilmiş tasarımları CSS‘e dökmek zor bir zanaattir. Bu yüzden birçok tasarımcı hazırladığı PSD dosyalarını CSS’e çevirmesi için profesyonel destek almak zorunda kalır. Kaybedilen zaman ve para da cabası.
İşte bu aşamada yardımımıza koşan onlarca Photoshop eklentisi mevcut. Bugün, bu listenin en çok dikkat çekenlerinden birini sizler için inceleyeceğiz.
CSS3PS, Photoshop’un CS3 ve sonraki versiyonlarda çalışan, katmanları otomatik olarak CSS kodlamasına çeviren bir eklenti. Ücretsiz bir şekilde kullanabileceğiniz bu eklenti sayesinde PSD to CSS çeviri işlemleriniz fazlasıyla hız kazanacak!
Web tasarımında yer alan en küçük tasarım tiplerinden olan Tooltip öğeleri aslında gözüktüğü kadar basit yapılı değiller. Birçok Tooltip eklentisi büyük bir JavaScript koduyla birlikte fonksiyonel bir hale bürünmekte. Peki ya bütün bu yapıyı minimalize etmek mümkün değil mi?
Adobewordpress sizler için gücünü CSS‘den alan bir Tooltip yapısı hazırladı.
(daha&helliip;)Karşınızda awTooltip
Sadece CSS3‘ün geçiş efektlerini ve Font Awesome’ın şık ikonlarını kullarak etkileyici butonlar tasarlamak mümkün. Adobewordpress, üzerlerine gelince istediğiniz yönde animasyon geçişleri yapan bu butonları olabildiğince basit ve performanslı olarak sizler için hazırladı.
(daha&helliip;)
CSS3 ile web sayfanızda fareyle seçilmiş alanları bile stilize edebilirsiniz. Kütüphanemize eklenen selection tanımlaması Chrome 4.0, IE 9, Firefox 2.0 (-moz), Safari 3.1, Opera 9.6 ve üzeri tüm tarayıcılarda çalışmakta.
Web sayfanız eğer Adobewordpress gibi uzun yazılardan ve alıntılanması gereken içeriklerden oluşuyorsa siz de sitenizin “seçilen alan rengi” ile oynayın. (daha&helliip;)
Facebook‘un kendine has tasarımının en dikkat çekici öğelerinden biri de ‘yükleniyor’ animasyonları. Spinner ve loader diye de tanımlanan bu öğeler CSS ile kolaylıkla hazırlanabilir.
Bu makalemizde klasik bir listeleme (ul) yapısını Facebook’un spinner öğesine çevireceğiz ve bütün bu işlemi sadece birkaç satır CSS kodu ile yapacağız.
(daha&helliip;)Merhaba arkadaşlar.
Daha önce öğrendiğimiz CSS gölge satırlarını bugün detaylandırıyoruz. Çıkış noktamız yine box-shadow, fakat bu sefer gölgelerde bile boyutlandırma işlemi yapacağız.
Bahsettiğimiz gibi ilk gölgelendirme yazımızda (görüntülemek için tıklayın) temel teknikleri konuşmuştuk. Sonrasında box-shadow kod birimi ile çoklu border sistemini öğrenmiştik. Aslına bakarsanız gölgelendirme üzerine birçok yazımız mevcut. Makalenin en altındaki ilgili konular alanına göz atabilirsiniz.
Şimdi yavaş yavaş başlayalım.
(daha&helliip;)
Günümüz tasarımlarında uzun formlar wizardlar sayesinde adımlara bölünüyor, kendi içerisinde kategorize ediliyor ve basitleştiriliyor. Ancak wizard mantığı kullanım kolaylığı sunuyor gibi gözükse de aslında süreyi uzatıyor. Burada anahtar kelime ve çıkış noktası “dikkati yönetmek” olarak gösterilebilir. Öyleyse kullanıcıya uzun formların her bir inputuyla etkileşime geçen tasarımlar sunmak işe yarayabilir.
Bu makalemizde her form öğesiyle birlikte renk değiştiren arkaplan hazırlayacağız. Renklerimizi de Google‘ın yeni ve popüler tasarım trendi Material Design‘dan seçeceğiz.
Google‘ın ses getiren tasarım trendi Material Design ile birlikte görmeye alıştığımız dalgalanma efektini CSS ve jQuery ile hazırlamak mümkün. Bu şık efekt kullanıcıya tıklama hissiyatını vermenin yeni yolu. Özellikle web sayfanızın mobil ekranlarında kullanmanızı önerebileceğimiz bu tasarımın örneğini aşağıdan görüntüleyebilirsiniz.
Bu dersimizde su dalgalanmasını andıran bir tıklama efekti hazırlayacağız.
(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
Photoshop ile Bulanık Arkaplan Hazırlama
Photoshop ile Alevli – Ateşten Yazı Efekti Nasıl Yapılır?
CSS ile Navigasyon Menü Tasarlayalım
15 Ücretsiz HTML5 Teması