2015
19
Март

CSS эффекты при наведении



Псевдокласс CSS hover уже знаком вам. Каждый из вас встречается с ним при наведении курсора на ссылку. У меня на сайте любые ссылки сопровождаются изменением цвета текста, появление надписей над картинками, вращение миниатюр при наведении курсора. Эффект появляется при наведении курсора мыши на элемент, но сам элемент не активирован, так как нет клика мыши.


Что же такое hover –эффект? Это плавные переходы, всплывающие подсказки или надписи, увеличение или уменьшение объекта. Свойства CSS3 хорошо совместимы с новыми современными браузерами и они все чаще приходят на смену javascript.

Сегодня мы рассмотрим некоторые эффекты с использованием свойств CSS. Ваш сайт будет выглядеть гораздо интереснее с использованием различных переходов. С применением стилей вы создадите креативный дизайн и этим привлечете посетителей. В последнее время все чаще используют CSS3 для создания интересных фишек.


Вращение миниатюр при наведении


HTML разметка


<ul class="ca-menu"> <li><a href="#"><span class="ca-icon">A</span> <div class="ca-content"> <h2 class="ca-main">Интернет</h2> <h3 class="ca-sub">Вы сами можете создать сайт</h3> </div></a></li> <li><a href="#"><span class="ca-icon">I</span> <div class="ca-content"> <h2 class="ca-main">Фотошоп</h2> <h3 class="ca-sub">Все для вашего сайта</h3> </div></a></li> <li><a href="#"><span class="ca-icon">C</span> <div class="ca-content"> <h2 class="ca-main">Заработок</h2> <h3 class="ca-sub">Здесь вы узнаете о видах заработка</h3> </div></a></li> <li><a href="#"><span class="ca-icon">S</span> <div class="ca-content"> <h2 class="ca-main">Знание сила</h2> <h3 class="ca-sub">Это нужно знать каждому</h3> </div></a></li> </ul>


Прописываем свойства.Я думаю,что здесь для вас будет все понятно.


Стили CSS


font-face { font-family: 'WebSymbolsRegular'; src: url('images/websymbols/websymbols-regular-webfont.eot'); src: url('images/websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'), url('images/websymbols/websymbols-regular-webfont.woff') format('woff'), url('images/websymbols/websymbols-regular-webfont.ttf') format('truetype'), url('images/websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg'); font-weight: normal; font-style: normal; } .ca-menu{ padding:0; margin:20px auto; width: 1020px; font-family: 'Dosis', sans-serif; } .ca-menu li{ width: 230px; height: 230px; border: 10px solid #f6f6f6; overflow: hidden; position: relative;float:left; background: #fff; margin-right: 4px; -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2); -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2); box-shadow: 1px 1px 2px rgba(0,0,0,0.2); -webkit-border-radius: 125px; -moz-border-radius: 125px; border-radius: 125px; -webkit-transition: all 400ms linear; -moz-transition: all 400ms linear; -o-transition: all 400ms linear; -ms-transition: all 400ms linear; transition: all 400ms linear; } .ca-menu li:last-child{ margin-right: 0px; } .ca-menu li a{ text-align: left; width: 100%; height: 100%; display: block; color: #333; position: relative; -moz-box-shadow:0px 0px 3px #000000; -webkit-box-shadow:0px 0px 3px #000000; box-shadow:0px 0px 3px #000000; } .ca-icon{ font-family: 'WebSymbolsRegular', cursive; font-size: 40px; color: #f6f6f6;; line-height: 60px; position: absolute; width: 100%; height: 60px; left: 0px; top: 30px; text-align: center; -webkit-transition: all 400ms linear; -moz-transition: all 400ms linear; -o-transition: all 400ms linear; -ms-transition: all 400ms linear; transition: all 400ms linear; } .ca-main{ font-size: 24px; position: absolute; top: 110px; height: 80px; width: 170px; left: 50%; margin-left: -85px; opacity: 0.8; ext-align: center; } .ca-sub{ text-align:center; color: #000; font-size: 26px; position: absolute; height: 80px; width: 170px; left: 50%; margin-left: -85px; top: 110px; opacity: 0; -webkit-transition: all 400ms linear; -moz-transition: all 400ms linear; -o-transition: all 400ms linear; -ms-transition: all 400ms linear; transition: all 400ms linear; } .ca-menu li:hover{ background: #f7f7f7; border-color: #fff; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); box-shadow: 0 45px 60px -50px #000000; } .ca-menu li:hover .ca-icon{ color: #555; font-size: 60px; } .ca-menu li:hover .ca-main{ display: none; } .ca-menu li:hover .ca-sub{ opacity: 0.8; }