Web sitelerinin olmassa olmazı formlardır. İş başvurusu, üye olma, iletişim vs. bu formlar üzerinden yapılır. Css kullanarak bu formları görsel açıdan daha doldurulabilir hale getirmek mümkün. Bunun için kullandığımız (input, button, option, select vs) html etiketlerine css ile çeşitli özellikler veririz. Bu yazıda bunu nasıl yapabileceğinizden bahsedeceğim..

Ben hepsinde aynı görüntü olması adına input, option, select, textarea hepsine birden aynı özellikleri vereceğim.

input, option, select, textarea {border:1px solid #996600;} ilk olarak border verdim. Renk kodunu değiştirerek farklı bir renkte kenarlık, 1px’i değiştirerek daha kalın, solid’i dashed vs. yaparak kenarlık stilini değiştirebilirsiniz. Dashed yaparsanız kesik kesik olacaktır.

input, option, select, textarea {border:1px solid #996600; background:#E9E9E9;} Daha sonra arkaplan rengini değiştirdim. Bunu da renk kodunu değiştirerek değiştirebilirsiniz.

input, option, select, textarea {border:1px solid #996600; background:#E9E9E9;color:#CC0000;font-size:17px;font-family:Arial, Helvetica, sans-serif;} Şimdi yazdıklarım tamamen yazı ile alakalı. Color ile yazının rengini, Font-size ile yazının büyüklüğünü ve Font-family ile yazı tipini değiştirebilirsiniz.

Şimdi ise textarea’ya hover vermek istiyorum. Yani üzerine gelindiğinde değişik görünmesini. Bunun için de
textarea:hover{background:#999999;color:#FF99FF;} ekliyorum çünkü üzerine gelindiğinde yanlızca arkaplan renginin ve yazı renginin değişmesini istiyorum.

Şimdi gelelim butona.. bunun için button etiketine css ile özellik vereceğiz.
button{background:#CC0000;color:#FFFFFF;border:0pt none;} Yukarıda background, color, border gibi özellikleri açıkladığım için bu kodu direk veriyorum. Ama butonda border 0pt yani yok dikkatinizi çekmiştir.

Evet formumuza şekil verdik. Anlatmak için yazdığımdan form özelliklerine fazla uğraşmadım ama anlamışsınızdır.

Eğer formda arkaplan olarak gradient falan kullanacaksınız background:url(resim.xxx) ile arkaplanı seçip bu resmin uzunluk ölçülerini width ve height ile vermeniz gerekir.

test için.. –>>

Yorumlar: