При создании сайта хочется сделать его как можно лучше и удобней, по этому расскажу как сделать замечательный эффект затухания иконкам с помощью JQuery. Удобно, просто и красиво выглядит, весь принцип данного эффекта в том, что когда мы приводим мышкой на одну из иконок другие затухают. Это позволит визуально разгрузить сайт, не нагромождая его , при этом подчеркивая необходимую информацию для пользователей. Все достаточно просто и со вкусом, вот что у нас с этого получилось..
Для начала рассмотрим подключение фреймворков . Подключаем фреймворк JQuery и наш js код который находится в файле script.js между тэгом head:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="js/script.js"></script>
Следующим этапом будет создание разметки HTML, код у нас очень простой, между тэгом <strong> вписываем лозунг который будет появляться при наведении курсора на иконку.
<div id="wrapper">
<ul id="jquery" class="social">
<li class="delicious"><a href="#"><strong>Delicious</strong></a></li>
<li class="digg"><a href="#"><strong>Digg</strong></a></li>
<li class="facebook"><a href="#"><strong>Facebook</strong></a></li>
<li class="flickr"><a href="#"><strong>Flickr</strong></a></li>
<li class="linkedin"><a href="#"><strong>LinkedIn</strong></a></li>
<li class="reddit"><a href="#"><strong>Reddit</strong></a></li>
<li class="rss"><a href="#"><strong>RSS</strong></a></li>
<li class="twitter"><a href="#"><strong>Twitter</strong></a></li>
</ul>
</div>
И так, последним, но пожалуй, самым важным шагом, будет создание стилей CSS, так как данный прием позволит нам добиться эффекта затухания иконок.
В данных стилях мы подключаем изображения, обращайте внимание к правильному пути изображений:
#wrapper { width:800px; margin:40px auto; }
.social {
list-style:none;
margin:30px auto;
width:464px; }
.social li {
display:inline;
float:left;
background-repeat:no-repeat; }
.social li a {
display:block;
width:48px;
height:48px;
padding-right:10px;
position:relative;
text-decoration:none; }
.social li a strong {
font-weight:normal;
position:absolute;
left:20px;
top:-1px;
color:#fff;
padding:3px;
z-index:9999;
text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75);
background-color:rgba(0, 0, 0, 0.7);
-moz-border-radius:3px;
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
-webkit-border-radius:3px;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
border-radius:3px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
li.delicious { background-image:url("../images/delicious.png"); }
li.digg { background-image:url("../images/digg.png"); }
li.facebook { background-image:url("../images/facebook.png"); }
li.flickr { background-image:url("../images/flickr.png"); }
li.linkedin { background-image:url("../images/linkedin.png"); }
li.reddit { background-image:url("../images/reddit.png"); }
li.rss { background-image:url("../images/rss.png"); }
li.twitter { background-image:url("../images/twitter.png"); }
Но есть маленький минус в IE эффект всплывающих подписей не работает так как используются несколько функций CSS3, но это поправимо подключив (Progressive Internet Explorer). Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
