Стилизиране на уеб формуляри с CSS

С новите свойства, въведени в CSS 3 като градиенти и сенки, сега е много лесно да превърнете скучните уеб форми в нещо красиво - с минимални усилия. Следвайки този урок, вие не само ще можете да правите красиви уеб формуляри, но и ще научите нови техники на CSS3 като сенки за кутии, градиенти, непрозрачност на цветовете и заобляне на ъгли.

CSS3?

CSS3 е следващото поколение CSS, което в момента се разработва, но много браузъри (Google Chrome -4.0 Mozilla Firefox -3.6 Safari -4.0 Opera-10.5) поддържат някои CSS3 свойства.

Всичко, което можете да направите с CSS3 (сенки, градиенти, заоблени ъгли, анимации и др.), Се прави, за да създадете красиви ефекти, без да интегрирате изображения или скриптове, което води до бързо време на зареждане.

Стъпка 1: HTML

Преди да започнем да оформяме уеб формуляри, трябва да го създадем.

Всички полета са затворени в етикети на абзаци със специфичен клас, а първите три полета също имат етикети, обясняващи тяхното използване.

Ето как изглежда без стилизиране

Стъпка 2: Основни стилове

Преди да се потопим в техниките на CSS3, трябва да създадем някои основни стилове на уеб формуляри за браузъри, които все още не поддържат CSS 3.

И това се случи, вече е по-добре.

Стъпка 3: кутия-сянка

Box-shadow е свойство, което задава сянка около формата, може да бъде друг елемент.

Синтаксисът му е съвсем прост и изглежда така.

хоризонтална изместване поставяне на сянката отляво надясно. Ако го зададете на "2px", сянката ще бъде 2px вдясно. вертикална изместване същото, но нагоре/надолу.

Размазване просто размажете сянката, където 0 е минимумът.

Ето как ще изглежда сянката на кутията

Тук имаме три реда, които изглеждат еднакви, но се прилагат за различни браузъри.

кутия - сянка чист CSS3 и все още се използва само в опера.

уеб кит - кутия - сянка за браузъри, използващи механизма Webkit като Chrome и Safari.

moz - кутия - сянка за браузъри, използващи Gecko Mozilla, двигател като Firefox, Camino, Flock, SeaMonkey .

Преди CSS 3 да стане стандарт, ще трябва да използвате и трите метода.

Както можете да видите, RGB цветовете не се използват тук, това е така, защото два метода на CSS 3 се използват на една и съща линия: кутия - сянка и RGBA.

RGBA (Червено зелено синьо "Алфа") Просто казано, цвят с непрозрачност.

Синтаксисът му изглежда така:

В нашия случай е по-добре да използвате светлосив цвят за сянката, но ако използвате друг цвят на фона, той няма да изглежда много хубаво. Непрозрачното черно ще работи за всеки цвят на фона.

По този начин използваме черно с 10% (0,1) непрозрачност и без хоризонтално или вертикално отместване. Ето как изглежда:

---