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 File Input Tasarımı

css-file-input-designWebkit devreye girmeden önce ne yazık ki işin CSS tarafında file inputlarına müdahale edemiyorduk. Bu yüzden birçok tasarımcı, perdeleme yöntemiyle file inputun üzerine şık bir tasarım koyup asıl çalışan fonksiyonu altta gizliyordu. Ancak pseudo seçicileri sayesinde artık bu mümkün. Birçok güncel tarayıcının desteklediği bu selector tanımları Internet Explorer tarafında desteği 9+ versiyonlarda buluyor.

Bu makalemizde -webkit-file-upload-button ve -ms-browse tanımları sayesinde input[type=file] bir öğeye stil atayacağız.

Ö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

Web sayfanız için en iyi Video Player hangisi?

Video PlayerOnlarca sebepten ötürü tasarımcılar web sayfalarında Video Player (oynatıcı) kullanmakta. Hazırlanmış onlarca Flash, HTML ve JavaScript ile hazırlanmış onlarca video oynatıcı kullanılmak için beklemekte.

Liste bu kadar genişken Adobewordpress olarak detaylı bir liste hazırlamaya karar verdik. Hangi oynatıcı web sayfanız için daha uygun? Seçimi size bırakıyoruz. (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

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