Главная » Файлы » Прочие скрипты » CSS
Свечение и отражение элементов при наведении на css3 для uCoz
24.06.14, 09:03:00



Всем добрый день
Недавно увидел довольно хороший урок для стилей CSS3.
Приведенные в данном материале эффекты, работают практически во всех современных браузерах. Но для максимально эффектного изображения, лучше всего подойдет Google Chrome.
Изначально изображения имеют небольшую прозрачность, но при наведении на него курсор, прозрачность плавно исчезает, появляется свечение вокруг картины и отражение.
В принципе на демо все видно, и понятно работа стиля.

ДЕМО

CSS3
Код
#ex5 {  
width: 700px;  
margin: 0 auto;  
min-height: 300px;  
  }  

  #ex5 img {  
margin: 25px;  
opacity: 0.8;  
border: 10px solid #eee;  

/*Трансформацияя*/  
-webkit-transition: all 0.5s ease;  
-moz-transition: all 0.5s ease;  
-o-transition: all 0.5s ease;  

/*Отражение*/  
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1)));  
  }  

  #ex5 img:hover {
opacity: 1;  

/*Отражение*/  
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));  

/*Свечение*/  
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);  
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);  
box-shadow: 0px 0px 20px rgba(255,255,255,0.8);  
  }


Материал подготовил: Bizon

Источник урока: http://designshack.net
Категория: CSS | Добавил: Apocalypse | Теги: при, свечение, ucoz, на, элементов, наведении, Отражение, CSS3, для
Просмотров: 473 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: