Всплывающие подсказки при помощи 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 все предоставленные подсказки. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 2 | |
|
| |
