Создание анимированных tooltips’ов с помощью CSS3
Статьи про создание tooltips’ов уже не раз поднимались на хабре [1,2] в виду большой популярности этого элемента. Сегодня вы узнаете еще один способ как создать простые, анимированные подсказки с помощью псевдо-элементов before и after, а так же свойства transitions.
В качестве примера были сделаны иконки социальных сервисов, при наведении на которые показываются названия этих сервисов.
Неупорядоченный список сервисов:
Основной стиль для иконок и дополнительные стили для их позиционирования.
.tt-wrapper li a < display: block; width: 68px; height: 70px; margin: 0 2px; outline: none; background: transparent url(../images/icons.png) no-repeat top left; position: relative; >.tt-wrapper li .tt-gplus < background-position: 0px 0px; >.tt-wrapper li .tt-twitter < background-position: -68px 0px; >.tt-wrapper li .tt-dribbble < background-position: -136px 0px; >.tt-wrapper li .tt-facebook < background-position: -204px 0px; >.tt-wrapper li .tt-linkedin < background-position: -272px 0px; >.tt-wrapper li .tt-forrst
Внутрь элементов мы спрячем всплывающие подсказки, предварительно установив нулевую прозрачность, а скорость «всплытия» сделаем равную 0.3. В первом примере подсказки будут появляться сверху, поэтому расположим их на 100 пикселей выше иконок.
.tt-wrapper li a span
Появление происходит при наведении курсора на иконки или при наведении на место, где расположена сама подсказка. Указатель будет сделан с помощью псевдо-элементов before и after и будет представлять собой треугольник с небольшой тенью.
.tt-wrapper li a span:before, .tt-wrapper li a span:after < content: ''; position: absolute; bottom: -15px; left: 50%; margin-left: -9px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid rgba(0,0,0,0.1); >.tt-wrapper li a span:after
При самом наведении, мы увеличим прозрачность блока с подсказкой до 0.9 и зададим границу появления.
.tt-wrapper li a:hover span
Вот такой простой способ. В демо можно увидеть еще три других примера. Исходники можно скачать вот здесь.
К сожалению, примеры будут работать только в тех браузерах, которые поддерживают псевдо-элементы и свойство transitions.
Анимированные всплывающие подсказки (tooltip) на CSS
Всплывающие подсказки это отличный способ для улучшения UI, в том случае если пользователю нужен дополнительный контекст для определенного элемента на сайте. В этом уроке мы создадим анимированные всплывающие подсказки, с использованием HTML и CSS.
Для начала взгляните на демонстрационный пример, чтобы иметь представление с чем вам придеться работать.
Для начала разберем саму концепцию всплывающей подсказки. Основная задача — обеспечить простое добавление всплывающей подсказки, для этого мы создадим пользовательский атрибут tooltip:
span tooltip="message">visible text or icon, etc. span>FAQ
- Не требует JavaScript
- Работает на селекторах атрибутов, а не на классах
- Не нуждается в отдельных элементах DOM
- Примеры кода поставляются без префиксов (вы можете добавить их в своих проектах)
- Работает при наведении курсора
- Поддерживает только текст (HTML, изображения и т.д. не поддерживаются)
- Легкая анимация при вызове всплывающих подсказок
Всплывающие подсказки будут работать полностью на псевдо-элементах ::before и ::after, которые мы можем контролировать с помощью CSS.
Еще один важный момент — позиционирование. Элемент к которому мы добавляем всплывающую подсказку, должен иметь следующее позиционирование:
Селекторы атрибутов. Быстрый взгляд
Большинство CSS правил пишутся с использованием классов. Но CSS также имеет несколько других типов селекторов. Для работы наших всплывающих подсказок мы будем использовать селектор атрибутов — они обозначаются квадратными скобками:
[foo] < background: rgba(0, 0, 0, 0.8); color: #fff; >Пример элемента с атрибутом foo:
span foo>Check it out! span>В результате span с атрибутом foo окрасится в белый цвет, с полупрозрачным черным фоном.
Почему именно селектор атрибутов?
В первую очередь мы будем использовать селектор атрибутов для разделения правил. Вы не получите никаких дополнительных преимуществ при использовании атрибутов вместо классов. Классы и атрибуты имеют одинаковую специфичность. Тем не менее, благодаря атрибутам мы можем расширить область выбора элементов, так как атрибуты могут иметь значение, а классы нет.
Рассмотрим пример: класс .tooltip vs. атрибут [tooltip]. Имя класса является одним из значений атрибута class, атрибут tooltip имеет в качестве значения текст который мы будем отображать при наведении.
span class="tooltip another-classname">lorem ipsum span> span tooltip="sit dolar amet">lorem ipsum span>Создание всплывающих подсказок на CSS
Наши всплывающие подсказки будут использовать два различных атрибута:
- tooltip: Содержит текст подсказки
- flow: опциональный атрибут, позволяет определить с какой стороны будет появляться всплывающая подсказка (сверху, снизу, слева, справа)
1. Позиционирование
Для родительского элемента установим относительное позиционирование:
[tooltip] < position: relative; >2. Псевдо-элементы
Перейдем к псевдо-элементам ::before и ::after. Свойство content является обязательным для работы псевдо-элементов, но мы определим его позже.
[tooltip]::before, [tooltip]::after < line-height: 1; user-select: none; pointer-events: none; position: absolute; display: none; opacity: 0; /* opinions */ text-transform: none; font-size: .9em; >3. Треугольник
Обратите внимание что для создания треугольника мы используем прозрачную рамку, цвет для неё мы добавим позже, когда будем определять с какой стороны будет появляться всплывающая подсказка flow.
[tooltip]::before < content: ''; z-index: 1001; border: 5px solid transparent; >Мы оставили значение свойства content пустым, так как нам не нужно добавлять каких-либо дополнительных элементов к подсказке.
Для создания треугольника мы используем свойство border на пустом контейнере, который не имеет контента, высоты и ширины, затем устанавливаем рамку только с одной стороны контейнера.
4. Стиль всплывающей подсказки
Обратите внимание на свойство content: attr(tooltip). Этот псевдо-элемент должен использовать значение атрибута tooltip в качестве его содержания.
[tooltip]::after < content: attr(tooltip); z-index: 1000; font-family: Helvetica, sans-serif; text-align: center; /* Let the content set the size of the tooltips but this will also keep them from being obnoxious */ min-width: 3em; max-width: 21em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* visible design of the tooltip bubbles */ padding: 1ch 1.5ch; border-radius: .3ch; box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35); background: #333; color: #fff; >5. Взаимодействие
Всплывающую подсказку мы будем вызывать при наведении курсора мыши:
[tooltip]:hover::before, [tooltip]:hover::after < display: block; >Как вы помните, на втором шаге, для всплывающей подсказки мы использовали два свойства opacity: 0 и display: none. Это для того чтобы мы могли добавить к ним анимацию для появление и скрытия подсказки.
Свойство display не может быть анимированно, но вместо этого мы можем анимировать свойство opacity. Если вы не хотите использовать анимацию, просто удалите свойство opacity: 0 из второго шага, и можете не переходить к шагу 7.
Также нам нужно предотвратить появление пустой всплывающей подсказки:
[tooltip='']::before, [tooltip='']::after < display: none !important; >6. Настройка позиционирования всплывающей подсказки
Это довольно сложный шаг, так как мы будем использовать немного не стандартные селекторы для определения позиции появления подсказки.
Для начала взглянем на селекторы которые мы будем использовать:
[tooltip]:not([flow])::before, [tooltip][flow^="up"]::before < /* . properties: values . */ >Этом мы говорим браузеру «Для всех элементов с атрибутом tooltip, которые не имеют атрибут flow, или имеют атрибут flow со значением up и применяем эти стили для псевдо-элементов ::before«.
Вверх (по умолчанию)
[tooltip]:not([flow])::before, [tooltip][flow^="up"]::before < bottom: 100%; border-bottom-width: 0; border-top-color: #333; > [tooltip]:not([flow])::after, [tooltip][flow^="up"]::after < bottom: calc(100% + 5px); > [tooltip]:not([flow])::before, [tooltip]:not([flow])::after, [tooltip][flow^="up"]::before, [tooltip][flow^="up"]::after < left: 50%; transform: translate(-50%, -.5em); >Вниз
[tooltip][flow^="down"]::before < top: 100%; border-top-width: 0; border-bottom-color: #333; > [tooltip][flow^="down"]::after < top: calc(100% + 5px); > [tooltip][flow^="down"]::before, [tooltip][flow^="down"]::after < left: 50%; transform: translate(-50%, .5em); >Влево
[tooltip][flow^="left"]::before < top: 50%; border-right-width: 0; border-left-color: #333; left: calc(0em - 5px); transform: translate(-.5em, -50%); > [tooltip][flow^="left"]::after < top: 50%; right: calc(100% + 5px); Вправо
[tooltip][flow^="right"]::before < top: 50%; border-left-width: 0; border-right-color: #333; right: calc(0em - 5px); transform: translate(.5em, -50%); > [tooltip][flow^="right"]::after < top: 50%; left: calc(100% + 5px); transform: translate(.5em, -50%); >7. Анимация
Для анимации нам понадобятся два @keyframes. Всплывающие подсказки которые будут появляться вверх/вниз будут использовать keyframe tooltips-vert, а всплывающие подсказки которые появляются слева/справа будут использовать keyframe tooltips-horz. Обратите внимание, что во всех ключевых кадрах мы определяем только конечные состояния анимации.
@keyframes tooltips-vert < to < opacity: .9; transform: translate(-50%, 0); > > @keyframes tooltips-horz < to < opacity: .9; transform: translate(0, -50%); > >Теперь нам нужно применить эту анимацию при наведении на элемент с атрибутом tooltip.
[tooltip]:not([flow]):hover::before, [tooltip]:not([flow]):hover::after, [tooltip][flow^="up"]:hover::before, [tooltip][flow^="up"]:hover::after, [tooltip][flow^="down"]:hover::before, [tooltip][flow^="down"]:hover::after < animation: tooltips-vert 300ms ease-out forwards; > [tooltip][flow^="left"]:hover::before, [tooltip][flow^="left"]:hover::after, [tooltip][flow^="right"]:hover::before, [tooltip][flow^="right"]:hover::after < animation: tooltips-horz 300ms ease-out forwards; >Вам требуются услуги или консультация специалиста по веб-разработке?
Анимированные подсказки для элементов текста и ссылок с помощью свойств CSS3
Здравствуйте всем!
Подсказки для ссылок, или же элементов текста всегда выглядят привлекательно, да и пользователю подсказки порой облегчают понимание того что он вообще хочет получить посетив тот или иной сайт. Подсказки бывают разные и по формам и по исполнению, с применением картинок в оформлении, работающие на javascript, даже говорящие и с проигрыванием музыки. Вариантов много и все они по своему хороши, тут уж дело вкуса.
Сегодня я хочу рассказать и показать вам, как используя замечательные свойства CSS3, без применения дополнительных картинок и javascript, можно создать простые и привлекательные анимированные подсказки к элементам текста или ссылкам. В работе мы будем использовать исключительно чистый стиль(функции) CSS3.
Сначала мы рассмотрим возможность вывода подсказок для отдельных отрывков(элементов) текста. Допустим у нас есть некий текст, в котором к какому то слову, или отрывку нужно дать пояснение в виде подсказки.
Для начала весь текст необходимо поместить в контейнер используя блочный элемент тега div присвоив ему class=”content”, отрывок текста с подсказкой поместим между тегами и . Саму подсказку облачим тегом , тем самым придадим курсивное начертание текста подсказки, ну и в CSS3 он нам будет служить направляющей для оформления и вывода самой подсказки.
В HTML это будет выглядеть примерно так:
div class="content">Я не люблю воскресные вечера. Время разбитых надежд и span>утраченных иллюзийi>Дождь не может идти вечноi>span>. Все выходные ждёшь светлого будущего, а приходит понедельник.div>
Я не люблю воскресные вечера. Время разбитых надежд и утраченных иллюзийДождь не может идти вечно . Все выходные ждёшь светлого будущего, а приходит понедельник.
Шаг второй: CSS
Перейдем непосредственно к стилям наших подсказок через свойства CSS.
Во-первых определим стиль для видимого элемента нашей подсказки:
.content span background:#eee; border:1px solid #444; cursor:pointer; display:inline-block; outline:none; padding:0 5px; position:relative; text-decoration:none; -webkit-border-radius:5px; -moz-border-radius:5px; -ms-border-radius:5px; -o-border-radius:5px; border-radius:5px; >
А теперь оформим внешний вид и скрытие плавающей области подсказки :
.content span i visibility:hidden; border:1px solid #444; bottom:60px; left:50%; margin-left:-110px; opacity:0; padding:10px; position:absolute; width:200px; z-index:99; background-image:-webkit-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2)); background-image:-moz-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2)); background-image:-ms-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2)); background-image:-o-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2)); background-image:linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2)); background-color: #eee; -webkit-border-radius:5px; -moz-border-radius:5px; -ms-border-radius:5px; -o-border-radius:5px; border-radius:5px; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; > .content span:hover i bottom:30px; opacity:0.95; visibility:visible; >
Это еще не все, было бы нелепо оставлять подсказке однотипный внешний вид и цветовую гамму, так что можно немного поработав придать необычные формы и различные цвета нашим подсказкам.
Это подсказка №1Подсказка номер один Фон может быть красныйПодсказка №1 – красный цвет зеленыйПодсказка №1 – зеленый цвет и синийПодсказка №1 – синий цвет
Это подсказка №2Подсказка номер два Фон может быть красныйПодсказка №2 – красный цвет зеленыйПодсказка №2 – зеленый цвет и синийПодсказка №2 – синий цвет
Это подсказка №3Подсказка номер три Фон может быть красныйПодсказка №3 – красный цвет зеленыйПодсказка №3– зеленый цвет и синийПодсказка №3 – синий цвет
Это подсказка №4Подсказка номер четыре Фон может быть красныйПодсказка №4 – красный цвет зеленыйПодсказка №4 – зеленый цвет и синийПодсказка №4 – синий цвет
В HTML все это действо будет выглядеть примерно так:
div class="demo_content"> p>Это span>подсказка №1i class="v1">Подсказка номер одинi>span> Фон может быть span class="r">красныйi class="v1">Подсказка №1 – красный цвет зеленыйПодсказка №1 – зеленый цвет и синийПодсказка №1 – синий цвет hr /> Это span>подсказка №2i class="v2">Подсказка номер дваi>span> Фон может быть span class="r">красныйi class="v2">Подсказка №2 – красный цвет зеленыйПодсказка №2 – зеленый цвет и синийПодсказка №2 – синий цвет hr /> Это span>подсказка №3i class="v3">Подсказка номер триi>span> Фон может быть span class="r">красныйi class="v3">Подсказка №3 – красный цвет зеленыйПодсказка №3– зеленый цвет и синийПодсказка №3 – синий цвет hr /> Это span>подсказка №4i class="v4">Подсказка номер четыреi>span> Фон может быть span class="r">красныйi class="v4">Подсказка №4 – красный цвет зеленыйПодсказка №4 – зеленый цвет и синийПодсказка №4 – синий цвет hr />div>
Вот и все, проделав все эти нехитрые манипуляции и телодвижения, те кому это надо, получат замечательные анимированные подсказки на свой сайт или блог.
Ну, а пока — пока!
Всего комментариев: 7
Ваня : 6 октября, 2012 в 18:13 Классные подсказки))) Как раз то, что нужно. Ответить
Егор : 23 октября, 2013 в 19:50 Доброго времени суток! Нашел Ваш блог и очень благодарен Вам за те прекрасные решения задач, которые показаны на Вашем сайте. Но увы, вынужден у Вас спросить помощи. Дело в том, что я на сайте делаю карту звездного неба через. Возможно ли сделать так, чтобы при наведении курсора на размеченную область изображения вылезала такая красивая подсказка? Ответить
driver : 26 октября, 2013 в 20:03 Егор.
Спасибо за отзыв. По вашему вопросу, существуют различные решения. Обратите внимание на реализацию подсказок для различных элементов содержания с помощью css и jQuery. Ответить
NeedHate : 12 февраля, 2014 в 19:06 Я прямо бью по всем направлениям. Как сделать, чтобы анимация шла не сверху вниз, а снизу вверх. Допустим у нас есть начальная точка 0 координат и нам нужно на 50% заполнить картинку. И вот анимация должна идти снизу вверх. как? 8) Ответить
driver : 12 февраля, 2014 в 19:54 Вы меня уже в конец запутаете скоро, я не понял, что всё таки вам нуна, подсказки к ссылкам или всплывающие подписи к картинкам, или много и всё сразу. По поводу подсказок, я вам развернуто ответил в комментах к статье, что у вас получилось или нет, ответа не последовало, и вот новый запрос. Прям безудержная тяга к познаниям ))).
За эффекты переходов(появления), в данном примере отвечает свойство transition , подсказка скрыта и располагается на 60px вверх от нижнего края ссылки, стало быть она там и появляется при наведении, а затем срабатывает transition:all 0.3s ease-in-out; и смещает подсказку в низ до нужной позиции. Достаточно изменить значение положения скрытой подсказки на отрицательное, например сделать bottom:-20px; для .content span i и подсказка будет появляться снизу, и т.д. и т.п Ответить
Елена : 3 августа, 2015 в 07:04 Автору огромный респект. Спасибо за полезную статью! Ответить
Роман : 12 февраля, 2016 в 14:54 Я самоучка и к сожалению лекций не слушал, тут нашел все что надо, просто и доступно. Не составило труда разобраться с теми же подсказами и темой «Модальные всплывающие окна с помощью CSS3 без Javascript» всем советую очень нужная тема.
С подсказками очень все просто оказалось, и доработав стили под свой дизайн магазина виглядит все очень круто.
Еще раз спс за проделанную работу. Ответить
7 подсказок для создания анимированных гифок
Из сегодняшней публикации вы узнаете как создавать классные гифки, которые украсят ваш дизайн и оживят любую страницу. Расскажут об этом представители студии InVision, которые активно используют этот вид анимации на своем сайте, предпочитая гифки перегруженному коду. Сегодня вы узнаете как создать такие же анимированные картинки.
Дизайн гифок
1. Секретный ингредиент
Главный секрет InVision заключается в том, что изначально их гифки это видео. Они создаются в ScreenFlow, так же, как и видеоматериалы для сайта. Эта программа довольно проста в изучении, и при этом располагает отличными инструментами для создания анимации.
После создания желаемого действия, работа экспортируется как видеофайл, а затем импортируется в Photoshop следующим образом: File > Import > Video Frames As Layers.
Подсказка: Если программы типа ScreenFlow или After Effects не вписываются в ваш бюджет, создавайте анимацию в Keynote и экспортируйте работы как видео-файл.
2. Меньше цветов = больше веселья
Если вы хотите получить крутые гифки, вам придется очень серьезно подходить к выбору цветов. Использование небольшого количества цветов позволит вам создавать довольно длинные и сложные гифки, которые при этом будут сравнительно небольшого размера. (Для ориентира считайте что небольшая гифка весит до 1MB)
3. Используйте размытие когда это возможно
Программы типа ScreenFlow и After Effects позволяют вам экспортировать видео с размытием в движении. Ваша гифка будет выглядеть профессиональнее и аккуратнее, особенно если вы экспортируете анимацию в Photoshop слоями.
4. Будьте ленивы (в определенном смысле)
Посмотрите на первую гифку вначале публикации. Представьте себе сколько деталей можно было бы к ней добавить: ярлычки с именами; курсор, нажимающий на плюс; ховер-эффект на фотографиях; подсказки и статусы. Но людям совсем необязательно показывать все, чтобы они уловили смысл картинки. Так что показывайте только то, что нужно показать — ваше время и размер файла ограничены.
Экспорт гифок
Прежде чем озаботиться выполнением следующих рекомендаций, экспортируйте вашу гифку и посмотрите какого она размера. Если размер небольшой — отлично! Продолжайте делать то, что делали. Если же размер оказывается слишком большим, обратите внимание на следующие советы.
5. Удаляйте повторяющиеся кадры
Вероятно в ваших работах будут моменты, когда движение в анимации может приостановиться, задержаться, замереть. В этих случаях вы увидите что в этом моменте создаются одинаковые кадры, которые длятся примерно по 0.03 секунды. Если таких повторяющихся кадров десять штук, удалите девять из них, а оставшемуся укажите необходимую продолжительность (например 1 секунду).
Если это не помогло, попробуйте заново импортировать видео, но на этот раз выберите опцию Limit To Every 2 Frames. Это должно ощутимо сократить размер файла.
Подсказка: Это не жесткое правило, но обычно, если ваша гифка содержит более 150 кадров, вам придется потратить время на то, чтобы уменьшить ее размер.
6. Уменьшайте количество цветов
При сохранении гифки в Photoshop, вы можете видеть выпадающее меню “colors” в правой части окна. Поэкспериментируйте со значением этого параметра. Постарайтесь указать минимально возможное значение, при котором гифка не потеряет «товарного вида».
7. Настройте параметр lossy
Автор статьи признается что даже не знает толком что означает этот параметр. Однако он утверждает что если настроить этот параметр между 1 и 10, вы избавитесь от нескольких килобайт без потери качества.
Если ничего из вышеперечисленного не работает
Если вы попробовали все перечисленное выше, а ваша гифка все еще слишком большого размера, нужно сделать шаг назад. Подумайте. Возможно вы хотите втиснуть в гифку слишком много информации. Есть ли возможность добиться поставленной цели иначе? Возможно стоит разбить информацию на две гифки? Она сработает лучше, если будет направлена на одну вещь.
Автор статьи Andy Orsow
- 10 способов использования пастельных тонов в веб-дизайне
- Творческий подход к каркасному моделированию
- Как создать руководство по стилю для веб-дизайна