Material Design Text Input

material-design-inputMaterial 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.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku


css-ile-renkli-arkaplan-form

Formlarınızla Etkileşimli Dinamik Arkaplanlar

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.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

CSS ile Form Tasarımı

css-form-designKullanıcı arayüzü ve deneyimi söz konusuyken, form öğelerinin dizilişi ve tasarımı büyük önem taşımakta. Özellikle uzun yapıdaki formlar kesinlikle tekrar elden geçirilmeli, gerekirse tasarımla basitleştirilmeli ve adımlara bölünmeli. Hazırlayacağımız örnek yapı sayesinde varolan bir form yapısının HTML kodlarına hiç dokunmadan yepyeni bir tasarım oluşturacağız.

Bu makalemizde sadece CSS kodlarıyla bir form öğesini tüm iç detaylarıyla şekillendireceğiz. Üzerinde oynayacağımız form yapıları şöyle : Form, legend, label, input, fieldset, select, textarea, checkbox.

Örneği görüntüleyerek başlayabilirsiniz.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

HTML5 ile Ne Değişti?

HTML5HTML5‘in ayak sesleri duyulduğunda çok sert bir geçiş sürecinin bizi beklediğiniz düşünmüştük. Fakat korkulan olmadı. Eski elemanlara sağlanan destek yavaşça kesildi ve HTML5’in yenilikleri yerlerini teker teker aldı.

Bu makalemizde HTML5’in beraberinde getirdiği elemanları ve tarihin tozlu sayfalarına gömülecek olan eski kod birimlerini konuşacağız.

İşte karşınızda ilk ve tek tam liste! (daha&helliip;)

Devamını Oku

jQuery ile Minimum ve Maksimum Karakter Limitli Form Oluşturalım

Karakter LimitiMerhaba arkadaşlar.

Bu makalemde içerisinde maksimum ve minimum karakter limiti barındıran bir form öğesi hazırlayacağız. Böylece oluşturduğumuz form alanlarına ziyaretçilerin minimum ve maksimum kaç karakter girebileceğini belirleyebileceğiz.

Bu işlem için jQuery desteği almamız gerekecek. Çünkü anlık olarak yazılan karakter sayısını belirtmemiz gerekiyor. Ben jQuery.min.js kullanacağım. Versiyon olarak ise 1.5.1 ve daha günceli yeterli olacaktır. Şimdi arkanıza yaslanın ve formumuzu hazırlamaya başlayalım.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

HTML5 ile Ziyaretçilerinize Değiştirilebilir İçerikler Sunun

HTML5

Merhaba arkadaşlar. HTML5 ‘in getirdiği avantajlı yenilikleri konuşmaya devam ediyoruz. Bu makalemde ise “contenteditable” özelliği ile düzenlenebilir içerikler hazırlayacağız.

HTML5 öncesinde Ajax ve form öğeleri desteğiyle benzeri içerikler hazırlamak mümkündü. Fakat bu işlem için bile kırk takla atmamız gerekiyordu. HTML5 desteği ile bu işlemi yapmak saniyeler sürüyor. Şimdi konuyu biraz genişletelim, sonrasında ise sizler için hazırladığım örnek ile devam edelim.
(daha&helliip;)

Devamını Oku

CSS ile Formlarımızı Renklendirelim

Merhaba arkadaşlar,

Bu paylaşımımda sizlere form elementlerimizi css ile nasıl renklendirip,kullanıcıların ilgilerini çekebilecek bir hale getireceğimizi anlatacağım.Eğer tasarım sitelerini takip ediyorsanız bu konuyla ilgili açılmış bir çok paylaşıma rastalayabilirsiniz,Özellikle dünyadan seçme olarak listelenmiş iletişim formları son zamanlarda çok ilgi görmekte.Ben bu paylaşımımda sizlere form elementlerini renklendirmek için temel bilgileri vereceğim,tabi ondan sonra farklılıklar yaratmak sizin yaratıcılığınıza kalmış.Lafı fazla uzatmadan paylaşıma geçelim,

 

1 – İlk olarak aşağıdaki kodlarla temel form elementlerimizi oluşturalım.


<form action="" method="get">
 <p>
 <label>Adınız<br />
 <input type="text" name="name" id="name" />
 </label>
 </p>
 <p>
 <label>Email Adresiniz<br />
 <input type="text" name="email" id="email" />
 </label>
 </p>
 <p>
 <label>Web Siteniz<br />
 <input type="text" name="website" id="website" />
 </label>
 </p>
 <p>
 <label>Yorum Yap<br />
 <textarea name="message" id="message" cols="45" rows="5"></textarea>
 </label>
 </p>
 </form>

(daha&helliip;)

Devamını Oku