От автора: Небольшая коллекция вдохновляющих стилей и эффектов для всплывающих при наведении подсказок. Используя CSS трансформации, скругления углов и SVG, мы можем создать интересные современные всплывающие подсказки (tooltips).
Сегодня мы бы хотели поделиться с вами некоторыми стилями и эффектами для всплывающих подсказок. Обычно всплывающие подсказки используют для предоставления дополнительной информации о чем-либо, и их можно встретить практически на любом сайте. Эти маленькие помощники дают нам возможность привнести немного изящных и уникальных эффектов в наш дизайн. Поэтому сегодня мы покажем вам, как можно стилизовать подобные элементы.
Мы будем использовать CSS трансформации при наведении, а также SVG для создания уникальных форм. Иконки взяты из библиотеки иконочных шрифтов Font Awesome, а изображения — с сервиса Random User Generator.
Пожалуйста, обратите внимание на то, что мы используем некоторые современные CSS свойства, например, 3D трансформации, которые будут работать только в современных браузерах.
Похоже, что существует проблема с использованием значения в процентах для свойства transform-origin при создании SVG путей в браузере Firefox. Возможно, что из-за этого вы не увидите желаемого эффекта, поэтому мы рекомендуем вам использовать браузер Google Chrome, чтобы убедиться, что все работает корректно.
Также обратите внимание на то, что создание анимации для атрибута stroke-dasharray не работает в браузере IE < 11. В наших примерах используются только CSS эффекты для всплывающих при наведении подсказок, что не является хорошим решением для мобильных устройств. В данном случае вам потребуется использовать JavaScript, чтобы контролировать появление подсказок при клике, а не при наведении. Чтобы решение было полноценным, нужно также учесть позиционирование всплывающей подсказки, чтобы она не оказалась за пределами экрана. Вот некоторые готовые решения, которые могут вам пригодиться:
Давайте посмотрим на «острый» стиль оформления. Разметка будет такой:
|
1 2 3 4 |
<blockquote> <p>A man of my <span class="tooltip tooltip-turnright"><span class="tooltip-item">spiritual</span><span class="tooltip-content"><strong>[spir·it·u·al]</strong> affecting the human spirit or soul as opposed to material or physical things</span></span> intensity does not eat <span class="tooltip tooltip-turnleft"><span class="tooltip-item">corpses</span><span class="tooltip-content"><strong>[corpse]</strong> dead body, body, carcass, skeleton, remains, mortal remains, rotten bacon</span></span>.</p> <footer><span class="tooltip tooltip-turnright"><span class="tooltip-item">George Bernard Shaw</span><span class="tooltip-content"><strong>George Bernard Shaw</strong> (26 July 1856 – 2 November 1950) was an Irish playwright and a co-founder of the London School of Economics.</span></span></footer> </blockquote> |
У нас есть две разновидности всплывающих подсказок: в одном варианте подсказка появляется слева, а в другом — справа. В этом примере мы будем использовать SVG для создания формы подсказки.
Итак, давайте посмотрим на CSS:
|
1 2 3 4 5 6 |
@import url(//fonts.googleapis.com/css?family=Kalam:700,400); .tooltip { position: relative; z-index: 999; } |
А вот стили для выделенного текста:
|
1 2 3 4 |
.tooltip-item { font-weight: bold; cursor: pointer; } |
Для содержимого подсказки будет задан соответствующий радиус скругления углов, который подойдет для «острого» стиля. Мы зададим ему абсолютное позиционирование, расположив прямо над выделенным словом, а затем подкорректируем расположение с помощью полей (margins). Поскольку ширина будет фиксированной, высота сама увеличится до нужного размера. Изначально для элемента установлена полная прозрачность.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.tooltip-content { position: absolute; bottom: 100%; left: 50%; z-index: 9999; margin: 0 0 105px -140px; padding: 25px; width: 280px; border-radius: 10px/50%; background: #fff; color: #dd5864; text-align: left; font-size: 16px; opacity: 0; cursor: default; transition: opacity 0.3s, transform 0.3s; pointer-events: none; } |
В зависимости от того, с какой стороны появляется подсказка, мы устанавливаем соответствующий поворот содержимого. Фактически, мы хотим, чтобы содержимое поворачивалось вместе с подсказкой, создавая эффект «открытия».
|
1 2 3 4 5 6 7 |
.tooltip-turnright .tooltip-content { transform: translate3d(0,50px,0) rotate3d(1,1,1,6deg); } .tooltip-turnleft .tooltip-content { transform: translate3d(0,50px,0) rotate3d(1,1,1,-6deg); } |
При наведении будет показано содержимое подсказки:
|
1 2 3 4 5 |
.tooltip:hover .tooltip-content { opacity: 1; transform: translate3d(0,0,0); pointer-events: auto; } |
Теперь давайте посмотрим на эту подсказку. Мы будем использовать псевдо-элемент ::after для добавления подсказки, которая создана с помощью SVG:
|
1 2 3 4 5 6 7 8 9 10 11 |
.tooltip-content::after { position: absolute; top: 100%; width: 60px; height: 120px; background: url(../img/tooltip3.svg) no-repeat center center; background-size: 100%; content: ''; transition: transform 0.3s; transform-origin: 50% 0; } |
В зависимости от того, с какой стороны мы хотим отобразить подсказку, мы устанавливаем нужный нам поворот. Вы заметите, что мы используем параметр scale3d(-1,1,1) для подсказки, появляющейся справа. Это позволяет нам создать «отражение» элемента в CSS.
|
1 2 3 4 5 6 7 8 9 |
.tooltip-turnright .tooltip-content::after { left: 25%; transform: scale3d(-1,1,1) rotate3d(1,1,1,25deg) translate3d(0,-15px,0); } .tooltip-turnleft .tooltip-content::after { right: 25%; transform: rotate3d(1,1,1,25deg) translate3d(0,-15px,0); } |
При наведении мы переводим трансформации в конечное положение:
|
1 2 3 4 5 6 7 |
.tooltip-turnright:hover .tooltip-content::after { transform: scale3d(-1,1,1) rotate3d(1,1,1,0) translate3d(0,-5px,0); } .tooltip-turnleft:hover .tooltip-content::after { transform: rotate3d(1,1,1,0) translate3d(0,-5px,0); } |
И все это позволяет нам создать изящную всплывающую подсказку уникальной формы. Надеемся, что вам понравилось предложенное нами оформление, и вы получили заряд вдохновения. 🙂
Автор: Mary Lou
Источник: //tympanus.net/
Редакция: Команда webformyself.
