Главная
Форум
Стихи
Отзывы
Контакты
Главная → Дизайн
Создаем красивую форму ввода | Дизайн
Автор: kostya_sh | Дата: 13.02.2011 | Просмотров: 5500 | Комментарии (4)

Если вам надоела старая форма ввода с квадратными углами или она не вписывается в ваш дизайн, я предлагаю вам сделать новую форму ввода в стиле 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 – отступ вправо
3px – отступ вниз
5px – размытие тени
#ECECEC – цвет тени
Inset – тень внутри формы, без этого параметра тень будет снаружи

Добавим цвет рамки

Code
border-color:#C0C0C0 #C2C2C2 #D5D5D5;

1 цвет – верхняя рамка
2 цвет – левая и правая рамки
3 цвет - нижняя рамка

Цвет рамки при наведении

Code
border-color:#b0b0b0 #b2b2b2 #c5c5c5;

Цвет рамки в фокусе

Code
border-color:#007B97 #0099BB #00B0D8;

 Весь исходный код, который надо добавить в CSS

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;

 Пример формы вы можете посмотреть на этом же сайте после комментариев.





 Последние статьи

Девять проверенных стратегий для повышения продуктивности совещаний 0

Босс против лидера: бесконечная битва власти и вдохновения 0

Как создать идеальную среду для удаленной работы 0

Влияние Agile-методологий на отделы маркетинга 0

6 тенденций, определяющих условия труда в ближайшем будущем 0


 Комментарии

кПроблема неграмотности и нецензурной лексики в Рунете
SlaveWindows 7 отстой?
gvelsk.ruБан за спам в комментариях
MoJIopuKWindows 7 отстой?
search engine optimization seo10 причин перейти на Linux

 Популярные статьи

Как нас делают рабами 25024
Как добавить кнопку Google +1 на свой сайт 14345
Windows 7 отстой? 12551
Мысли материальны 9268
Сравнение Windows 7 и Ubuntu 10.04 8831

 Теги - все теги


 Категории

Компьютер
7
uCoz
1
Интернет
28
Кино
2
Телефония
1
Софт
3
Новости
10
Разное
19
Мысли
6
Дизайн
1
Сайт
1

 Новое на форуме

Лирохвост  (1)

Осторожно еда – список опасных продуктов  (0)

Русская баня, как забытое средство борьбы с болезнями  (0)

Вакцина - как это делается?  (0)

Чудодейственные лекарства. 15 признаков «развода на бабки»  (0)


 Баннер


 Статистика

Оставлено комментариев: 304
Написано статей: 80






Оставить отзыв Контакты Карта сайта Поиск Быстрый вход

© 2009-2020 Блог про всё
Копирование материала допускается только при наличии активной гиперссылки на сайт blogprovse.do.am | Хостинг от uCoz


Рейтинг@Mail.ru Rambler's Top100