Создаем эффект свечения для полей HTML форм при помощи CSS

Если вы являетесь пользователем Твиттера, возможно вы уже видели анимированный, синий эффект свечения, который имеют поля формы входа в аккаунт Твиттера.

Сейчас мы создадим такой же эффект анимации при помощи свойства transition и эффект свечения при помощи свойства box-shadow.

Результат того, что может получиться, вы можете видеть на изображении ниже или зайдя на страницу входа в Твиттер.

Для начала зададим полям формы анимацию:

input {
 transition: all 0.30s ease-in-out;
 -webkit-transition: all 0.30s ease-in-out;
 -moz-transition: all 0.30s ease-in-out;
 outline:none;
 } 

С помощью свойства transition мы создадим анимацию, чтобы свечение возникало плавно, в то время когда поле формы становится активным. Кроме этого здесь мы используем свойство outline чтобы убрать свечение для браузеров Safari и Chrome, в которых данный функционал предусмотрен по умолчанию.

Теперь, кода мы все подготовили, можно приступать к созданию эффекта свечения, при помощи свойства box-shadow, которым задается тень различным объектам. Но у нас свечение не будет выглядеть как тень, потому что мы будем использовать ярко-синий цвет. Кроме этого, мы используем RGB коды цветов, так мы сможем регулировать уровень прозрачности. Значения HTML и RGB кодов цветов, вы сможете найти в таблице HTML кодов цветов.

Код будет выглядеть так:

input:focus {
border:#35a5e5 1px solid;
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
-webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
-moz-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}

Кроме свечения можно скруглить углы поля формы, при помоши свойства border-radius.

Примечание переводчика:
В данном случае автор не приводит код стилей, при помощи которых можно создать скругленные углы. Если вы хотите это сделать, то добавьте к коду, приведенному выше следующие свойства и значения:

border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;

- где вместо 5px можете установить любое значение, на которое вы хотите скруглить углы.

В результате у вас должно получиться, что-то вроде этого:

Весь код будет выглядеть так:

input {
 transition: all 0.30s ease-in-out;
 -webkit-transition: all 0.30s ease-in-out;
 -moz-transition: all 0.30s ease-in-out;
 outline:none;
 }
input:focus {
border:#35a5e5 1px solid;
 box-shadow: 0 0 5px rgba(81, 203, 238, 1);
 -webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
 -moz-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
 }

Материал подготовлен сайтом: WebMasterMix.ru
Источник

• Горизонтальное выпадающее меню на CSS 3
• CSS прозрачность - кросс-браузерное решение
• Создаем глянцевое CSS меню
• Графическое CSS меню
• Селекторы CSS