Все статьи из текущего раздела

Гиперссылка на кнопке. Метод Pixy

Ещё совсем недавно для изменения внешнего вида кнопки при наведении на неё указателя мыши дизайнеры использовали сложные сценарии Java Script. Теперь благодаря псевдоклассу :hover дизайнер может создать эффект изменения внешнего вида кнопки только средствам CSS.

Так как в большинстве случаев на кнопке располагают гиперссылку, мы будем рассматривать изменение внешнего вида кнопки в этом ракурсе. Имеем кнопку с гиперссылкой:


Гиперссылка 1

Начнём с того, что гиперссылки являются строчными элементами. Желательно увеличить область содержимого гиперссылки, чтобы лучше её заметить. Для этого свойству display гиперссылки нужно присвоить значение block.

Полный код файла style.css

<?php
a
:linka:visited {
displayblock/*выводит гиперссылку как блочный элемент*/
width15.0 em/*ширина контейнера*/ 
line-height3.3 em/*интерлиньяж (межстрочный интервал) текста*/ 
background-color#94B8E9; /*цвет фона до и после нажатия*/
colorblack/*цвет текста до и после нажатия*/
border1px solid black/*рамка контейнера*/ 
text-decorationnone /*отменяет все эффекты у гиперссылки*/ 
text-aligncenter/*выравнивает текст по центру*/ 
}
a:hover {
background-color#369; /*цвет фона при нажатии*/
color#FFF; /*цвет текста при наведении*/
}

Гиперссылка теперь выводится как блочный элемент, поэтому щелчок в любом месте блока активизирует её.

Свойству width присвоено значение в кеглях (em). Необходимо помнить, что блочные элементы расширяются, заполняя всю доступную для них ширину. Поэтому, если ширина родительского контейнера больше, чем нужно для гиперссылки, элементу гиперссылки должно быть явно присвоена желаемая ширина. И это вдвойне важно, если стилизованную блочную гиперссылку нужно разместить в главной области содержимого страницы.

Высоту кнопки определяем с помощью свойства line-height. Это надо для центрирования текста кнопки по вертикали. Если установить только свойства height, то для смещения текста вниз надо применять отступ (padding).

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

Например, в Photoshop делаем кнопку (buttom.gif) и кнопку (buttom-over.gif). При желании несложно добавить ещё одно изображение для активного состояния гиперссылки и подключить его с помощью псевдокласса :active


Имеем вот такую кнопку:


Гиперссылка 2

Код этого примера похож на код предыдущего примера. Главное отличие в том, что вместо цветов фона теперь используются фоновые изображения. Полный код файла style.css

<?php
a
:linka:visited {
displayblock/*выводит гиперссылку как блочный элемент*/
width200px/*ширина контейнера*/ 
height40px/*высота блока*/
line-height40px /*интерлиньяж (межстрочный интервал) текста*/ 
colorblack/*цвет текста до и после нажатия*/
text-decorationnone /*отменяет все эффекты у гиперссылки*/ 
background#94B8E9 url(/img/button.gif) no-repeat left top;
/*1. устанавливает фоновый цвет блоку, если не загрузилось изображение;
  2. устанавливает фоновое изображение для блока; 
  3. устанавливает одно фоновое изображение в блоке; 
  4. задаёт начальное положение фоновому изображению; */ 
text-indent50px/*устанавливает величину отступа первой строки блока текста;*/ 
}
a:hover {
background#336699 url(/img/button-over.gif) no-repeat left top;
/*1. устанавливает фоновый цвет блоку, если не загрузилось изображение; 
  2. устанавливает фоновое изображение для блока;
  3. устанавливает одно фоновое изображение в блоке;
  4. задаёт начальное положение фоновому изображению; */ 
colorwhite/*цвет текста при наведении*/
}

Есть недостаток метода, в котором используется несколько изображений. Когда браузер в первый раз загружает изображение, происходит задержка вывода кнопки, на которую наведен курсор. Это создаёт эффект мерцания.


Пётр Станичек (Petr Stanicek), на фото вверху, предложил использовать вместо двух изображений - одно. При этом переключается позиция фона, а не имя файла. Метод назван "Pixy", это его дружеское прозвище.

Единое изображение выглядит так:

Полный код файла style.css

<?php
a
:linka:visited {
displayblock/*выводит гиперссылку как блочный элемент*/
width200px/*ширина контейнера*/ 
height40px/*высота блока*/
line-height40px /*интерлиньяж (межстрочный интервал) текста*/ 
color#000; /*цвет текста до и после нажатия*/
text-decorationnone /*отменяет все эффекты у гиперссылки*/ 
background#94B8E9 url(/img/pixy-rollover.gif) no-repeat left top;
/*1. устанавливает фоновый цвет блоку, если не загрузилось изображение;
  2. устанавливает фоновое изображение для блока; 
  3. устанавливает одно фоновое изображение в блоке; 
  4. задаёт начальное положение фоновому изображению; */ 
text-indent50px/*устанавливает величину отступа первой строки блока текста;*/ 
}
a:hover {
background-color#369;/*устанавливает фоновый цвет блоку */ 
background-positionright top;/*задаёт начальное положение фонового изображения */ 
color#FFF; /*цвет текста при наведении*/
}

При этом стиле кнопка будет иметь вид такой, как в примере с двумя изображениями.

Гиперссылка 3


ПОЛЕЗНЫЕ ССЫЛКИ:



Общество с ограниченной ответственностью «Аврора» - купить самокаты в москве - интернет магазин самокатов самокат шоп в москве. www.hubster.ru Полнее..