Красиво стилизируем текстовое поле формы используя CSS3
И так, о некоторых свойствах CSS3 я уже написал, теперь я хочу показать как их можно использовать на примере стилизации элементов форм. В примере я буду использовать такие свойства из CSS3 как border-radius, box-shadow и transition(анимация).
Ну что же, приступим. У нас есть обычное текстовое поле для ввода текста, то есть <input> со стандартными браузерскими стилями, выглядит он вполне нормально и обычно, но мы сделаем его красивым и эффектным.
Начнем, давайте рамку сделаем серого цвета и добавим скругленные углы, так же добавим сразу внутренние отступы, цвет текста, тень:
input.example
{
border-radius: 3px;
border: 1px solid #AAA;
padding: 3px 5px;
color: #888;
width: 140px;
box-shadow: 0px 0px 5px #CCC;
}
Теперь смотрится немного лучше, осталось добавить стили фокуса и ховера, менять цвета я буду используя transition(анимацию).
input.example
{
border-radius: 3px;
border: 1px solid #AAA;
padding: 3px 5px;
color: #888;
width: 140px;
box-shadow: 0px 0px 5px #CCC;
transition: all 300ms ease-in;
}
input.example:hover
{
border-color: #66cccc;
box-shadow: 0px 0px 6px #99ccff;
color: #666;
}
input.example:focus
{
border-color: #6699cc;
box-shadow: 0px 0px 6px #66ccff;
color: #333;
}
Теперь смотрим что получилось, кажется весьма неплохо. Не забывайте про приставки к свойствам CSS3 для разных браузеров. В следующий раз расскажу как создавать красивые кнопки (buttons) используя CSS3.
Офигенный урок… Просто все и доступно… Побольше таких…
В файерфоксе 3.6 не работает, боксы в виде прямоугольников, теней нет вообще. Только цвета контуров меняются.
В IE8 прямоугольники заокругленные и все, больше ничего не меняется. В других браузерах не смотрела.
Как добиться кроссбраузерности?
Спасибо.
Хмм, странно но у меня в FF 3.6 все отлично. По поводу IEшек, я их не поддерживаю, но могу посоветовать утилиту PIE , которая заставляет некоторые возможности CSS3 работать в них.
Красивая вещь! Спасибо, все очень понятно рассказано. Теперь буду регулярно к Вам заходить)
У вас на сайте демка выглядит нормально и при фокусе тоже. Вставил на тестовую страницу и почему-то выделяется стандартная желтая рамка (в Хроме) и под ней эта синяя рамка
У меня в дизайне стоит:
Вставьте куда вам необходимо и не будет желтой рамки :)