Blog. Just Blog

Разделенные ссылки

Версия для печати Добавить в Избранное Отправить на E-Mail | Категория: Web-мастеру и не только | Автор: ManHunter
Разделенные ссылки - очень интересный визуальный эффект для оформления вашего сайта. Суть разделенных ссылок заключается в том, что одна ссылка имеет одновременно несколько активных областей, которые могут находиться вообще в разных местах страницы. Например:

Разделенные ссылки
Разделенные ссылки

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

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

Для примера у меня получилась вот такая таблица стилей. Естественно, вы можете поменять все под свои задачи, главное сохранить описания позиционирования.
  1. #overall {
  2.     width200px;
  3.     positionrelative;
  4.     padding5px 5px 5px 420px;
  5. }
  6.  
  7. #overall a {
  8.     text-decorationnone;
  9.     color#909090;
  10.     width100%;
  11.     displayblock;
  12.     padding5px;
  13.     font-size16px;
  14. }
  15.  
  16. #overall div {
  17.     color#101010;
  18.     padding-bottom5px;
  19.     font-size10px;
  20. }
  21.  
  22. #overall a img {
  23.     positionabsolute;
  24. }
  25.  
  26. #overall a:hover {
  27.     background#00FFFF;
  28. }
  29.  
  30. #overall a:hover img {
  31.     box-shadow0 0 10px rgba(0,255,0);
  32. }
Верстка HTML достаточно простая, все абсолютно валидное, кроссбраузерное и семантически выдержанное. Для позиционирования картинок я использую inline-стили. Хоть это и считается дурным тоном, но выносить их в общие правила CSS не вижу необходимости, так как обычно такие блоки генерируются динамически из шаблонов.
  1. <div id="overall">
  2.     <div>
  3.         <a href="#">
  4.             Мышеловка
  5.             <img src="grob_03.jpg" style="top:5px; left: 210px;">
  6.         </a>
  7.         1987 годГрОб Records
  8.     </div>
  9.     <div>
  10.         <a href="#">
  11.             Солнцеворот
  12.             <img src="grob_02.jpg" style="top:210px; left: 5px;">
  13.         </a>
  14.         1997 годГрОб Records
  15.     </div>
  16.     <div>
  17.         <a href="#">
  18.             Все идет по плану
  19.             <img src="grob_01.jpg" style="top:5px; left: 5px;">
  20.         </a>
  21.         1988 годГрОб Records
  22.     </div>
  23.     <div>
  24.         <a href="#">
  25.             Оптимизм
  26.             <img src="grob_04.jpg" style="top:210px; left: 210px;">
  27.         </a>
  28.         1985 годГрОб-Рекордз
  29.     </div>
  30. </div>
Готовый пример страницы, сверстанной с использования разделенных ссылок, вы можете посмотреть здесь.

Поделиться ссылкой ВКонтакте Поделиться ссылкой на Facebook Поделиться ссылкой на LiveJournal Поделиться ссылкой в Мой Круг Добавить в Мой мир Добавить на ЛиРу (Liveinternet) Добавить в закладки Memori Добавить в закладки Google
Просмотров: 268 | Комментариев: 1

Комментарии

Отзывы посетителей сайта о статье
Илья (16.07.2019 в 13:14):
Классно, люблю такие фишечки с css! ;)

Добавить комментарий

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2019
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.07 сек. / MySQL: 2 (0.003 сек.) / Память: 5 Mb
Наверх