Всего тем: 1434
Сообщений: 7448
Новые сообщения Участники Правила форума Поиск RSS
Страница 1 из 11
Форум » Веб мастеру » Уроки | Помощь начинающим » [Урок] плавное появление и исчезновение тени или свечения (Урок по CSS)
[Урок] плавное появление и исчезновение тени или свечения
Волк_Дата: Суббота, 08.03.2014, 12:21 | Сообщение # 1
Сообщений: 144
Репутация: 13
Награды: 3
Клан:
n/a
Fun Team:
BattleAxe
Группа: Проверенные
Статус:
Здравствуйте. На некоторых сайтах я замечал, что при наведении на какую-либо кнопку плавно появлялось свечение, а если убрать с неё мышку - плавно исчезало. Такой эффект используют где угодно, но сегодня я распишу, как его сделать.

Делают это свечение за счёт добавления тени (box-shadow) к элементу, а плавное появление каждый делает по-разному: кто-то делает скриптово, не зная что в css есть таймер, а кто-то делает параметром transition.

Мы рассмотрим как сделать такую кнопку:

Пока она не наведена - у неё тень чёрная. Так же для "дополнительной ляпоты" я сделал края (border) закруглёнными за счёт border-radius. Вот CSS:

Код
input{     
border-color:#a3a3a3;
background:#e0e0e0;
border-style:solid;
border-radius:3px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
border-width:1px;     
transition:all 0.5s 0s;     
}


Хочу заметить: transition добавлять надо к двум состояниям (в нашем случае к трём, так как input применяется ещё как поле для печати текста) и настраивать под два состояния.

Когда мы наводим на кнопку, цвет краёв и цвет тени у нас плавно меняются:

Код
input:hover {
box-shadow: 0 0 10px rgba(0,137,186,0.5);
border-color:#2893bb;
transition:all 0.7s 0s;     
}


Ну и как я писал выше: у input существует 3 состояния. 3-е состояние - поле для печати. Я его тоже решил сделать таким же, как и кнопки при наведении:

Код
input:focus {
box-shadow: 0 0 10px rgba(0,137,186,0.5);
border-color:#2893bb;
transition:all 0.7s 0s;     
}


Настройка и информация к параметрам:

box-shadow
border
background
border-style
border-radius
border-width
transition

Если что-то не понятно - спрашивайте.
 
nekoДата: Суббота, 08.03.2014, 12:25 | Сообщение # 2
Сообщений: 550
Репутация: 21
Награды: 3
Клан:
ALFA
Fun Team:
xAG[e]NTx
Группа: Легенда
Статус:
Полезная статья для новичков good
 
SteekДата: Вторник, 11.03.2014, 19:23 | Сообщение # 3
Сообщений: 10
Репутация: 2
Награды: 1
Клан:
wA.tm
Fun Team:
n/a
Группа: Пользователь
Статус:
Нармас)0 feellikeasir
 
_ENERG1ZzzeR_Дата: Воскресенье, 02.11.2014, 23:22 | Сообщение # 4
Сообщений: 53
Репутация: 0
Награды: 1
Клан:
Freedom Drifters
Fun Team:
n/a
Группа: Проверенные
Статус:
Нормально )

 
Форум » Веб мастеру » Уроки | Помощь начинающим » [Урок] плавное появление и исчезновение тени или свечения (Урок по CSS)
Страница 1 из 11
Поиск:
Всего пользователей: 7647
За сегодня: 0
За вчера: 0
За неделю: 1
За этот месяц: 3

Копирование материалов без указания на наш сайт запрещено!
Дизайн полностью принадлежит сайту MP-Info.ru
Автор дизайна: Silverback
© MP-Info.ru 2011-2017