Свечение и отражение элементов при наведении на CSS3
Всем добрый день
Недавно увидел довольно хороший урок для стилей CSS3. Приведенные в данном материале эффекты, работают практически во всех современных браузерах. Но для максимально эффектного изображения, лучше всего подойдет Google Chrome
Изначально изображения имеют небольшую прозрачность, но при наведении на него курсор, прозрачность плавно исчезает, появляется свечение вокруг картины и отражение
Для начала посмотрите ДЕМО
Установка:
1#: В самый низ вашего CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
#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
