| Уроки CSS |
| Применение стилей к формам CSS |
В одном из уроков HTML вы могли познакомиться с основными веб-формами и базовыми понятиями о них. Целью же этого урока является показать, что к формам, как и к другим элементам, можно применять стили. То есть с помощью классов, идентификаторов и селекторов задать размер, цвет фона, форму и цвет рамки и т.д.
В этом уроке будет наглядно показано и подробно объяснено применение стилей к следующим элементам: текстовое поле, кнопка, checkbox, radiobutton. Помимо этого показано создание простой красивой регистрационной формы.
| Применение стиля к тестовому полю CSS |
На многих сайтах присутствует строка поиска – иногда это поле стандартного вида, а иногда нечто оригинальное, хорошо вписывающееся в "эдакое" оформление сайта.
Ниже представлено тестовое поле с зелёной и немного закруглённой рамкой. На заднем фоне видно слово "Поиск", которое исчезает при наведении мышки или наборе текста. Так же при наведении мышки цвет рамки плавно изменяется со светло-зелёного на более тёмный.
Форма:
Код:
<style>
.search_1 {
display: block;
margin: 0 6px;
padding: 4px;
width: 250px;
border: 3px solid #AEFF7B;
border-radius: 6px;
color: #6C6C6C;
transition: all 0.4s ease-out;
}
.search_1:focus {
outline: none;
border-color: #7AE239;
}
</style>
<input type="text" class="search_1" placeholder="Поиск">
display: block – придаёт текстовому полю свойство блока (задать размер, цвет рамки, отступы и прочее);
transition: all 0.4s ease-out – благодаря этому свойству происходит плавная смена параметров с начальных на те, что описаны в search_1:focus. Подробнее о свойстве transition вы можете узнать из предыдущего урока;
search_1:focus – событие "клик" по текстовому полю – то есть фокусирование на нём что бы начать писать. Для этого события задана только смена цвета рамки, но вы можете задать и другие параметры;
outline: none – граница поля не будет подсвечиваться (то есть будет невидима);
placeholder="Поиск" – текст, который высвечивается при неактивном состоянии текстового поля (пока не начнут печатать текст);
Значение остальных параметров должно быть вам известно из предыдущих уроков.
Следующий пример "Поисковой строки" представляет из себя текстовое поле, у которого при фокусировании на нём, контур подсвечивается ярко-зелёным цветом и выглядит так, будто это тень от основной рамки. Так же у поля более закруглённые углы, чем у предыдущего и фон имеет светло-зелёный оттенок.
Форма:
Код:
<style>
.search_2 {
display: block;
border: none;
border: 2px solid #ADED59;
border-radius: 16px;
padding: 4px 8px;
background: #ECFFD3;
color: #5F5F5F;
box-shadow:
inset 0 2px 0 rgba(0,0,0,.2),
0 0 4px rgba(0,0,0,0.1);
}
.search_2:focus {
outline: none;
box-shadow:
inset 0 2px 0 rgba(0,0,0,0.2),
0 0 4px rgba(0,0,0,0.1),
0 0 6px 3px #CEFE90;
}
</style>
<input type="text" class="search_2" 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;
Кнопка:
Код:
<style>
.but_test {
display: inline-block;
margin: 0 6px;
padding: 5px 15px;
outline: none;
background: #EFF2EB;
cursor: pointer;
border: 21px;
border-radius: 5px;
text-align: center;
text-decoration: none;
transition: all 0.2s ease-out;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.but_test:hover {
background: #C7FE0A;
}
.but_test:active {
position: relative;
top: 1px;
}
</style>
<input type="submit" value="Поиск" class="but_test" />
Другим примером является кнопка "Login". У неё сильно закруглены рамки. В неактивном состоянии у кнопки по контуру слабо видна серая тень. При наведении курсора мышки цвет текста внутри кнопки меняется на ярко-светло-синий и появляется по контуру таково же цвета тень. При нажатии кнопочка смещается на один пиксель вниз.
Кнопка:
Код:
<style>
.but_log {
display: inline-block;
margin: 0 10px 0;
padding: 5px 15px;
background: #B8ED01;
border: 0px;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease-out;
box-shadow:
inset 0px 2px 2px rgba(255,255,255,0.6),
2px 2px 2px rgba(0,0,0,0.1),
0 0 4px 1px rgba(0,0,0,0.2);
}
.but_log:hover {
background: #C7FE0A;
color: #40BCFE;
box-shadow:
inset 0px 2px 2px rgba(255,255,255,0.6),
0 2px 2px rgba(0,0,0,0.1),
0 0 4px 1px rgba(0,255,255,0.3);
}
.but_log:active {
position: relative;
top: 1px;
}
</style>
<input type="submit" class="but_log" value="Login">| Стиль для checkbox CSS |
В отличии от предыдущих примеров для "checkbox" стиль задаётся не простыми классами, а с помощью особенного селектора - input[type="checkbox"].
Что бы придать флажку особенный вид "сильно мудрить" не придётся – просто нужно скрыть оригинальный элемент поставить на его место картинку.
display:none – атрибут скрывающий оригинальный элемент;
Появляется вопрос – если флажок скрыт, на что тогда нажимать?
Для имитации клика по checkbox делается следующее – у каждого флажка есть свой id=" "
<input type="checkbox" id="cb1" name="ch" />
Название флажка заключено между тегами <label></label>, а что бы это название принадлежало к checkbox с id="cb1" то с помощью for внутри тега надо написать название того же id:
<label for="cb1"><span></span>Check Box 1</label>
С помощью span внутри тегов <label></label>, происходит имитация клика по флажку.
С помощью двойного селектора выбираются все span внутри тегов <label></label>, которые принадлежат к элементу – checkbox:
input[type="checkbox"] + label span
Ну и наконец то, ради чего всё делалось – поскольку флажок имеет два состояния, то нужны две картинки:
Checkbox не отмечен:
Checkbox отмечен:
Так как картинки имеют размер в 28 пикселей, то атрибуты width: и height: должны иметь такое же значение (28px);
Пример:
Код:
<style>
input[type="checkbox"] {
display:none;
}
input[type="checkbox"] + label span {
display:inline-block;
width:28px;
height:28px;
margin:-2px 4px 0 0;
vertical-align:middle;
background:url(images//check.png) no-repeat;
cursor:pointer;
}
input[type="checkbox"]:checked + label span {
background:url(images//check_checked.png) no-repeat;
}
</style>
<input type="checkbox" id="cb1" name="ch" />
<label for="cb1"><span></span>Check Box 1</label>
<br>
<input type="checkbox" id="cb2" name="ch" />
<label for="cb2"><span></span>Check Box 2</label>
<br>
<input type="checkbox" id="cb3" name="ch" />
<label for="cb3"><span></span>Check Box 3</label>| Применение стиля к RadioButton CSS |
Для того что бы применить стиль к элементу radiobutton нужно делать всё то же, что и для checkbox (предыдущий пункт). Отметкам и их названиям присвоены свои id и с помощью span имитируется нажатие.
Картинки для примера:
Radiobutton не отмечен:
Radiobutton не отмечен:
Пример:
Код:
<style>
input[type="radio"] {
display:none;
}
input[type="radio"] + label span {
display:inline-block;
width:28px;
height:28px;
margin:-2px 4px 0 0;
vertical-align:middle;
background:url(images//radio.png) no-repeat;
cursor:pointer;
}
input[type="radio"]:checked + label span {
background:url(images//radio_checked.png) no-repeat;
}
</style>
<input type="radio" id="rb1" name="rd" />
<label for="rb1"><span></span>Radio Button 1</label>
<br>
<input type="radio" id="rb2" name="rd" />
<label for="rb2"><span></span>Radio Button 2</label>
<br>
<input type="radio" id="rb3" name="rd" />
<label for="rb3"><span></span>Radio Button 3</label>| Создание стиля для формы CSS |
Многие пользователи глобальный сети регистрировались на каких-либо ресурсах, писали комментарии, создавали тему на форуме, обращались к администрации через форму обратной связи и т.д. На некоторых интернет ресурсах (фан сайты, сайты творческих организаций, новостные ресурсы) можно встретить очень оригинальное оформление, демонстрирующее тематику ресурса и естественно на подобных сайтах красиво оформлено всё, в том числе и формы.
В данном примере будет показано создание стиля для формы авторизации. Эта форма будет содержать элементы, применение стиля к которым рассматривалось в предыдущих пунктах.
Форма это группа элементов заключённая между тегами <form></form>, к которым применяется определённый метод обработки. Помимо текстовых полей, флажков и кнопочек внутри формы могут быть элементы, не подлежащие обработке – например, блоки. С помощью блока как раз и создаётся
"красивая основа" формы авторизации. К каждому из элементов с помощью идентификаторов применяется особенный стиль и даже к названию формы – заголовку заключённому между тегами <h1></h1>.
В поле "логин" помещена картинка половины человечка, вот она:
В поле, где нужно вводить пароль, размещено изображение ключа:
Данные картинки нарисованы в фотошопе на прозрачном фоне.
Форма авторизации:
Код:
<style>
#log_form {
position: absolute;
border: 4px solid #9FD95D;
border-radius: 8px;
background: #CAEDA2;
width: 256px;
}
#log_form a {
padding: 0 38px 0;
}
#h {
position: relative;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0px 2px 0 rgba(0, 0, 0, 0.8);
text-transform: uppercase;
text-align: center;
color: #64C3F3;
margin: 10px 0 30px 0;
letter-spacing: 4px;
font: normal 26px Verdana, Helvetica;
}
#h:after, h:before {
position: absolute;
background-color: #8BD932;
content: "";
height: 2px;
left: 8px;
top: 45px;
width: 240px;
}
#my_field {
border: 0;
}
#username {
border: 2px solid #ADED59;
border-radius: 4px;
padding: 6px 16px 6px 20px;
margin: 0 0 6px 0;
background: #ECFFD3 url(images//login.png) no-repeat;
color: #5F5F5F;
box-shadow:
inset 0 2px 0 rgba(0,0,0,.2),
0 0 4px rgba(0,0,0,0.1);
}
#username:focus {
outline: none;
box-shadow:
inset 0 2px 0 rgba(0,0,0,.2),
0 0 4px rgba(0,0,0,0.1),
0 0 6px 3px #FDFFB7;
}
#password {
border: 2px solid #ADED59;
border-radius: 4px;
padding: 6px 16px 6px 20px;
margin: 0 0 6px 0;
background: #ECFFD3 url(images//pass.png) no-repeat;
color: #5F5F5F;
box-shadow:
inset 0 2px 0 rgba(0,0,0,.2),
0 0 4px rgba(0,0,0,0.1);
}
#password:focus {
outline: none;
box-shadow:
inset 0 2px 0 rgba(0,0,0,.2),
0 0 4px rgba(0,0,0,0.1),
0 0 6px 3px #FDFFB7;
}
#but_log {
display: inline-block;
margin: 0 0 0;
padding: 5px 15px;
background: #B8ED01;
border: 0px;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease-out;
box-shadow:
inset 0px 2px 2px rgba(255,255,255,0.6),
2px 2px 2px rgba(0,0,0,0.1),
0 0 4px 1px rgba(0,0,0,0.2);
}
#but_log:hover {
background: #C7FE0A;
color: #40BCFE;
box-shadow:
inset 0px 2px 2px rgba(255,255,255,0.6),
0 2px 2px rgba(0,0,0,0.1),
0 0 4px 1px rgba(0,255,255,0.3);
}
#but_log:active {
position: relative;
top: 1px;
}
</style>
<form id="log_form">
<h1 id="h">Log In</h1>
<fieldset id="my_field">
<input type="text" id="username" placeholder="Логин" autofocus required>
<br>
<input type="password" id="password" placeholder="Пароль" required>
</fieldset>
<fieldset id="my_field">
<input type="submit" id="but_log" value="Вход">
<a href="">Рeгистрация</a>
</fieldset>
</form>
Большая часть кода уже должна быть вам понятна (опираясь на информацию изложенную в предыдущих пунктах и предыдущих уроках), но несколько строк стоит пояснить:
#h:after, h:before – с помощью этих идентификаторов задаётся линия, подчёркивающая текст заголовка. Параметры height: 2px; left: 8px; и top: 45px; задают высоту линии и отступы от верхней и левой стороны блока, иначе эта линия была бы поверх текста.
#my_field – внутри этого идентификатора определяется, что величина рамки обрамляющей всё форму будет ровна нулю.
Знаний изложенных в этом уроке хватит на то, что бы вы сами смогли начать экспериментировать с оформлением веб-форм и отдельных элементов.
| ◄ Предыдущий урок | Содержание | Следующий урок ► |
