Bu ay sizlerle HTML5 tasarımlardan oluşan koca bir arşivi tek link altından paylaşacağız. Listede UI tarafında kullanabileceğiniz her türden responsive tasarım mevcut.
İşte tam liste :
Özellikle teknoloji firmaları yeni ürünleri tanıtırken hazırladıkları web tasarımlarında HTML5‘in video oynatıcısı aracılığıyla küçük çaplı şovlar yapmakta. Siz ön katmanda ürünle ilgili detaylı bilgileri okurken alt katmanda gizli bir video yapısı kaydırma çubuğuyla eş zamanlı olarak ileri/geri ilerleyebilmekte.
Bu anlatımımız gözünüzde bir tasarım canlandırmadıysa aşağıdaki örneği görüntüleyerek işe başlayabilirsiniz. Daha sonrasında ise bu yeni teknoloji ürünü tasarımı oluşturacağız.
(daha&helliip;)
“Arama yapma” butonu veya bağlantısı taşınabilir cihazlarda görüntülenen web sayfalarında direk olarak arama işlevini yapmamızı sağlar. Böylece kullanıcı telefon numarasını kopyalayıp çağrı ekranına yapıştırmakla uğraşmadan hızlıca ilgili numaraya çağrı yapabilir.
Taşınabilir cihazların günden güne gelişmesi, neredeyse her telefonun web tarayıcıya sahip olması sebebiyle easy-to-use kurallar listemize bu yapıyı da ekleyerek devam ediyoruz.
Bu dersimizde HTML‘in yeni versiyonuyla nitelik genişlemesini sürdüren anchor elemanını detaylandıracağız. (daha&helliip;)
Günümüzde birçok web tasarımında hareketli arkaplanlar kullanıldığını görüyoruz. Özellikle şeffaf bir perde ile kullanılan bu yapı günden güne popülerleşiyor.
HTML5‘in getirdiği yenilikler, hareketli arkaplanlar hazırlarken Flash’a muhtaç kalmamamıza sebep oluyor. Böylece sadece birkaç satır kod yazarak ilgi çekici ve hareketli arkaplanlar oluşturuyoruz.
Bu dersimizde HTML5’in video oynatıcısını biraz daha yakından tanıyoruz, beraberinde de manipüle ediyoruz. Örneği görüntüleyerek başlayabilirsiniz.
(daha&helliip;)
HTML serüvenine başladığımızda kullandığımız bold, underline ve italic gibi tanımlamalar CSS‘in gelişiyle değişime uğradı. Daha önceleri <u></u> elemanı ile yaptığımız altı çizgili yazılar artık CSS’in text-decoration:underline tanımlamasıyla yapılır hale gelmişti. İşlem yapısıyla birlikte yelpazemiz de genişledi. Bu tip yazı elemanlarının CSS’in kontrolü ile gerçekleşir olması, özgünleştirme ayarlarını da beraberinde getirdi.
Bu makalemizde sizlere altı çizgili yazının web üzerindeki son evriminden bahsedeceğiz. Satır çizgisini geçen (kuyruklu, örn: y, ğ, p, j, g) harfleri gizlenmiş bir gölge ile imkansız gibi gözüken tipografik yapıya çevireceğiz. (daha&helliip;)
Merhaba arkadaşlar. Yayınladığımız slider konulu makalelere gösterdiğiniz alaka sebebiyle aynı konuyu tekrar işlemeye karar verdik. Bugün sizlere kolay kullanımı ve gelişmiş özellikleriyle Fotorama Slider‘ı tanıtacağız. Yapımcıların yorumu şöyle :
(daha&helliip;)“Basit, şaşırtıcı, jQuery ile hazırlanmış gülçlü bir resim galerisi.”
HTML5 ve CSS3 teknolojileriyle her türlü ekran çözünürlüğüne farklı tepki veren tasarımlar oluşturmak mümkün. Özellikle menü ve navigasyon öğeleri için bu tekniği kullanmak neredeyse zorunlu. Daha önce üzerine konuştuğumuz CSS’in @media öğesi sayesinde bu işlem sandığımızdan da kolay.
Bu makalemizde ekran çözünürlüğüne göre 3 farklı şekil alabilen bir navigasyon örneği hazırlayacağız. Örneği görüntüleyerek başlayabilirsiniz.
(daha&helliip;)
Web sayfanıza CSS desteği ile üzerine gelince açılan bilgi kutucukları ekleyebilirsiniz. Overflow elemanının hidden değeriyle gizleyeceğimiz detaylı bilgi sadece onmouseover ile aktif olmakta. Hazırlayacağımız örnekte bu uygulamayı HTML5 ile listeye eklenen section elemanı ile birlikte kullanacağız. Fakat istek dahilinde bu etki div veya table öğeleri için de uygulanabilir.
Makalenin alt kısmından tasarımı canlı olarak test edebilirsiniz.
(daha&helliip;)
Bu dersimizde her türden ekran çözünürlüğüne uyumlu olarak çalışan bir fotoğraf galerisi tasarlayacağız. Hazırlayacak olduğumuz bu galeri, görsel ağırlıklı tasarımlar için ideal gözüküyor.
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?
Sitenize Kolayca Slider Ekleyin
CSS ile üzerine gelince açılan kutucuklar oluşturun!
Web Sayfanıza Etkileyici Giriş Paneli
Fareyle Birlikte Hareket Eden Arkaplan Resmi
Mobil Sitenize WhatsApp ve Diğer Sosyal Paylaşım Linkleri Ekleyin
jQuery ile Scroll ve Arkaplan İlişkisi
Photoshop ile 3 Boyutlu Yuvarlak Buton
Sadece CSS ile Slider Yapımı
Photoshop ile Işık Işınları Oluşturma