Как создавать анимированные всплывающие подсказки с помощью CSS3

Сегодня мы вам покажем как создавать простые анимированные всплывающие подсказки с помощью свойства CSS3 transitions и псевдо-классов :before, :after.

Пример Скачать

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

Неупорядоченный список будет выглядеть вот так:

Элементы этого списка будут со свойством float:left, а у анкоров будут следующие CSS свойства:

Так как используется техника спрайтов, следовательно для каждого анкора будет свое свойство background position для фонового изображения:

Элемент span будет работать, как всплывающая подсказка, значит при загрузке страницы его надо спрятать установив свойство opacity на 0. Далее, при наведении курсором мыши на анкор, покажем span с эффектом всплыва:

Для отрисовки маленького треугольного указателя, мы будем использовать псевдо-элементы :before и :after. О технике создания простых геометрических элементов мы уже упоминали в этом блоге: в Геометрические фигуры на CSS и в Создаем треугольники на CSS. Тоже самое применим и в этом случае, только использовать будем псевдо-элементы. Причем элемент :before будет использоваться, как тень для элемента :after:

Смещаем :after на пиксель и делаем его белым, таким образом имитируется тень для указателя:

При наведении курсором мыши на анкор, показываем span и его анимацию движения:

И вуаля! Очень простые анимированные подсказки готовы!

Кроме того, вы можете посмотреть еще примеры с альтернативными стилями для всплывающих подсказок.

Пример 2 Пример 3 Пример 4

Напоминаем, что это будет работать только в браузерах, которые поддерживают псевдо-элементы и CSS transition.