Material Design odaklı tasarımlar üzerine konuşmaya devam ediyoruz. Bugün hazırlayacağımız örnekte statik yapıdaki text inputlarını animatif hale çevireceğiz. CSS3 ve jQuery‘nin hünerlerinden yararlanarak hazırlayacağımız bu şık tasarım sıkıcı hale dönüşebilen formlarınıza renk katacak!
Örneği görüntüleyerek başlayabilirsiniz.
(daha&helliip;)
Bildiğiniz gibi web sitelerinde farenin sağ tuşuna bastığımızda contextmenu denilen bir menü açılıyor. jQuery ile de bu menüyü kapatıp yerine başka bir tanımlama yapabiliyoruz. CSS3 desteğiyle hazırlayacağımız modern bir tasarımı bu menüye giydirebiliriz.
Örneği görüntüleyerek başlayabilirsiniz.
Bu makalemizde şık bir menü tasarımı hazırlayıp, yapıyı sağ tuş ile tetiklenebilir hale getireceğiz.
(daha&helliip;)
jQuery‘nin scrollTop tanımı ile birlikte web sayfalarındaki kaydırma çubuğununun seviyesini numerik olarak yakalayabiliyoruz. Hal böyleyken bu yapıyı niye CSS3 ile ilişkilendirip şık tasarımlar hazırlamayalım ki?
Bu dersimizde aşağıya scroll edildikçe büyüyen ve bulanıklaşan arkaplan tasarımı yapacağız. İşlevsellik yükünü jQuery, tasarım yükünü de CSS sırtlayacak. Hazırsanız başlayalım.
(daha&helliip;)
Dergi ve gazetelerin bilmece sayfalarında yer alan ve fazlasıyla dikkat isteyen “İki resim arasındaki 7 farkı bulun” türü bulmacaları hatırlar mısınız? Genellikle kısa bir göz gezdirmeyle 6 fark bulunur ancak her halükarda sonuncusu biraz uğraştırırdı.
Psikoloji bilimi bu bulmacaları, özellikle çocuklarda dikkat ve algıyı yönetme açısından faydalı göstermekte.
Bu makalemizde, seçtiğimiz iki resim arasındaki farkları JavaScript ile saniyeler içerisinde bulan bir kod öbeği paylaşacağız.
(daha&helliip;)
Bu makalemizde hem metin hem de görsel içeriklerinizi şık bir şekilde sunmanızı sağlayan akordiyon tasarımı hazırlayacağız. Bu yapı açılabilir/kapanabilir (collapsible) diye de isimlendirilmekte.
HTML5 elemanlarını CSS3 ve jQuery desteğiyle şekillendireceğimiz bu tasarım aynı zamanda liquid yapıda. Yani tüm taşınabilir cihazlara (responsive design) uyum gösteriyor.
(daha&helliip;)
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
Strip, alışık olduğumuz lightboxlara kıyasla web sayfanıza daha iyi adapte olan bir jQuery eklentisi.
Bu eklenti ile lightboxlarınız ekranın istediğiniz köşesinde istediğiniz boyutta çıkıyor. Böylece ilgili multimedya öğesinin web sayfanızla olan etkileşimi de hiç kesilmiyor. Hem resimleriniz için hem de videolarınız için kullanabileceğiniz Strip şık tasarımıyla da ilgi çekici.
Strip bütün popüler tarayıcılarda çalışmakta : IE7+ Firefox 3+, Chrome 5+, Opera 9+, Safari 3+, iOS5+ ve Android 3+ (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;)
Özellikle mobil uygulamalarda gördüğümüz açılıp kapatılabilir menü örnekleri artık web tarafında da fazlasıyla kullanılıyor. Minimalist tasarımın vazgeçilmezi haline gelen bu yapı, genellikle responsive web sitelerin mobil versiyonlarında navigasyon yükünü sırtlıyor.
Bu makalemizde CSS ve biraz da jQuery desteğiyle açılıp kapatılabilir şık bir menü tasarlayacağı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
Adobe Preview ile Tasarımlarınız Anında Apple Cihazınızda
Photoshop ile Fotoğraf Eskitme
Photoshop ile Fotoğrafları Sulu Boya Resime Çevirin
Neden Bitmap görselleri Vektörel’e çevirmeliyiz?