4 сверхклассные CSS-техники для ссылок

Как-то я думал над тем, чтобы написать серию статей о разных техниках оформления ссылок. Когда я начал писать, то осознал, что они довольно простые (но и эффективные:)), и что было бы лучше объединить их.

Ссылки (тег <A>) — одни из самых важных элементов на веб-страницах. Без них не было бы никакой навигации, не правда ли? :) Основная особенность, которая позволяет воплотить последующие техники в жизнь —это поддержка кросс-браузерного псевдо-класса :hover. Каждая из этих техник — чистый css, никаких уродливых хаков, никакого JavaScript.

Всплывающая подсказка на чистом CSS

Чтобы заставить эту штуку работать, ты должен иметь кусок кода с такой разметкой:

<a href="#">Title <span>Tooltip</span></a>

Для ссылки задается position:relative, а для элемента span прописывется position:absolute, а также дополнительно отдельный стиль. Сначала мы прячем элемент span, и показываем его только тогда, когда пользователь наводит курсор на ссылку (используя селектор "a:hover span").

Вот css-код:

a{
      z-index:10;
      }
a:hover{
      position:relative;
      z-index:100;
      }
a span{
      display:none;
      }
a:hover span{
      display:block;
      position:absolute;
      float:left;
      white-space:nowrap;
      top:-2.2em;
      left:.5em;
      background:#fffcd1;
      border:1px solid #444;
      color:#444;
      padding:1px 5px;
      z-index:10;
      }

Увидеть эту технику в действии

Галерея изображений на чистом CSS

С помощью этого фокуса мы будем показывать полноразмерные изображения, когда курсор будет наводиться на миниатюру. Для этого используем маркированный список. В каждом пункте списка мы поместим ссылку с двумя изображениями: миниатюрой и полноразмерной картинкой. Полноразмерное изображение помещаем внутрь элемента span, который мы изначально скрываем. Когда курсор наводится на миниатюру, мы применяем display:block к скрытому span, таким образом отображая большое изображение.

Каждый пункт должен выглядеть примерно так:

<li>
   <a href="#">
      <img src="images/02_1s.jpg" alt="gallery thumbnail" />
      <span><img src="images/02_1.jpg" alt="gallery image" /></span>
   </a>
</li>

и css:

ul#gallery, ul#gallery li{
      margin:0;
      padding:0;
      list-style:none;
      }
ul#gallery{
      width:400px;
      height:375px;
      position:relative;
      background:#e1e1e1 url(images/bg_preview.gif) no-repeat 50% 40%;
      }
ul#gallery li{
      float:left;
      display:inline;
      margin-top:300px;
      }
ul#gallery a span{
      display:none;
      }
ul#gallery a:hover{
      background:none;
      z-index:100;
      }
ul#gallery a:hover span{
      position:absolute;
      width:400px;
      height:300px;
      float:left;
      top:0;
      left:0;
      display:block;
      }

Увидеть эту технику в действии

Изменение размеров изображений при помощи чистого CSS

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

html:

<li>
   <a href="#">
      <em><img src="images/02_1s.jpg" alt="gallery thumbnail" /></em>
      <span><img src="images/02_1m.jpg" alt="gallery image" /></span>
   </a>
</li>

css:

ul#gallery, ul#gallery li{
      margin:0;
      padding:0;
      list-style:none;
      }
ul#gallery{
      margin:2em 0;
      }
ul#gallery li{
      float:left;
      display:inline;
      margin-right:5px;
      }
ul#gallery a{
      float:left;
      display:inline;
      position:relative;
      }
ul#gallery a:hover{
      background:none;
      z-index:100;
      }
ul#gallery a span{
      display:none;
      }
ul#gallery a:hover span{
      float:left;
      display:block;
      cursor:pointer;
      }
ul#gallery a:hover em{
      display:none;
      }
ul#gallery a img{
      border:1px solid #999;
      padding:2px;
      background:#fff;
      }
ul#gallery a:hover img{
      border:1px solid #000;
      }

Увидеть эту технику в действии

Эффект 3D-кнопки

Это простой эффект нажатия на кнопку. Нам нужна ссылка со вложенным элементом span. Верхняя и левая границы "подсвечиваются", в то время как правая и левая "затеняются". Чтобы добавить побольше теней, добавляем правую и левую границу также и к span. При наведении мыши мы инвертируем цвета границ для этих элементов.

html-код выглядит так:

<a href="#" class="button"><span>Наведи сюда</span></a>

а css так:

a.button{
      float:left;
      font-size:110%;
      font-weight:bold;
      border-top:1px solid #999;
      border-left:1px solid #999;
      border-right:1px solid #333;
      border-bottom:1px solid #333;
      color:#333;
      width:auto;
      }
a.button:hover{
      border-top:1px solid #333;
      border-left:1px solid #333;
      border-right:1px solid #999;
      border-bottom:1px solid #999;
      color:#333;
      }
a.button span{
      background:#d4d0c8 url(images/bg_btn.gif) repeat-x;
      float:left;
      line-height:24px;
      height:24px;
      padding:0 10px;
      border-right:1px solid #777;
      border-bottom:1px solid #777;
      }
a.button:hover span{
      border:none;
      border-top:1px solid #777;
      border-left:1px solid #777;
      background:#d4d0c8 url(images/bg_btnOver.gif) repeat-x;
      cursor:pointer;
      }

Увидеть эту технику в действии

Добавить в

→ Заметки