Всплывающая подсказка с помощью CSS

В этом уроке вы узнаете, как сделать всплывающую подсказку при наведении на кнопку с помощью CSS. Текст всплывающей подсказки будет генериться за счёт значения пользовательского атрибута данных — data-tooltip="текст подсказки". Для работы потребуется подключить к странице шрифт FontAwesome и шрифт Open Sans от Google.

Разметка HTML

<a href="" data-tooltip="600Кб">
  <span>
    <em>Скачать</em><i class="fa fa-cloud-download"></i>
  </span>
</a>
tooltip-2
Рис. 1 Элементы всплывающей подсказки

Стили CSS

*, *:before, *:after {
  box-sizing: border-box;
  transition: .4s ease-in-out;
}
a {
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  color: white;
  position: relative;
  background: #3C4896;
  display: block;
  width: 200px;
  height: 50px;
  border-radius: 50px;
  border: 2px solid transparent;
  margin: 80px auto 0;
}
a:hover {
  background: white;
  border: 2px solid #3C4896;
}
/* скроем иконку загрузки до наведения на кнопку и текст "Скачать" после наведения на кнопку */
span {
  overflow: hidden;
}
span, em, i.fa {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  line-height: 46px; /* за вычетом границ кнопки */
}
em {
  top: 0;
  font-style: normal;
}
i.fa {
  top: 100%; /* смещаем вниз */
  font-size: 30px;
  color: #3C4896;
}
a:hover em { 
  top: -100%; /* смещаем вверх */
}
a:hover i.fa {
  top: 0;
}
/* делаем подсказку прозрачной и убираем её со страницы, чтобы она не появлялась при наведении на место, где она должна появиться */
a:before, a:after{
  position: absolute;
  opacity: 0;
  visibility: hidden;
}
/* стили для всплывающего блока с текстом */
a:before{
  content: attr(data-tooltip);
  width: 140px;
  height: 40px;
  line-height: 40px;
  background: #3C4896;
  border-radius: 5px;
  bottom: 90px;
  left: calc(50% - 70px);
}
/* стили для стрелки */
a:after {
  content: "";
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top-color: #3C4896;
  bottom: 70px;
  left: calc(50% - 10px);
}
a:hover:before, a:hover:after {
  opacity: 1;
  visibility: visible;
  transition: .2s ease-in-out .4s; /* сделаем появление подсказки с задержкой */
}
/* добавляем эффект движения */
a:hover:before {
  bottom: 70px;
}
a:hover:after {
  bottom: 50px;
}

See the Pen QKLLkW by Elena (@html5book) on CodePen.

Поделиться:

Просто! Создать! Веб-сайт!

Ведущим подкаста ShopTalk Крису Койер (Chris Coyier) и Дейву Руперт (Dave Rupert) часто задают вопрос, как научиться веб-разработке. Их мантра – «просто создавайте веб-сайты».

Что делать, если вы не знаете, какой именно сайт «просто создать»? Ниже приведён список различных идей для проектов, который даст вам нужную практику веб-дизайна и веб-разработки.

Идеи для веб-дизайна и веб-проектов

  1. Помогите новому бизнесу / хобби / резюме / свадьбе ваших друзей.
  2. Создайте фан-сайт или форум «старой школы» того, что вы любите.
  3. Создайте галерею фотографий с вашего отпуска.
  4. Попробуйте воссоздать страницу любимого сайта, не заглядывая в её код.
  5. Создайте сайт некоммерческой организации вашего региона.
  6. Найдите локальную проблему, которая важна для вас, и сделайте брошюру, в которой вы высказываете свою позицию.
  7. Сделайте эту брошюру с использованием системы управления контентом (CMS) или языком программирования, который вы хотите изучить.
  8. Создайте игру с использованием веб-технологий.
  9. Попробуйте воссоздать эффект из реального мира на чистом CSS.
  10. Выберите потребность вашей повседневной жизни и сделайте веб-приложение, которое будет её удовлетворять.
  11. Создайте веб-сайт вымышленного персонажа.
  12. Исследуйте все веб-возможности на сервисе Can I Use и создайте сайт с теми возможностями, о которых вы никогда не слышали или не использовали ранее.
  13. Создайте сайт-витрину вашей коллекции или коллекции ваших друзей.
  14. Исследуйте ваше генеалогическое древо.
  15. Возьмите старый сайт и адаптируйте его для людей с ограниченными возможностями.
  16. Создайте несколько бесплатных тем для популярного сервиса блогов.
  17. Опубликуйте ваши стихи.
  18. Изобретите велосипед: разработайте калькулятор, приложение для личных финансов, приложение для отслеживания времени в пути и так далее…
  19. Произведите рефакторинг кода для существующего сайта.
  20. Стилизуйте сайт с использованием трёх различных подходов к архитектуре CSS и определите, какая вам больше подходит.
  21. Создайте сайт с использованием нескольких фреймворков и определите, какой вам больше подходит.
  22. Сделайте фан-сайт вашего родного города.
  23. Придумайте 25 способов изменить / оформить изображения.
  24. Создайте веб-чат для ваших друзей.
  25. Создайте коллекцию повторно используемых компонентов, функций и т.п.
  26. Сделайте удобное приложение с доступом по регистрации для ваших друзей, где они могли бы найти инструкции для ухода за домом / отдыха / ухода за растениями.
  27. Создайте путеводитель по вашему городу с различными фильтрами (уровень расходов, цель поездки, где что купить и т.д.).
  28. Сделайте дизайн сайта, которых будет использоваться на устройствах с разрешением 100px.
  29. Создайте список сайтов с причудливым дизайном.
  30. Создайте сайт-справочник о какой-то новинке, которую вы хорошо знаете.
  31. Соберите любимые цитаты и изречения в одном месте.
  32. Создайте каталог вещей в шкафу / растений в саду / специй на кухне. Сайт должен запоминать набор фильтров пользователя.
  33. Сделайте интерактивный сайт для вашего ребёнка, который научит его определять цвета, цифры, буквы и фигуры.
  34. Выберите книгу, которая находится в свободном доступе, и сделайте сайт, где пользователь мог бы её прочитать, сделать заметки и т.д.
  35. Создайте красивый дизайн сайта на основе двух цветов – белого и чёрного.

(Перевод статьи Just! Build! Websites! (в ред. автора)

Поделиться: