Застосування стилів до форм CSS
В одному з уроків HTML ви могли познайомитися з основними веб-формами і базовими поняттями про них. Метою ж цього уроку є показати, що до форм, як і до інших елементів, можна застосовувати стилі. Тобто за допомогою класів, ідентифікаторів і селектор задати розмір, колір фону, форму і колір рамки і т.д.
У цьому уроці буде наочно показано і детально пояснено застосування стилів до наступних елементів: текстове поле, кнопка, checkbox, radiobutton. Крім цього показано створення простої красивою реєстраційної форми.
Застосування стилю до тестового полю CSS
На багатьох сайтах присутній рядок пошуку - іноді це поле стандартного виду, а іноді щось оригінальне, добре вписується в "таке" оформлення сайту.
Нижче представлено тестове поле із зеленою і трохи закругленою рамкою. На задньому фоні видно слово "Пошук", яке зникає при наведенні мишки або наборі тексту. Так само при наведенні мишки колір рамки плавно змінюється зі світло-зеленого на більш темний.
display: block - додає текстового поля властивість блоку (задати розмір, колір рамки, відступи та інше);
search_1: focus - подія "клік" по текстовому полю - то є фокусування на ньому що б почати писати. Для цієї події задана тільки зміна кольору рамки, але ви можете задати і інші параметри;
outline: none - межа поля не підсвічуватиметься (тобто буде невидима);
placeholder = "Пошук" - текст, який висвічується при неактивному стані текстового поля (поки не почнуть друкувати текст);
Значення інших параметрів повинно бути вам відомо з попередніх уроків.
Наступний приклад "Пошукової рядки" представляє з себе текстове поле, у якого при фокусуванні на ньому, контур підсвічується яскраво-зеленим кольором і виглядає так, ніби це тінь від основної рамки. Так само у поля більш закруглені кути, ніж у попереднього і фон має світло-зелений відтінок.
box-shadow: - додає тінь до елементу;
inset - означає, що буде виводитися всередині елемента;
0 0 4px rgba (0,0,0,0.1) - зсув по X. зрушення по Y. радіус розтягування, rgb-колір, розмиття rgba (0,0,0.) - спеціальний формат для визначення кольору;
0 0 6px 3px # CEFE90 - зсув по X. зрушення по Y. розмиття, радіус розтягування, колір;
Детально властивість box-shadow: і його параметри розглянуті в одному з попередніх уроків.
Стиль для кнопки CSS
У першому прикладі показана кнопка "Пошук". у якій злегка закруглені рамки. У неактивному стані у неї світло-сірий колір, який при наведенні курсору мишки плавно змінюється на світло-зелений за допомогою властивості trasition: (яке докладно розглянуто в попередньому уроці). Як у самій кнопки, так і у тексту всередині неї присутня тінь за допомогою властивостей box-shadow: і text-shadow: які розглядалися вище (а так само в більш ранньому уроці). Що б продемонструвати натискання кнопки вона зміщується на один піксель вниз (коли на неї натискають) - це умова прописана
в подію .but_test: active - top: 1px;
Іншим прикладом є кнопка "Login". У неї сильно закруглені рамки. У неактивному стані у кнопки по контуру слабо видно сіра тінь. При наведенні курсора мишки колір тексту усередині кнопки змінюється на яскраво-світло-синій і з'являється по контуру таке ж кольору тінь. При натисканні кнопочка зміщується на один піксель вниз.
Стиль для checkbox CSS
На відміну від попередніх прикладів для "checkbox" стиль задається непростими класами, а за допомогою особливого селектора - input [type = "checkbox"]. Що б надати прапорця особливий вид "сильно мудрувати" не доведеться - просто потрібно приховати оригінальний елемент поставити на його місце картинку.
display: none - атрибут приховує оригінальний елемент;
Постає питання - якщо прапорець у прихованому режимі, на що тоді натискати?
Для імітації кліка по checkbox робиться наступне - у кожного прапорця є свій id = ""
Назва прапорця укладено між тегами . а що б ця назва належала до checkbox з id = "cb1" то за допомогою for всередині тега треба написати назву того ж id.
За допомогою span всередині тегів . відбувається імітація кліка по прапорці.
За допомогою подвійного селектора вибираються все span всередині тегів . які належать до елементу - checkbox:
input [type = "checkbox"] + label span
Ну і нарешті те, заради чого все робилося - оскільки прапорець має два стани, то потрібні дві картинки:
Checkbox не зазначено:
Так як картинки мають розмір в 28 пікселів, то атрибути width: і height: повинні мати таке ж значення (28px);
Check Box 1
Check Box 2
Check Box 3
Застосування стилю до RadioButton CSS
Для того що б застосувати стиль до елементу radiobutton потрібно робити все те ж, що і для checkbox (попередній пункт). Позначок і їх назвами присвоєні свої id і за допомогою span імітується натискання.
Картинки для прикладу:
Radiobutton не зазначено:
Radiobutton не зазначено:
Radio Button 1
Radio Button 2
Radio Button 3
Створення стилю для форми CSS
В поле "логін" поміщена картинка половини чоловічка, ось вона:
В поле, де потрібно вводити пароль, розміщено зображення ключа:
Дані картинки намальовані в фотошопі на прозорому тлі.
Велика частина коду вже повинна бути вам зрозуміла (спираючись на інформацію викладену в попередніх пунктах і попередніх уроках), але кілька рядків варто пояснити:
#h: after. h: before - за допомогою цих ідентифікаторів задається лінія, що підкреслює текст заголовка. Параметри height: 2px; left: 8px; і top: 45px; задають висоту лінії і відступи від верхньої і лівого боку блоку, інакше ця лінія була б поверх тексту.
#my_field - всередині цього ідентифікатора визначається, що величина рамки обрамляє все форму буде рівна нулю.
Знань викладених в цьому уроці вистачить на те, що б ви самі змогли почати експериментувати з оформленням веб-форм і окремих елементів.