Сегодня мы хотели бы поделиться с вами некоторыми стилями и эффектами для создания всплывающих подсказок. Они обычно используется для вывода какой-то дополнительной информации и встречаются практически на каждом сайте. Эти маленькие помощники предлагают широкие возможности для добавления изысканных и уникальных эффектов к любому дизайну. Так что сегодня мы покажем вам некоторые возможности по стилизации всплывающих подсказок.
Мы задействуем только CSS-переходы через :hover а также немного SVG для создания уникальной формы подсказки. Иконки взяты из Font Awesome, а картинки профиля из Random User Generator.
Пожалуйста, учтите что мы используем несколько современных стилевых свойств, вроде 3D-трансформации, которые работают только в новых браузерах.
Ещё возникает проблема в Firefox с кривыми SVG при использовании процентов в качестве значений для transform-origin. Вы можете не увидеть правильный эффект трансформации, так что рекомендуем воспользоваться Google Chrome, в нём все примеры работают корректно.
Примеры сделаны только на CSS и применяют :hover для отображения всплывающей подсказки, а это не работает для мобильных устройств. Вы можете использовать JavaScript для замены :hover на нажатие. Правильным действием также будет позиционирование подсказки, чтобы она не оказалась за границей экрана. Вот несколько полезных решений.
Давайте посмотрим на стиль всплывающей подсказки, который мы назвали «sharp». Разметка будет следующий.
<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.
@import url(http://fonts.googleapis.com/css?family=Kalam:700,400); .tooltip { position: relative; z-index: 999; }
А это наш переключающий текст.
.tooltip-item { font-weight: bold; cursor: pointer; }
Содержимое всплывающей подсказки имеет скруглённые края и острый наконечник. Мы позиционируем всё абсолютно прямо сверху текста, а затем отрегулируем положение через margin. Ширину при этом фиксируем, а высота будет увеличиваться при необходимости. Предварительно делаем всё прозрачным.
.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; }
В зависимости от положения наконечника установим соответствующее вращение содержания. Мы хотим чтобы вращение происходило вместе с наконечником, создавая эффект «открытия».
.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); }
При наведении курсора на текст показываем содержимое.
.tooltip:hover .tooltip-content { opacity: 1; transform: translate3d(0,0,0); pointer-events: auto; }
Теперь посмотрим на наконечник. Используем псевдоэлемент ::after для добавления наконечника через SVG.
.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; }
И всё это делает изысканную подсказку уникальной формы.
Надеемся, вам понравились эти стили и вы вдохновились.
Сайт