» »

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

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

Вашему вниманию отличное решение для подсказки, которая еще будет всплывающее при наведении на ссылку. И все это на темно прозрачном фоне происходит, что корректно смотрится. В Сети интернете есть много обучающих онлайн обсуждений идеи всплывающих подсказок на основе CSS. Однако для многих примеров требуются элементы HTML вместе с привязкой. Посетители могут получить базовое всплывающее сообщение, используя атрибут title по умолчанию. Здесь хотелось бы следовать немного другому методу и обновить процесс появление этого эффекта.

В этом материале узнаем, как создавать всплывающие подсказки CSS3, которые основаны на атрибуте HTML5. Используя классы, мы можем включать в себя уникальные цветовые схемы наряду с эффектами перехода CSS3. Этот метод не требует дополнительного HTML-кода, если вы не прикрепляете всплывающие подсказки к другому элементу.

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

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

Сама страница довольно скучна, поэтому я хочу сосредоточиться в первую очередь на коде CSS. Каждой привязной ссылке предоставляется всплывающая подсказка, основанная на классе sartunges. Используя синтаксис данных HTML5, я вытягиваю текст из атрибута с именем data-tool.

HTML

Код
<p>Здесь создаем подсказку, как пример: <a href="#" data-tool="ZorNet.Ru: Создание сайта uCoz" class="sartunges nulpasramig">Навести клик на переход</a> здесь идет продолжение описание</p>

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

Создание всплывающей подсказки

Лучшее место для начала, это просмотр общего кода, прежде чем что-либо должно появиться на странице. Якорные ссылки могут использовать: после и: перед псевдоэлементами, которые будут применяться с использованием CSS. Это позволяет разработчикам настраивать содержимое контента до и после любого применимого элемента.

CSS

Код
a.sartunges{
  position: relative;
  display: inline;
}
a.sartunges:after {
  display: block;
  visibility: hidden;
  position: absolute;
  bottom: 0;
  left: 31%;
  opacity: 0;
  content: attr(data-tool);
  height: auto;
  min-width: 99px;
  padding: 7px 9px;
  z-index: 999;
  color: #f9f2f2;
  text-decoration: none;
  text-align: center;
  background: rgba(0,0,0,0.85);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
   
a.sartunges:before {
  position: absolute;
  visibility: hidden;
  width: 0;
  height: 0;
  left: 39%;
  bottom: 0px;
  opacity: 0;
  content: "";
  border-style: solid;
  border-width: 7px 7px 0 7px;
  border-color: rgba(0,0,0,0.85) transparent transparent transparent;
}
a.sartunges:hover:after{ visibility: visible; opacity: 1; bottom: 19px; }
a.sartunges:hover:before{ visibility: visible; opacity: 1; bottom: 15px; }

a.sartunges.nulpasramig:after, a.sartunges.nulpasramig:before {
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

Сама анкерная связь позиционируется относительно так, что псевдоэлементы могут применяться с использованием абсолютного позиционирования. Это облегчает привязку пузыря и треугольника вместе к подсказке. Видимость: скрытые будут держать отзыв вне видимости пользователя, пока они специально не наведут ссылку. В противном случае всплывающая подсказка будет зависящей, но сидит с непрозрачностью 0%.

Подсказки при наведение на сайте

Демонстрация

Дополнительные стили CSS

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

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

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

Здесь вы можете посмотреть в режими DEMO все предоставленные подсказки.

Демонстрация
30.05.2018 Загрузок: 1 Просмотров: 220 Комментарий: (0)

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

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

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