• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Устанавливаем всплывающие подсказки на CSS3 (Всплывающие подсказки для сайта и обозначение разный фактор)
Устанавливаем всплывающие подсказки на CSS3
Kosten
Дата: Воскресенье, 2019-03-24, 19:05 | Сообщение 1
Администраторы
Сообщений:24298
Награды: 56


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

Как пример берем какое то значение, которое упомянули в описание, и вот под него пишем описание в подсказке. Где только пользователю нужно навести курсор и он увидит окно с описанием. А как он узнает. здесь все просто, где установлена подсказка, то это слово иди значение будет выведено под другой гаммы цвета.



HTML

Код
<a href="#" title="Здесь идет описание" class="manceoing-projecanons"><span title="">Графическая архитектура</span></a>

CSS

Код
.manceoing-projecanons{  
  display: inline;  
  position: relative;  
  }  
   
  .manceoing-projecanons:hover:after{  
  background: #333;  
  background: rgba(0,0,0,.8);  
  border-radius: 5px;  
  bottom: 26px;  
  color: #fff;  
  content: attr(title);  
  left: 20%;  
  padding: 5px 15px;  
  position: absolute;  
  z-index: 98;  
  width: 520px;  
  }  
   
  .manceoing-projecanons:hover:before{  
  border: solid;  
  border-color: #333 transparent;  
  border-width: 6px 6px 0 6px;  
  bottom: 20px;  
  content: "";  
  left: 50%;  
  position: absolute;  
  z-index: 99;  
  }


Демонстрация
Прикрепления: 1284569.png(21.7 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Устанавливаем всплывающие подсказки на CSS3 (Всплывающие подсказки для сайта и обозначение разный фактор)
  • Страница 1 из 1
  • 1
Поиск: