 |
| Главная | Форум | Стихи | Отзывы | Контакты |
|
| Главная | Форум | Стихи | Отзывы | Контакты |
| Главная → Дизайн → Создаем красивую форму ввода |
| Создаем красивую форму ввода
Если вам надоела старая форма ввода с квадратными углами или она не вписывается в ваш дизайн, я предлагаю вам сделать новую форму ввода в стиле web 2.0. Для этого мы опишем параметры форм input и textarea в css.
Code -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
3px – это радиус скругления рамки
Добавим тень внутри формы
Code -webkit-box-shadow:0 0 1px #CCC, 0 3px 5px #ECECEC inset; -moz-box-shadow:0 3px 5px #ECECEC inset; box-shadow:0 3px 5px #ECECEC inset; 0 – отступ вправо
Добавим цвет рамки
Code border-color:#C0C0C0 #C2C2C2 #D5D5D5; 1 цвет – верхняя рамка
Цвет рамки при наведении
Code border-color:#b0b0b0 #b2b2b2 #c5c5c5;
Цвет рамки в фокусе
Code border-color:#007B97 #0099BB #00B0D8;
Code input[type=text],input[type=password],textarea { border-color:#C0C0C0 #C2C2C2 #D5D5D5; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } input[type=password]: hover, input[type=text]: hover, textarea: hover { border-color:#b0b0b0 #b2b2b2 #c5c5c5; -webkit-box-shadow:0 0 1px #CCC, 0 3px 5px #ECECEC inset; -moz-box-shadow:0 3px 5px #ECECEC inset; box-shadow:0 3px 5px #ECECEC inset; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } input[type=password]: focus, input[type=text]: focus, textarea: focus { border-color:#007B97 #0099BB #00B0D8; -webkit-box-shadow:0 0 1px #CCC, 0 3px 5px #ECECEC inset; -moz-box-shadow:0 3px 5px #ECECEC inset; box-shadow:0 3px 5px #ECECEC inset; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
Вы можете экспериметировать с кодом, чтобы он вписался в ваш дизайн, например, изменив цвет рамки.
Также изменив несколько параметров можно получить красивую подсветку вокруг формы
Code box-shadow:0 0px 5px #00B0D8;
 комментарии (4) |
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|||||||
