Простые подсказки на CSS3
Иногда кнопке или изображению нужно прикреплять дополнительную информацию, для того чтобы пользователь понял, для чего она вообще нужна. Единственным решением является создание простых всплывающих подсказок. В этом уроке мы покажем вам, как создать подсказки на CSS: без изображений и javascript.
“Зачем мне нужны CSS подсказки?”
Конечно же вы можете использовать HTML атрибут title, для того чтобы организовать систему подсказок. Дело в том, что по умолчанию данные элементы нельзя стилизовать. Если вы хотите предоставлять своим пользователям красивые подсказки, то эта статья для вас.
Что и как мы будем делать
Наверняка данная техника вам знакома. Я буду использовать значения позиционирования relative и absolute, для того чтобы расположить подсказки. В этой статье я не пытаюсь изобрести колесо, просто пытаюсь создать красивые подсказки на CSS3.
Ниже вы можете увидеть структуру (прошу заметить, что я использую псевдо элементы :before и :after):
Теперь я бы хотел перечислить технологии, которые использовал:
- Градиент
- Тень
- Псевдо элементы
HTML
<a href="#" class="tooltip"> ваш текст <span>ваша подсказка</span> </a>
Почему ссылка?
Данное решение принято только по той причине, что нам надо добиться совместимости с IE6. Данный браузер зачастую не понимает псевдо класс :hover.
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript"> $(function() { if ($.browser.msie && $.browser.version.substr(0,1)<7) { $('.tooltip').mouseover(function(){ $(this).children('span').show(); }).mouseout(function(){ $(this).children('span').hide(); }) } }); </script>
CSS
.tooltip { position: relative; background: #eaeaea; cursor: help; display: inline-block; text-decoration: none; color: #222; outline: none; } .tooltip span { visibility: hidden; position: absolute; bottom: 30px; left: 50%; z-index: 999; width: 230px; margin-left: -127px; padding: 10px; border: 2px solid #ccc; opacity: .9; background-color: #ddd; background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0)); background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0)); background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0)); background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0)); background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0)); -moz-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset; box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset; text-shadow: 0 1px 0 rgba(255,255,255,.4); } .tooltip:hover { border: 0; /* IE6 fix */ } .tooltip:hover span { visibility: visible; } .tooltip span:before, .tooltip span:after { content: ""; position: absolute; z-index: 1000; bottom: -7px; left: 50%; margin-left: -8px; border-top: 8px solid #ddd; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 0; } .tooltip span:before { border-top-color: #ccc; bottom: -8px; }
Поддержка браузеров
Данный код будет работать в IE6 и IE7, но возможны некоторые искажения в отображении.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/cxNBTCFsm_A/lessons.php


Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2025-03-14 » SPF-запись
- 2025-03-07 » SEO на маркетплейсах: как оптимизировать карточку товара для поисковой выдачи
- 2025-02-18 » Топ-10 бесплатных нейросетей для генерации изображений: лучшие ии генераторы 2024 года
- 2025-02-11 » Критическая уязвимость в 1С-Битрикс
- 2025-02-11 » Google Search Console: руководство для начинающих вебмастеров
- 2025-02-11 » Методы измерения результативности рекламных кампаний: плюсы и минусы
- 2025-02-11 » Тренды SEO в 2025 году
- 2025-02-10 » Свой Google в локалке. Ищем иголку в стоге сена
- 2025-01-29 » SEO — это комплексная работа. Шесть главных факторов ранжирования сайтов
- 2025-01-29 » Гайд для главной страницы e-commerce сайта: как оформить, чтобы повысить конверсию
- 2025-01-20 » Krea AI выпустила бесплатную функцию преобразования изображений в 3D-объекты — их можно вращать и вписывать в фотографии
- 2025-01-19 » Отзывы на Яндекс Картах: как пройти модерацию
- 2025-01-15 » Топ-6 лучших российских нейросетей, в которых можно генерировать тексты и изображения бесплатно и без VPN
- 2025-01-14 » 15 бесплатных способов узнать, чем интересуется ваша аудитория
- 2025-01-11 » Бездепозитные бонусы в казино за регистрацию с выводом: особенности и возможности получения
- 2025-01-09 » Новая модель LAM способна выполнять задачи в Word
- 2024-12-26 » Универсальный промпт для нейросети: как выжать максимум из ChatGPT, YandexGPT, Gemini, Claude в 2025
- 2024-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
Власть над собой — высшая власть. Луций Анней Сенека |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.
Или напишите нам в WhatsApp
Или напишите нам в WhatsApp