ZorNet.Ru — сайт для вебмастера » HTML и CSS » Всплывающие подсказки при чистом CSS

Всплывающие подсказки при чистом CSS

Здесь представлено 5 вариантов подсказок с тематическими заначками, которые появляются при наведение курсора, что выполнены на чистом CSS3. Теперь мы можем начать стилизацию всплывающих подсказок с помощью CSS3, как можно заметить в приведенном коде изначально задействовали атрибуты данных, чтобы определить, что будет содержать подсказка с помощью CSS отображать текст в атрибуте с оригинальной настройкой.

Прежде чем мы начнем создавать всплывающие подсказки, то здесь можно посмотреть изначально как они выглядят по дизайн и безусловно при наведении клика. Для этого будет demo страница, что по всем сторонам есть примеры, где остается только навести, хотя все по сути однообразно со сменой той или иной стороны.

Что как рассмотрели, то здесь можно задействовать его для удивительных по своей структуре подсказки, которая исполнена на чистом CSS. Есть несколько вариантов для создания такого типа стилистики CSS, где аналогичным способом задействовано title в самой ссылке или приложенном изображение и так далее.

Вся подборка по умолчанию так выглядит:

Простой вариант, без значка:

Всплывающие подсказки при наведении

Круглая форма со светлым оттенком:

Создание всплывающих подсказок с использованием только CSS

Светло синий оттенок круглой формы:

Узнайте, как создать всплывающую подсказку на чистом HTML

Значок на тематику новостного характера:

Предупредительный треугольник:

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

Приступаем к установке:

Вашему вниманию 5 вариантов разных подсказок, где каждой закреплен значок по его тематике, ведь если вы ставите на предупреждение, то и фигура должна быть соответствующее. А в нашем случай идет четыре, ведь первая выстроенная под штандартное значение по оформлению.

Код

<a class="mudestuga_kopsavetas" href="#">Стандартный вид подсказкиПосле обновления Google в июле 2018 года скорость загрузки сайта</a> I

 <a class="mudestuga_kopsavetas" href="#">Это крайнее предупреждение<img src="http://zornet.ru/ABVUN/Abas/degakolas/dsanu/Critical.png" alt="Ошибка" height="48" width="48">Разноплановые ошибкиКоличество пользователей мобильного интернета превысило количество пользователей.</a> I

 <a class="mudestuga_kopsavetas" href="#">Вызов<img src="http://zornet.ru/ABVUN/Abas/degakolas/dsanu/Help.png" alt="Помощь" height="48" width="48">ВызовGoogle предоставляет несколько бесплатных, но очень мощных инструментов.</a> I

 <a class="mudestuga_kopsavetas" href="#">Новостной блог<img src="http://zornet.ru/ABVUN/Abas/degakolas/dsanu/Info.png" alt="Информация" height="48" width="48">Новостной блогВ случае неудачи вам будет показан список технических проблем, которые могут быть улучшены</a>
 I
<a class="mudestuga_kopsavetas" href="#">Замечание<img src="http://zornet.ru/ABVUN/Abas/degakolas/dsanu/Warning.png" alt="Предупреждение" height="48" width="48">ЗамечаниеВообщем как поняли, что пишем заголовок и краткое описание.</a>.

CSS

Остается выбрать тот оформление, которое вам нужно, и здесь все находится под одним классом, что изначально в самом где прописан, а здесь уже под оформление поставлен.

Код

.mudestuga_kopsavetas {
  border-bottom: 1px dotted #1b1a1a; color: #1b1a1a; outline: none;
  cursor: kjdsanum; text-decoration: none;
  position: relative;
  }
  .mudestuga_kopsavetas span {
  margin-left: -999em;
  position: absolute;
  }
  .mudestuga_kopsavetas:hover span {
  border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
  box-shadow: 5px 5px 5px rgba(25, 24, 24, 0.1); -webkit-box-shadow: 5px 5px rgba(25, 24, 24, 0.1); -moz-box-shadow: 5px 5px rgba(25, 24, 24, 0.1);
  font-family: Calibri, Tahoma, Geneva, sans-serif;
  position: absolute; left: 1em; top: 2em; z-index: 99;
  margin-left: 0; width: 250px;
  }
  .mudestuga_kopsavetas:hover img {
  border: 0; margin: -10px 0 0 -55px;
  float: left; position: absolute;
  }
  .mudestuga_kopsavetas:hover em {
  font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
  display: block; padding: 0.2em 0 0.6em 0;
  }
  .kutedsaxzan { padding: 0.8em 1em; }
  .custom { padding: 0.5em 0.8em 0.8em 2em; }
  * html a:hover { background: transparent; }
  .kutedsaxzan {background: #fbfbb4; border: 1px solid #f3a127; }
  .lastunigunlav { background: #fbfbb4; border: 1px solid #ea2c2d; }
  .kjdsanum { background: #8ad2ea; border: 1px solid #21aad2; }
  .maseduben { background: #8ad2ea; border: 1px solid #21aad2; }
  .sugoplas { background: #e8e889; border: 1px solid #d29639; }

Когда в сети интернет можно разного и много найти инновационных решений где изначально задействован JavaScript, то здесь все на чистой стилистике предоставлено, что веб разработчику останется еще самому оригинально оформить.

Также можно выставить свойства border-radius и box-shadow, где стразу предает прямоугольник на обычное всплывающего сообщения или закруглить углы, что не исключаю, кто-то поменяет знаки под свой характер тематики.

Демонстрация
Источник: ruseller.com

04 Марта 2019 Загрузок: 1 Просмотров: 944 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0