input

CSS ile File Input Tasarımı

Vatanay Özbeyli Yorum yazın CSS3

Webkit 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.

Formlarınızla Etkileşimli Dinamik Arkaplanlar

Vatanay Özbeyli Yorum yazın CSS3, jQuery

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.

CSS ile Form Tasarımı

Vatanay Özbeyli 4 Yorum CSS3, Öne Çıkanlar

Kullanı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.

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

Vatanay Özbeyli Yorum yazın Diğer Konular & İpuçları, Kaynaklar, Tasarım Unsurları

Onlarca 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;)

HTML5 ile Ne Değişti?

Vatanay Özbeyli Yorum yazın HTML5, Tasarım Unsurları

HTML5‘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;)

CSS ile Formlarımızı Renklendirelim

Egemen Özbeyli 8 Yorum CSS3

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>