Легкий эффект нажатой кнопки для ссылок.

Автор статьи: Chris Coyier.    Оригинал: http://css-tricks.com/one-pixel-shift-buttons/

Вы, наверное, уже заметили, что в рамках дизайна данной страницы (*aвтор имеет ввиду дизайн своего ресурса ) все, имеющиеся ссылки при щелчке как бы «вдавливаются» внутрь, смещаясь на один пиксель. Впервые я увидел этот эффект на сайтах, принадлежащих таким светилам как Tim Van Damme и Andy Clarke, поэтому он действительно достоин внимания.

Как вы вероятно уже догадались, реализовать этот эффект не так уж и трудно. Давайте разбираться.

В нашем, конкретном случае для того, чтобы ссылки «вдавливались» при их нажатии, мы не можем воспользоваться CSS свойством margin-top, так как элементы-ссылки (<a>) принадлежат к строчному (inline) типу. Манипуляция свойством padding тоже не подходит, так как это может увеличить размеры контейнера и стать причиной смещения соседних элементов, что также неприемлемо. Идеальным решением в этом случае будет position: relative. Это позволит сдвигать элементы в нужную нам сторону относительно их нормальной позиции (position: static), обусловленной общим потоком документа.

a: active {
position: relative;
top: 1px;
}

Изображение.

На изображении в увеличенном масштабе показано смещение ссылки на 1px вниз при щелчке(active). Слегка, но ссылка все же «вдавливается».

Другие мнения.

На своем сайте я использую приведенное выше CSS правило для всех ссылок. Некоторые разработчики считают такое их оформление излишним. Лично мне нравится этот эффект и я предпочитаю придерживаться постоянства в дизайне. А в том случае, если вы придерживаетесь иной точки зрения, но подобное поведение ссылок при их активации вам все таки нравиться, то вы можете использовать такое оформление ссылок лишь в отдельных местах страницы, применив при этом более точный CSS селектор для правила.

Но самым важным моментом в данном вопросе является корректное определение значений позиционирования для активного состояния ссылки, и этому нужно уделять особое значение. Причина в том, что если на вашем сайте имеются свободно позиционированные ссылки (* для них установлено свойство position: absolute), то в случае применения вышеописанного способа и переопределения свойства position в значение relative при переходе ссылки в активное состояние (:active) она может «слететь» (*сместиться в любую другую часть страницы) и стать недоступной для пользователя. Если такое случиться, то выход из ситуации все же есть. Для решения проблемы вам необходимо будет пошагово определить значения позиционирования для активного состояния ссылок с учетом их начальных абсолютных значений. То есть, для псевдоселектора :active взять значение свойства top на один пиксель больше или меньше, в зависимости от того, куда вы хотите сместить ссылку.

* Примечание переводчика.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *