WebElement - Лучшие авторские скрипты для вашего сайта и блога
WebElement - это сборник дизайнерских мелочей
А также скриптов, помогающих вам в сайто-строении.
Мы поможем вам сделать сайт красивее, мобильнее и удобнее.
У нас вы можете найти готовые решения на:
HTML, CSS\CSS3, jQuery, JS, плагинам к библиотеке JQ и не только...
Используйте только качественные скрипты на своих сайтах.
Главная » Скрипты »

Hover Эффекты на CSS3

08.10.2012 16:19

DEMOHover Эффекты на CSS3

И так, хочу для начала описать, как все построено.
HTML разметка состоит из 4-х слоев:
1. блок div (для того, чтобы ссылки не налаживались одна на другую)
2. Это ссылка с ID который будет давать цвет всему блоку
3. Это картинка (можно подстроить на обыкновенный блок к примеру с текстом)
4. Это описание появляющееся при наведении.
Теперь давайте посмотрим на саму разметку:
Code

<div id="block">
<a href="#" id="green">
  <img src="full.png" width="150px" height="150px">
  <span><br/><br/><br/>GetElement - Лучшие авторские скрипты для вашего сайта и блога</span>
</a>
</div>

Вот мы и видим то, что я описал выше.

Для того, чтобы не писать одно и то же (HTML)
Так как там меняется только ID у ссылки, вот вам список ID которые нужно подставить ссылке:
id="green"
id="red"
id="blue"
id="white"
id="yellow"
id="dark"

Теперь давайте рассмотрим для каждого блока CSS
Первый стиль: id="green"
Code
#green{
  background: -moz-radial-gradient(center, ellipse cover, rgba(142,186,50,0.9) 0%, rgba(0,0,0,0.9) 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(142,186,50,0.9)), color-stop(100%,rgba(0,0,0,0.9)));
  background: -webkit-radial-gradient(center, ellipse cover, rgba(142,186,50,0.9) 0%,rgba(0,0,0,0.9) 100%);
  background: -o-radial-gradient(center, ellipse cover, rgba(142,186,50,0.9) 0%,rgba(0,0,0,0.9) 100%);
  background: -ms-radial-gradient(center, ellipse cover, rgba(142,186,50,0.9) 0%,rgba(0,0,0,0.9) 100%);
  background: radial-gradient(center, ellipse cover, rgba(142,186,50,0.9) 0%,rgba(0,0,0,0.9) 100%);
  text-decoration:none;
  height: 150px;
  padding:10px;
  position:absolute;
  width: 150px;
  display: inline-block;
  font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
}
#green span{
  position: absolute;
  width: 150px;
  height: 150px;
  top: 10px;
  left: 10px;
  text-align: center;
  line-height: 16px;
  color: #ccc;
  text-shadow: 0px 1px 1px rgba(0,0,0,0.5);
  font-size:13px;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)";
  background: -moz-radial-gradient(center, ellipse cover, rgba(142,186,50,0.9) 0%, rgba(0,0,0,0.9) 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(142,186,50,0.9)), color-stop(100%,rgba(0,0,0,0.9)));
  background: -webkit-radial-gradient(center, ellipse cover, rgba(142,186,50,0.9) 0%,rgba(0,0,0,0.9) 100%);
  background: -o-radial-gradient(center, ellipse cover, rgba(142,186,50,0.9) 0%,rgba(0,0,0,0.9) 100%);
  background: -ms-radial-gradient(center, ellipse cover, rgba(142,186,50,0.9) 0%,rgba(0,0,0,0.9) 100%);
  background: radial-gradient(center, ellipse cover, rgba(142,186,50,0.9) 0%,rgba(0,0,0,0.9) 100%);
  -webkit-transition: opacity 0.3s linear;
  -moz-transition: opacity 0.3s linear;
  -o-transition: opacity 0.3s linear;
  -ms-transition: opacity 0.3s linear;
  transition: opacity 0.3s linear;
}
#green:hover span{
  opacity: 1;
  filter: alpha(opacity=99);
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)";
}

Второй стиль: id="red"
Code
#red{
  background: -moz-radial-gradient(center, ellipse cover, rgba(255,36,0,0.9) 0%, rgba(0,0,0,0.9) 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,36,0,0.9)), color-stop(100%,rgba(0,0,0,0.9)));
  background: -webkit-radial-gradient(center, ellipse cover, rgba(255,36,0,0.9) 0%,rgba(0,0,0,0.9) 100%);
  background: -o-radial-gradient(center, ellipse cover, rgba(255,36,0,0.9) 0%,rgba(0,0,0,0.9) 100%);
  background: -ms-radial-gradient(center, ellipse cover, rgba(255,36,0,0.9) 0%,rgba(0,0,0,0.9) 100%);
  background: radial-gradient(center, ellipse cover, rgba(255,36,0,0.9) 0%,rgba(0,0,0,0.9) 100%);
  text-decoration:none;
  height: 150px;
  padding:10px;
  position:absolute;
  width: 150px;
  display: inline-block;
  font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
}
#red span{
  position: absolute;
  width: 150px;
  height: 150px;
  top: 10px;
  left: 10px;
  text-align: center;
  line-height: 16px;
  color: #ccc;
  text-shadow: 0px 1px 1px rgba(0,0,0,0.5);
  font-size:13px;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)";
  background: -moz-radial-gradient(center, ellipse cover, rgba(255,36,0,0.9) 0%, rgba(0,0,0,0.9) 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,36,0,0.9)), color-stop(100%,rgba(0,0,0,0.9)));
  background: -webkit-radial-gradient(center, ellipse cover, rgba(255,36,0,0.9) 0%,rgba(0,0,0,0.9) 100%);
  background: -o-radial-gradient(center, ellipse cover, rgba(255,36,0,0.9) 0%,rgba(0,0,0,0.9) 100%);
  background: -ms-radial-gradient(center, ellipse cover, rgba(255,36,0,0.9) 0%,rgba(0,0,0,0.9) 100%);
  background: radial-gradient(center, ellipse cover, rgba(255,36,0,0.9) 0%,rgba(0,0,0,0.9) 100%);
  -webkit-transition: opacity 0.3s linear;
  -moz-transition: opacity 0.3s linear;
  -o-transition: opacity 0.3s linear;
  -ms-transition: opacity 0.3s linear;
  transition: opacity 0.3s linear;
}
#red:hover span{
  opacity: 1;
  filter: alpha(opacity=99);
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)";
}

Третий слить: id="blue"
Code
#blue{
  background: -moz-radial-gradient(center, ellipse cover, rgba(48,130,206,0.9) 0%, rgba(0,0,0,0.9) 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(48,130,206,0.9)), color-stop(100%,rgba(0,0,0,0.9)));
  background: -webkit-radial-gradient(center, ellipse cover, rgba(48,130,206,0.9) 0%,rgba(0,0,0,0.9) 100%);
  background: -o-radial-gradient(center, ellipse cover, rgba(48,130,206,0.9) 0%,rgba(0,0,0,0.9) 100%);
  background: -ms-radial-gradient(center, ellipse cover, rgba(48,130,206,0.9) 0%,rgba(0,0,0,0.9) 100%);
  background: radial-gradient(center, ellipse cover, rgba(48,130,206,0.9) 0%,rgba(0,0,0,0.9) 100%);
  text-decoration:none;
  height: 150px;
  padding:10px;
  position:absolute;
  width: 150px;
  display: inline-block;
  font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
}
#blue span{
  position: absolute;
  width: 150px;
  height: 150px;
  top: 10px;
  left: 10px;
  text-align: center;
  line-height: 16px;
  color: #ccc;
  text-shadow: 0px 1px 1px rgba(0,0,0,0.5);
  font-size:13px;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)";
  background: -moz-radial-gradient(center, ellipse cover, rgba(48,130,206,0.9) 0%, rgba(0,0,0,0.9) 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(48,130,206,0.9)), color-stop(100%,rgba(0,0,0,0.9)));
  background: -webkit-radial-gradient(center, ellipse cover, rgba(48,130,206,0.9) 0%,rgba(0,0,0,0.9) 100%);
  background: -o-radial-gradient(center, ellipse cover, rgba(48,130,206,0.9) 0%,rgba(0,0,0,0.9) 100%);
  background: -ms-radial-gradient(center, ellipse cover, rgba(48,130,206,0.9) 0%,rgba(0,0,0,0.9) 100%);
  background: radial-gradient(center, ellipse cover, rgba(48,130,206,0.9) 0%,rgba(0,0,0,0.9) 100%);
  -webkit-transition: opacity 0.3s linear;
  -moz-transition: opacity 0.3s linear;
  -o-transition: opacity 0.3s linear;
  -ms-transition: opacity 0.3s linear;
  transition: opacity 0.3s linear;
}
#blue:hover span{
  opacity: 1;
  filter: alpha(opacity=99);
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)";
}

Четвертый стиль: id="white"
Code
#white{
  background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.9) 0%, rgba(0,0,0,0.9) 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.9)), color-stop(100%,rgba(0,0,0,0.9)));
  background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.9) 0%,rgba(0,0,0,0.9) 100%);
  background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.9) 0%,rgba(0,0,0,0.9) 100%);
  background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.9) 0%,rgba(0,0,0,0.9) 100%);
  background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.9) 0%,rgba(0,0,0,0.9) 100%);
  text-decoration:none;
  height: 150px;
  padding:10px;
  position:absolute;
  width: 150px;
  display: inline-block;
  font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
}
#white span{
  position: absolute;
  width: 150px;
  height: 150px;
  top: 10px;
  left: 10px;
  text-align: center;
  line-height: 16px;
  color: #333;
  text-shadow: 0px 0px 1px rgba(0,0,0,0.5);
  font-size:13px;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)";
  background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.9) 0%, rgba(0,0,0,0.9) 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.9)), color-stop(100%,rgba(0,0,0,0.9)));
  background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.9) 0%,rgba(0,0,0,0.9) 100%);
  background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.9) 0%,rgba(0,0,0,0.9) 100%);
  background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.9) 0%,rgba(0,0,0,0.9) 100%);
  background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.9) 0%,rgba(0,0,0,0.9) 100%);
  -webkit-transition: opacity 0.3s linear;
  -moz-transition: opacity 0.3s linear;
  -o-transition: opacity 0.3s linear;
  -ms-transition: opacity 0.3s linear;
  transition: opacity 0.3s linear;
}
#white:hover span{
  opacity: 1;
  filter: alpha(opacity=99);
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)";
}

Пятый стиль: id="yellow"
Code

#yellow{
  background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,0,0.9) 0%, rgba(0,0,0,0.9) 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,0,0.9)), color-stop(100%,rgba(0,0,0,0.9)));
  background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,0,0.9) 0%,rgba(0,0,0,0.9) 100%);
  background: -o-radial-gradient(center, ellipse cover, rgba(255,255,0,0.9) 0%,rgba(0,0,0,0.9) 100%);
  background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,0,0.9) 0%,rgba(0,0,0,0.9) 100%);
  background: radial-gradient(center, ellipse cover, rgba(255,255,0,0.9) 0%,rgba(0,0,0,0.9) 100%);
  text-decoration:none;
  height: 150px;
  padding:10px;
  position:absolute;
  width: 150px;
  display: inline-block;
  font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
}
#yellow span{
  position: absolute;
  width: 150px;
  height: 150px;
  top: 10px;
  left: 10px;
  text-align: center;
  line-height: 16px;
  color: #333;
  text-shadow: 0px 0px 1px rgba(0,0,0,0.5);
  font-size:13px;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)";
  background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,0,0.9) 0%, rgba(0,0,0,0.9) 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,0,0.9)), color-stop(100%,rgba(0,0,0,0.9)));
  background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,0,0.9) 0%,rgba(0,0,0,0.9) 100%);
  background: -o-radial-gradient(center, ellipse cover, rgba(255,255,0,0.9) 0%,rgba(0,0,0,0.9) 100%);
  background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,0,0.9) 0%,rgba(0,0,0,0.9) 100%);
  background: radial-gradient(center, ellipse cover, rgba(255,255,0,0.9) 0%,rgba(0,0,0,0.9) 100%);
  -webkit-transition: opacity 0.3s linear;
  -moz-transition: opacity 0.3s linear;
  -o-transition: opacity 0.3s linear;
  -ms-transition: opacity 0.3s linear;
  transition: opacity 0.3s linear;
}
#yellow:hover span{
  opacity: 1;
  filter: alpha(opacity=99);
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)";
}

