Web sitenizin görünümünü iyileştirmeyi öğrenin
Formları CSS ile şekillendirmeyi öğrenmek, web sitenizin görünümünü iyileştirmek için harika bir yoldur. HTML formları, çoğu web sayfasındaki en çirkin şeyler arasında tartışmaya açıktır. Sık sık sıkıcı ve faydacı olurlar ve stil tarzında fazla bir şey sunmazlar.
CSS ile değişebilir. CSS'yi daha gelişmiş form etiketleri ile birleştirmek hoş görünümlü formlar sunabilir.
Renkleri Değiştir
Metinlerde olduğu gibi, form öğelerinin ön planını ve arka plan rengini değiştirebilirsiniz.
Neredeyse her form öğesinin arka plan rengini değiştirmenin kolay bir yolu, giriş etiketinde arka plan rengi özelliğini kullanmaktır. Örneğin, bu kod tüm öğeler üzerinde mavi arka plan rengi (# 9cf) uygular.
girdi {
arkaplan rengi: # 9cf;
renk: # 000;
}
Sadece belirli form öğelerinin arka plan rengini değiştirmek için, sadece textarea ekleyin ve stili seçin. Örneğin:
giriş, textarea, seçin {
arkaplan rengi: # 9cf;
renk: # 000;
}
Arka plan rengini koyulaştırırsanız, metin rengini değiştirdiğinizden emin olun. Zıt renkler , form öğelerini daha okunaklı hale getirmeye yardımcı olur. Örneğin, koyu kırmızı bir arka plan rengindeki metin, metin rengi beyazsa çok daha kolay okunur. Örneğin, bu kod kırmızı bir arka plan üzerine beyaz metni yerleştirir.
giriş, textarea, seçin {
arkaplan rengi: # c00;
renk: #fff;
}
Hatta form etiketinin kendisine bir arka plan rengi koyabilirsiniz. Form etiketinin bir blok öğesi olduğunu unutmayın; bu nedenle, renk yalnızca öğelerin konumlarını değil, tüm dikdörtgeni doldurur.
Alanı öne çıkarmak için bir blok öğeye sarı bir arka plan ekleyebilirsiniz, bunun gibi:
form {
arkaplan rengi: #ffc;
}
Kenarlık ekle
Renklerde olduğu gibi, çeşitli form öğelerinin sınırlarını değiştirebilirsiniz. Tüm formun etrafında tek bir kenarlık ekleyebilirsiniz. Dolgu eklediğinizden emin olun, ya da form öğeleriniz kenarlıkların hemen yanında sıkışır.
İşte 5 piksel dolgu ile 1 piksel siyah kenarlık için bir kod örneği:
form {
kenarlık: 1px katı # 000;
dolgu malzemesi: 5px;
}
Sınırları, sadece formun kendisinden daha fazla koyabilirsiniz. Onları öne çıkarmak için giriş öğelerinin sınırını değiştirin:
girdi {
kenarlık: 2px kesik # c00;
}
Giriş kutularına daha az giriş kutusu gibi daha az gözüktükleri zaman, dikkatli olun ve bazı insanlar formunu doldurabileceklerini fark etmeyebilirler.
Stil Özelliklerini Birleştir
Form öğelerinizi düşünce ve bazı CSS ile bir araya getirerek, sitenizin tasarımını ve düzenini tamamlayan güzel görünümlü bir form oluşturabilirsiniz.