Некоторое время назад внимание автора урока привлек  интересный способ представления значков социальных сетей. Когда вы наводите указатель мыши на значок, появляется маленькая всплывающая подсказка с названием социальной сети, а все другие значки становятся полупрозрачными. Автору захотелось развить этот подход с применением CSS3 переходов. Основные задачи: плавное изменение уровня прозрачности, и небольшая анимация положения всплывающей подсказки. 

Этот пример работает во всех -webkit браузерах, таких как Safari и Chrome, а так же в Firefox. Мы также подключили версию с jQuery для обратной совместимости. Так что Вы сможете увидеть, как может быть получен один и тот же эффект, используя CSS и jQuery.

Демонстрация работы – Скачать исходный код

Хотя код и эффект минималистичны, они создадут у Вашего сайта профессиональный вид. Давайте погрузимся в код, чтобы увидеть, как внедрить что-то подобное на Вашем веб-сайте. Заметьте, что этот эффект может быть применен также к другим кнопкам, а не только к значкам социальных сетей.

HTML

HTML, основа страницы, будет очень чистым и опрятным, каким он и должен быть. Вот часть кода HTML, которую мы будем использовать.

<ul class="social">
<li class="delicious">
<a href="http://www.delicious.com/">
<strong>Delicious</strong>
</a>
</li>
<li class="digg">
<a href="http://digg.com/">
<strong>Digg</strong>
</a>
</li>
<!-- Другие социальные сети -->
</ul>

Как Вы видите, мы используем простой ненумерованный список, элементы которого содержат ссылки. Единственная особенность — использование элементов strong. Этот дополнительный элемент нам нужен для применения некоторых стилей CSS для всплывающей подсказки. Элемент span тоже можно было бы использовать, но в этом случае мы предпочли элемент strong.

Теперь давайте погрузимся в стандартные классы CSS, которые нужны для обоих примеров: и для CSS3, и для jQuery.

CSS

Основной CSS тоже не так уж и сложен. Мы покажем список в ряд и изменим некоторые свойства отображения. Вот ядро стандартного CSS:

.social { list-style:none; }
.social li { display:inline; float:left; }
.social li a { display:block; width:48px; height:48px; position:relative; }
.social li a strong { position:absolute; left:20px; top:-1px;
text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7);
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"); }

Заметьте, что text-shadow, rgba и border-radius — это свойства CSS3, но мы использовали их и здесь, чтобы показать всплывающую подсказку. Так как у родительского объекта элемента strong относительное позиционирование, мы можем задать самому элементу абсолютное позиционирование и легко использовать свойства отступа слева и сверху.

Теперь перейдем к более интересным частям: анимации CSS3.

CSS3

Возможно, Вы ожидаете здесь сложный код CSS3, но это не так. Синтаксис переходов CSS на самом деле такой простой, что он не занимает много места. Убедитесь сами:

.social:hover li { opacity:0.2; }

.social li { transition-property: opacity; transition-duration: 500ms; }
.social li a strong { opacity:0;
transition-property: opacity, top; transition-duration: 300ms;
}
.social li:hover { opacity:1; }
.social li:hover a strong { opacity:1; top:-10px; }

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

Когда пользователь наводит указатель мыши, мы меняем значения этих свойств. Так как transition-property было установлено, браузер сделает всю анимацию за нас. Это настолько просто. Когда пользователь отведет указатель мыши, класс будет заменен на исходный, и мы также увидим анимацию.

jQuery

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

// Спрятать все всплывающие подсказки
$("#jquery li").each(function() {
$("a strong", this).css("opacity", "0");
});
$("#jquery li").hover(function() { // Наведение указателя мыши
$(this)
.stop().fadeTo(500, 1)
.siblings().stop().fadeTo(500, 0.2);
$("a strong", this)
.stop()
.animate({
opacity: 1,
top: "-10px"
}, 300);
}, function() { // Отведение указателя мыши
$(this)
.stop().fadeTo(500, 1)
.siblings().stop().fadeTo(500, 1);
$("a strong", this)
.stop()
.animate({
opacity: 0,
top: "-1px"
}, 300);
});

Теперь все Ваши посетители увидят значки социальных сетей, показанные интересным образом!

Заключение

Хотя этот эффект минималистичен, он отлично выглядит. Заметьте, что исходный код содержит некоторые свойства с приставками -webkit и -moz, которые не были включены в этот урок. Погрузитесь в код и посмотрите, как выглядит весь код CSS. То же самое относится к использованию некоторых идентификаторов в HTML, на которые ссылаются HTML/JavaScript.

Демонстрация работы – Скачать исходный код

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

Автор урока Marco Kuiper

Перевод — Дежурка

Смотрите также:

• Социальные закладки на бельевой веревке при помощи CSS 
• Создание плоских «хлебных крошек» с использованием CSS
• Создание вытягиваемого бокового меню для веб-сайта