Шестой стиль: id="dark"
Code
#dark{
  background: -moz-radial-gradient(center, ellipse cover, rgba(98,98,98,0.9) 0%, rgba(0,0,0,0.9) 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(98,98,98,0.9)), color-stop(100%,rgba(0,0,0,0.9)));
  background: -webkit-radial-gradient(center, ellipse cover, rgba(98,98,98,0.9) 0%,rgba(0,0,0,0.9) 100%);
  background: -o-radial-gradient(center, ellipse cover, rgba(98,98,98,0.9) 0%,rgba(0,0,0,0.9) 100%);
  background: -ms-radial-gradient(center, ellipse cover, rgba(98,98,98,0.9) 0%,rgba(0,0,0,0.9) 100%);
  background: radial-gradient(center, ellipse cover, rgba(98,98,98,0.9) 0%,rgba(0,0,0,0.9) 100%);
  text-decoration:none;
  height: 150px;
  padding:10px;
  position:absolute;
  width: 150px;
  display: inline-block;
  font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
}
#dark span{
  position: absolute;
  width: 150px;
  height: 150px;
  top: 10px;
  left: 10px;
  text-align: center;
  line-height: 16px;
  color: #ccc;
  text-shadow: 0px 1px 1px rgba(0,0,0,0.5);
  font-size:13px;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)";
  background: -moz-radial-gradient(center, ellipse cover, rgba(98,98,98,0.9) 0%, rgba(0,0,0,0.9) 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(98,98,98,0.9)), color-stop(100%,rgba(0,0,0,0.9)));
  background: -webkit-radial-gradient(center, ellipse cover, rgba(98,98,98,0.9) 0%,rgba(0,0,0,0.9) 100%);
  background: -o-radial-gradient(center, ellipse cover, rgba(98,98,98,0.9) 0%,rgba(0,0,0,0.9) 100%);
  background: -ms-radial-gradient(center, ellipse cover, rgba(98,98,98,0.9) 0%,rgba(0,0,0,0.9) 100%);
  background: radial-gradient(center, ellipse cover, rgba(98,98,98,0.9) 0%,rgba(0,0,0,0.9) 100%);
  -webkit-transition: opacity 0.3s linear;
  -moz-transition: opacity 0.3s linear;
  -o-transition: opacity 0.3s linear;
  -ms-transition: opacity 0.3s linear;
  transition: opacity 0.3s linear;
}
#dark:hover span{
  opacity: 1;
  filter: alpha(opacity=99);
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)";
}


И теперь последний стиль - это стиль для блока:
Code
#block{
  height: 160px;
  width: 160px;
  display: inline-block;
  margin:10px;
}

Вот и все.
Для того, чтобы не запутаться, я собрал все в архив и вы можете его скачать hover-effect.rar
Категория: Разные скрипты | Просмотров: 942 | Добавил: Cradleshel

Теги: эффекты, CSS3, hover эффекты
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
«  Октябрь 2012  »
ПнВтСрЧтПтСбВс
1234567
891011121314
15161718192021
22232425262728
293031
Какой категории уделить больше внимания?
Результат
Всего ответов: 251

Полезная информация

Мы настоятельно рекомендуем вам использовать браузеры последних версий. Нажмите на иконку, чтобы перейти к скачиванию нужного вам браузера

Для правильного отображения сайта, вам понадобится минимальное разрешение экрана 1024 x 768px, оптимальное разрешение: 1280 x 1024px

Копирование материалов с данного сайта разрешено только с указанием обратной ссылки на источник


Copyright WebElement © 2012 - 2025
Лучшие авторские скрипты для вашего сайта и блога.

Перейти к тегам сайта
Используются технологии uCoz
Яндекс.Метрика

Статистика

Всего: 1
Гостей: 1
Юзеров: 0