Интерактивные элементы с помощью псевдокласса :target

Опубликовано: 4 октября 2016 Обновлено: 18 января 2021 11 комментариев

Псевдокласс :target выбирает в документе тот элемент, на который указывает фрагмент #url. В статье Псевдокласс :target я уже писала о применении данного псевдокласса. В частности, он использовался для создания быстрой навигации по странице или css-слайдера. Но возможности :target не ограничиваются этими примерами. С помощью псевдокласса :target можно создавать на странице интерактивные элементы без участия JavaScript, заменяя обработчик события click.

Примеры использования :target

1. Спойлер

Простой пример использования псевдокласса :target — скрытие и показ содержимого при клике пользователя. Элемент скрывается с помощью :not(:target) {display: none;} (то есть пока не подпадает под :target) и показывается при помощи :target {display:block;}. Нажмите на крестик ниже, чтобы раскрыть спойлер.

font-style+

Стиль начертания шрифтаnormal|italic|oblique|initial|inherit

Скрыть описание 

<div class="spec">
  <span>font-style<a href="#prop-about">+</a></span>
  <div id="prop-about">
    <p><b>Стиль начертания шрифта</b><span>normal|italic|oblique|initial|<wbr>inherit</span></p>
    <a href="#close">Скрыть описание</a>
  </div>
</div>
#prop-about:not(:target) {
  display: none;
}
#prop-about:target {
  display: block;
}

2. Модальное окно

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

modal-target

<div class="wrap">
  <div class="intro">
    <a href="#target" class="toggle"></a>
    <div class="content">
      <h1>Весна уже скоро!<span>Однако, придётся подождать</span></h1>
      <div id="timer"></div>
      </div>
  </div>
  <div id="target">
    <a href="#close" class="close"></a>
    <form action="" method="get">
      <h1>Подписаться,<span> чтобы не пропустить начало весны</span></h1>
      <input type="text" placeholder="Ваш E-mail" required><button type="submit"></button>
    </form>
  </div>
</div>
@import 'https://fonts.googleapis.com/css?family=Open+Sans:400,700|Playfair+Display:400,700';
*{box-sizing:border-box;transition:.3s linear}
body {
  margin: 0;
  height: 100vh;
  font-size: 16px;
  font-family: 'Open Sans', sans-serif;
  border: 20px solid rgba(255, 255, 255, 0);
  background: url(http://media.html5book.ru/photo-6.jpg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}
.wrap {
  position: relative;
  height: 100%;
  -webkit-perspective: 1000;
  perspective: 1000;
  transition: all 0.5s cubic-bezier(.215, .61, .355, 1);
  background: rgba(255, 255, 255, .5);
}
.content, form {
  width: 100%;
  transform: translate(-50%, -50%);
  position: absolute; 
  top: 50%; 
  left: 50%;
  text-align: center;
 }
.toggle, .close {
  text-decoration: none;
  display: block;
  float: right;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #3F3461;
  position: relative;
  text-align: center;
  margin: 20px;
}
.close {
  background: #4D452A;
}
.toggle:before, .close:before {
  content: "\f003";
  font-family: FontAwesome;
  color: white;
  line-height: 50px;
  font-size: 24px;
}
h1 { 
  color: #3F3461;  
  font-size: 4em;
  font-family: 'Playfair Display', serif;
  margin-top: 0;
}
h1 span {
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  text-transform: uppercase;
  display: block;
  color: #596F8B;
  letter-spacing: 3px;
}
#target {
  opacity: 0;
  transform: scale(0.5);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  background: #D4C657;
  position: absolute;
}
#target h1, #target span {
  color: white;
}
.close:before {
  content: "\f00d";
}
#target:target {
  opacity: 1;
  transform: scale(1);
}
#timer span {
  color: #3F3461;  
  font-size: 4em;
  font-weight: bold;
}
form {
  padding: 20px;
}
form input {
  height: auto;
  display: block;
  outline:none;
  width: 100%;
  line-height: 50px;
  font-size: 30px;
  padding-left: 15px;
  border: none;
  background-color: rgba(255, 255, 255, .5);
}
button {
  position: absolute;
  bottom: 21px;
  right: 15px;
  width: 80px;
  font-size: 40px;
  background: transparent;
  cursor: pointer;
  border: none;
}
button:before {
  content: "\f003";
  font-family: FontAwesome;
  color: white;
  font-size: 30px;
  line-height: 50px;
}
@media (max-width: 768px) {
  h1 {font-size: 3em;}
  h1 span {font-size: 14px;}
  #timer span {font-size: 3em;}
  form input {font-size: 20px;}
}

Для таймера обратного отсчёта я использовала плагин jQuery Countdown, который вы можете скачать со страницы разработчика.

Код jQuery

$('#timer').countdown('2017/03/01').on('update.countdown', function(event) {
  var $this = $(this).html(event.strftime(''
    + '<span>%-w</span> недель'
    + '<span>%-d</span> дней'
    ));
});

3. Главная страница сайта-визитки

Ещё одно элегантное решение, которое можно использовать для сайта-визитки, сайта-портфолио (страницу «Обо мне» переименовать в «Портфолио» и добавить слайдер). Внутренний блок при клике на текст/иконку в верхнем левом углу вращается вдоль горизонтальной оси, показывая/скрывая обратную сторону блока.

calling-card

<div class="container">
  <div class="flipper" id="target">
    <div class="front">
      <a href="#target" class="home button">обо мне</a>
      <div class="share-block">
        <a href=""><i class="fa fa-facebook"></i></a>
        <a href=""><i class="fa fa-instagram"></i></a>
        <a href=""><i class="fa fa-twitter"></i></a>
        <a href=""><i class="fa fa-youtube"></i></a>
        <a href=""><i class="fa fa-linkedin"></i></a>
      </div>
    <h1>ДИЗАЙН & КОД</h1>
      </div>
    <div class="back">
      <a href="#close" class="close button"><i class="fa fa-home"></i></a>
      <div class="inner">
        <h2>обо мне</h2>
        <p>Nemo enim ipsam voluptatem...</p>
        </div>
      </div>
    </div>
</div>
@import 'https://fonts.googleapis.com/css?family=Open+Sans:400,700|Playfair+Display:400,700';
*{box-sizing:border-box}
body {
  margin: 0;
  background: url(http://media.html5book.ru/photo-unsp1.jpg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  height: 100vh;
  padding: 20px;
  font-size: 16px;
  font-family: 'Open Sans', sans-serif;
}
h1 { 
  color: white;
  font-size: 4em;
  font-family: 'Playfair Display', serif;
  margin: 0;
  transform: translate(-50%, -50%);
  position: absolute; 
  top: 50%; 
  left: 50%;
  white-space: nowrap;
  letter-spacing: 5px;
}
h2 {
  font-size: 3em;
  font-family: 'Playfair Display', serif;
  line-height: 1;
}
.share-block {
  float: right;
  padding-right: 15px;
  line-height: 50px;
}
.share-block a {
  color: #999;
  display: inline-block;
  margin-right: 7px;
  transition: .4s linear;
}
.share-block a:hover {
  color: white;
}
.container {
  border: 10px solid rgba(255,255,255,0.2);
  width: 100%;
  height: 100%;
	-webkit-perspective: 1200;
  perspective: 1200;
  -moz-transform: perspective(1200px);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d; 
  transform-style: preserve-3d;
  position: relative;
}
.button {
  text-decoration: none;
  width: 120px;
  height: 50px;
  position: relative;
  display: inline-block;
  top: 0;
  left: 0;
  z-index: 3;
  line-height: 50px;
  padding-left: 30px;
  transition: .4s linear;
}
.button:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-top: 20px solid #CE1D5A;
  border-right: 20px solid transparent;
}
.button:after {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  width: 0;
  height: 0;
  border-top: 20px solid white;
  border-right: 20px solid transparent;
}
.home:hover, .close:hover {
  color: white;
}
.home, .close {
  color: #999;
  font-size: 20px;
}
.flipper {
  position: relative;
  width: 100%;
	height: 100%;
  transform-style: preserve-3d;
  transition: .7s linear;  
}
.front, .back {
  font-family: 'Cabin', sans-serif;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.5);
  backface-visibility: hidden;
}
.front {
  z-index: 2;
  transform: rotateX(0deg);
}
.back {
  transform: rotateX(-180deg);
  color: white;
}
.flipper:target {
  transform: rotateX(180deg);
}
.inner {
  padding: 20px;
  line-height: 2;
  letter-spacing: 1px;
}
@media (max-width: 768px) {
  h1 {font-size: 3em; white-space:normal;}
  h2 {font-size: 2em}
  p {font-size: 14px;}
}

Поделиться: