Стилізація web-форм із CSS

Завдяки новим властивостям, що з'явилися в CSS 3, а це такі як градієнти і тіні, тепер дуже легко перетворити нудні веб-форми на щось прекрасне - з мінімальними зусиллями. Дотримуючись цього уроку ви не тільки зможете, надавати гарний вигляд web форм, а також дізнаєтеся нові CSS3 методи, такі як коробка-тіні, градієнти, непрозорість кольорів, закруглення кутів.

CSS3?

CSS3 це наступне покоління CSS, що в даний час на стадії розробки, але вже багато браузери (Google Chrome -4,0 Mozilla Firefox -3.6 Safari -4,0 Опера- 10,5)підтримують деякі властивості CSS3.

Все, що можна зробити з CSS3 (тіні, градієнти, заокруглені кути, анімації і т.д.) це зроблено для створення красивих ефектів без інтеграції зображень або сценаріїв, в результаті швидкий час завантаження.

Крок 1: HTML

Перш ніж ми розпочнемо стилізацію web форм, нам потрібно її створити.

Всі поля укладені в теги параграфа з певним класом, а три перші поля мають ще ярлики, що пояснюють їх використання.

Ось як це виглядає без застосування стилів

Крок 2: Основні стилі

Перш ніж зануритися в CSS3 методи, нам потрібно створити основні стилі web форми для браузерів, які поки не підтримують CSS 3

І ось що вийшло, вже краще.

Крок 3: Box-тінь

Box-тінь це властивість, яка задає тінь навколо форми, це може бути й інший елемент.

Синтаксис досить простий і виглядає так.

horizontaloffset розміщення тіні зліва направо. Якщо поставити його в "2px" тінь буде 2 пікселі праворуч.verticaloffset те саме, але вгору / вниз.

Blur просто розмиття тіні, де 0 є мінімальною.

Ось яккоробка-тінь виглядатиме

Тут ми маємо три лінії, які виглядають однаково але застосовуються для різних браузерів.

box -shadow чистий CSS3 і досі використовується лише в опері.

webkit -box -shadow для браузерів, які використовують двигун Webkit, як Chrome та Safari.

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

Перш ніж CSS 3 не стане стандартом вам доведеться використовувати всі три методи.

Як ви помітили тут не використовується RGB кольору, це тому що використовується два методи CSS 3 в одному і тому ж рядку:box -shadowі RGBA.

RGBA (Червоний Зелений Синій "Альфа") просто кажучи, колір з непрозорістю.

Його синтаксис виглядає так:

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

Таким чином ми використовуємо чорні з 10% (0,1) непрозорості та відсутністю горизонтального та вертикального зміщення. Ось як це виглядає:

Головне тут тонкість, якщо зробити багато тіні це буде виглядати некрасиво, а якщо дуже мало, то ефект не буде помітний.

Крок 4: Градієнт

Якщо попередній крок був не таким складним у розумінні, то градієнти важче. У CSS3 градієнти можна створювати досить складні і має такий самий складніший синтаксис. Але нам у цьому прикладі нічого незвичайного не знадобитися, потрібен просто прямо лінійний градієнт.

Синтаксис для Webkit:

Синтаксис для Gecko:

Як ви можете бачити, методи абсолютно різні, так щоце вимагатиме деякого пояснення.

Webkit градієнтів потребує початкова точка (X і У) кінцева точка (X і У) від кольору до кольору.

У Gecko градієнтів з іншого боку потрібно лише вказати початкову точку (Y) і щонайменше два кольори. Таким чином, щоб отримати простий лінійний градієнт зверху вниз - від чорного до білого - ми будемо робити так:

І це буде виглядати так:

Для демонстрації поки будемо використовувати чорний колір, а наприкінці змінимо більш відповідний.

Нам потрібно обмежити зростання градієнта для того, щоб він заповнював всю ширину поля.

Для цього у Webkit та Firefox обмежуємо фон градієнта до 25 px

У webkit замість кінцевої точки, лівого нижнього кута ми вказали також лівий кут, але розмір градієнта буде 25 px від верхнього кута. Для Gecko ми робимо те саме, просто додамо розмір кінцевого кольору 25px.

І ось результат:

Наступне, що потрібно зробити, це створити тонку білу лінію у верхній частині градієнта, тим самим вийти ефект об'ємності.

Для цього нам доведеться створити три точки градієнта. У попередньому етапі створення градієнта ми використовували дві точки, верхня та нижня (чорний-білий). Тут ми будемо додавати додаткові точки між ними (білий чорний → білий).

Як це зробити?

У Webkit ми використовуємо функціюcolor -stop але, на жаль, вона не підтримує значення в пікселах, тільки відсотках. Для Gecko ми просто додамо третій колір між першими двома і задамо йому значення 1px.

Тепер змінимо чорний колір (# 000000), більш відповідний у нашому випадку це, світло-сірий (# EEEEEE):

Наразі залишилися невеликі доопрацювання.

По-перше, ми створимо темніобведення навколо полів, які будуть з'являтися, коли поле активно.

По-друге, це зробити закруглені кути для кнопки .

Інші браузери

Тепер нам просто необхідно подбати про браузери, які не підтримують CSS3.

Наше завдання це наблизити зовнішній вигляд web форми до якої застосовуватися різні версії CSS, і найпростіше це зробити повернутися до старого: картинки.

Для цього просто візьміть скріншот нашої форми, що вже вийшла, на CSS 3 і збережіть невелику частину градієнта у вигляді зображення.

І використовуємо його в текстовому полі як тло, браузери які підтримують CSS3 будуть ігнорувати зображення.

От і все! Сподіваюся, ви знайшли щось нове для себе в цьому уроці.

Інші матеріали

CSS3 Анімація на прикладі колби з бульбашками

У цьому прикладі ми створюватимемо анімовану колбу з бульбашками засобами CSS3. Дуже часто, коли ми хочемо створити анімацію, ми думаємо про.

IPS Community Suite раніше відомий як Invision Power Board або скорочено IP.Board – система для організації web-форумів, написана с.

">IPS Community Suite 4.1.0 Nulled RusМодальні спливаючі вікна CSS3

У цьому прикладі ви побачите як зробити спливаючі модальні вікна для реєстрації та входу на сайт. Нещодавно для реалізації таких вікно.

">Модальні спливаючі вікна CSS3Слайд-шоу зображень тільки на CSS3