Использование селектора CSS :target для создания UI-эффектов без применения JavaScript

Перевод статьи Using The CSS :target Selector To Create JavaScript-less UI Effects с сайта blogs.adobe.com, автор — Сара Суэйдан.

Вместо организации связи с новыми страницами, ссылки (элементы <a>) иногда указывают на разделы, фрагменты или другие элементы на той же странице. Ссылки такого рода преобладают при навигации по одностраничным сайтам.

Селектор псевдокласса CSS :target используется для выбора и оформления целевого объекта внутренней ссылки в документе, фрагмента страницы, указанного в атрибуте href ссылки.

Например, если у вас есть тег <a>, указывающий на раздел «Дополнительная литература» в статье…

<a href="#further-reading" title="Дополнительная литература" />

<!– … –>

<section id="further-resources" >

<!— … —>

</section>

…вы можете использовать селектор :target для подсветки этого раздела после клика по ссылке, чтобы привлечь к нему внимание читателя. Такая техника подсветки известна как «техника желтого затухания» и была впервые использована командой «37 Signals».

#further-resources:target {

animation: highlight .8s ease-out;

}

@keyframes highlight {

0% { background-color: #FFFF66; }

100% { background-color: #FFFFFF; }

}

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

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

Не так давно я использовала эту технику на своем собственном вебсайте при показе окна поиска, которое мои читатели могут использовать для поиска статей. Одной из частей основной навигации является ссылка, указывающая на «обертку» окна поиска — элемент <div>, содержащий поле для ввода поискового запроса.

<a href="#search">Search</a>

<!– … –>

<div id="search">

<a href="#" class="overlay-close">Close</a>

<h4>Search articles archive.</h4>

<!– … –>

</div>

Сначала окно поиска скрыто с помощью opacity: 0;. Его положение настроено таким образом, чтобы оставаться фиксированным по отношению к видимой области документа, используя position: fixed;. Наконец, чтобы гарантировать, что окно не блокирует события указателя, поступающие от остальных элементов страницы, находящихся «под» ним, свойство  pointer-events имеет значение none.

#search-overlay {

position: fixed;

top: 1em;

bottom: 1em;

right: 1em;

left: 1em;

/* … */

opacity: 0;

transition: opacity .3s ease-in-out;

pointer-events: none;

}

При клике по ссылке Search, благодаря использованию селектора :target , окно появляется, и на нем снова начинают срабатывать события указателя. Для плавного появления окна используется свойство «transition», которое создает соответствующий эффект.

#search-overlay:target {

opacity: 1;

pointer-events: auto;

}

Непрозрачность окна поиска постепенно увеличивается. Миссия… выполнена наполовину — нам нужно убедиться, что окно и исчезнет плавно, когда пользователю это понадобится.

Контейнер этого окна должен содержать другую ссылку, которая позволит нам вернуться на главную страницу. Для достижения этой цели мы можем присвоить элементу body или html идентификатор, а затем создать ссылку «Close», указывающую на него — это должно решить нашу задачу. Однако, делать это не обязательно. Создав ссылку, не указывающую на какой-либо конкретный фрагмент страницы, и используя в качестве указателя только # , вы, по сути, создаете ссылку на главную страницу, но получаете возможность не добавлять никаких идентификаторов фрагментов к URL вашей страницы.

Мы хотим, чтобы при клике по ссылке «Close»; наше окно поиска постепенно затухало, поэтому мы добавим еще один переход (transition) для #search-overlay:target , чтобы гарантировать, что его непрозрачность плавно опустится до 0. Безусловно, вы можете пропустить этот шаг, если хотите, чтобы окно исчезало сразу после его закрытия.

#search-overlay:target {

opacity: 1;

pointer-events: auto;

transition: opacity .3s ease-in-out;

}

Взгляните на демо.

Можно пойти еще дальше и добавить анимацию трансформации окна, чтобы оно увеличивалось при появлении — подобно (да, вы угадали) эффекту «лайтбокс». Вместо окна с формой поиска вы можете использовать изображение, которое будет увеличиваться до размеров области просмотра при клике по соответствующей миниатюре. У Мануэлы Илич есть пример чудесной и полноценно работающей галереи изображений, демонстрирующий применение этого метода на практике, с уроком, объясняющим использованный в ней код.

Кристиан Хайльман также написал пост о создании простой галереи изображений с помощью селектора :target, на который я тоже рекомендую взглянуть.

Галереи изображенийвсплывающие окна и навигация снаружи макета, созданные, используя только CSS, являются примерами полноценных UI-компонентов, которые можно создать лишь с помощью CSS, используя преимущества, предоставляемые селектором :target .

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

Продолжение  следует! 

P.S. Это тоже может быть интересно:

Оставить комментарий

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

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