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

Псевдокласс :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;}
}

Поделиться:

Создание HTML форм

HTML формы — сложные элементы интерфейса. Они включают в себя разные функциональные элементы: поля ввода <input> и <textarea>, списки <select>, подсказки и т.д. Весь код формы заключается в элемент <form>.

Большая часть информации веб-форм передаётся с помощью элемента <input>. Для ввода одной строки текста применяется элемент <input type="text">, для нескольких строк — элемент <textarea>. Элемент <select> создает выпадающий список.

Элемент <label> создаёт надписи к полям формы. Существует два способа группировки надписи и поля. Если поле находится внутри элемента <label>, то атрибут for указывать не нужно.

<label for="lastname">Last Name</label><input type="text" id="lastname">

<input type="text" id="lastname"><label for="lastname">Last Name</label>

<label>Last Name<input type="text" name="lastname"></label>

Поля формы можно разделять на логические блоки с помощью элемента <fieldset>. Каждому разделу можно присвоить название с помощью элемента <legend>.

<fieldset>
 <legend>Контактная информация</legend>
 <label>Имя<input type="text" required></label>
 <label>E-mail<input type="email" required></label>
</fieldset>
fieldset
Рис. 1. Группировка полей формы

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

Обязательные для заполнения поля также необходимо выделять. До появления HTML5 использовался символ звездочки *, установленный возле названия поля. В новой спецификации появился специальный атрибут required, который позволяет отметить обязательное поле на уровне разметки. Этот атрибут дает указание браузеру (при условии, что тот поддерживает HTML5), указание не отправлять данные после нажатия пользователем кнопки отправить, пока указанные поля не заполнены.

<input type="text" required placeholder="Ваше имя">

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

input:focus {
background: #eaeaea;
}

Ещё один полезный html5-атрибут — атрибут autofocus. Он позволяет автоматически установить фокус на нужном начальном поле для элементов <input> и <textarea> (только в один элемент каждой формы).

Пример создания формы регистрации

HTML разметка

<div class="form-wrap">
  <div class="profile"><img src="https://html5book.ru/wp-content/uploads/2016/10/profile-image.png">
    <h1>Регистрация</h1>
  </div>
  <form method="post" action="form.php">
    <div>
      <label for="name">Имя</label>
      <input type="text" name="name" required>
    </div>
    <div class="radio">
      <span>Пол</span>
      <label>
        <input type="radio" name="sex" value="мужской">мужской
        <div class="radio-control male"></div>
      </label>
      <label>
        <input type="radio" name="sex" value="женский">женский
        <div class="radio-control female"></div>
      </label>
    </div>
    <div>
      <label for="email">E-mail</label>
      <input type="email" name="email" required>
    </div>
    <div>
      <label for="country">Страна</label>
      <select name="country">
        <option>Выберите страну проживания</option>
        <option value="Россия">Россия</option> 
        <option value="Украина">Украина</option> 
        <option value="Беларусь">Беларусь</option> 
      </select> 
      <div class="select-arrow"></div> 
    </div> 
    <button type="submit">Отправить</button> 
  </form> 
</div>

Примечание
action="form.php" — ссылка на файл обработчика формы. Создайте файл в кодировке UTF-8, закачайте его на сервер и замените action="form.php" на путь к файлу на вашем сервере.

form-default
Рис. 2. Внешний вид формы по умолчанию

Как видно из рисунка, каждый элемент формы имеет стили браузера по умолчанию. Очистим стили и оформим элементы формы.

.form-wrap {
  width: 550px;
  background: #ffd500;
  border-radius: 20px;
}
.form-wrap *{transition: .1s linear}
.profile {
  width: 240px;
  float: left;
  text-align: center;
  padding: 30px;
}
form {
  background: white;
  float: left;
  width: calc(100% - 240px);
  padding: 30px;
  border-radius: 0 20px 20px 0;
  color: #7b7b7b; 
}
.form-wrap:after, form div:after {
  content: "";
  display: table;
  clear: both;
}
form div {
  margin-bottom: 15px;
  position: relative;
}
h1 {
  font-size: 24px;
  font-weight: 400;
  position: relative;
  margin-top: 50px;
}
h1:after {
  content: "\f138";
  font-size: 40px;
  font-family: FontAwesome;
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
}

/********************** стилизация элементов формы **********************/
label, span {
  display: block;
  font-size: 14px;
  margin-bottom: 8px;
}
input[type="text"], input[type="email"] {
  border-width: 0;
  outline: none;
  margin: 0;
  width: 100%;
  padding: 10px 15px;
  background: #e6e6e6;
}
input[type="text"]:focus, input[type="email"]:focus {
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.2);
}
.radio label {
  position: relative;
  padding-left: 50px;
  cursor: pointer;
  width: 50%;
  float: left;
  line-height: 40px;
}
.radio input {
  position: absolute;  
  opacity: 0;
}
.radio-control {
  position: absolute;
  top: 0;
  left: 0;
  height: 40px;
  width: 40px;
  background: #e6e6e6;
  border-radius: 50%;
  text-align: center;
}
.male:before {
  content: "\f222";
  font-family: FontAwesome;
  font-weight: bold;
}
.female:before {
  content: "\f221";
  font-family: FontAwesome;
  font-weight: bold;
}
.radio label:hover input ~ .radio-control,
.radiol input:focus ~ .radio-control {
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.2);
}
.radio input:checked ~ .radio-control {
  color: red;
}
select {
  width: 100%;
  cursor: pointer;
  padding: 10px 15px;
  outline: 0;
  border: 0;
  background: #e6e6e6;
  color: #7b7b7b;
  -webkit-appearance: none; /*убираем галочку в webkit-браузерах*/
  -moz-appearance: none; /*убираем галочку в Mozilla Firefox*/
}
select::-ms-expand {
  display: none; /*убираем галочку в IE*/
}
.select-arrow {
  position: absolute;
  top: 38px;
  right: 15px;
  width: 0;
  height: 0;
  pointer-events: none; /*активизируем показ списка при нажатии на стрелку*/
  border-style: solid;
  border-width: 8px 5px 0 5px;
  border-color: #7b7b7b transparent transparent transparent;
}
button {
  padding: 10px 0;
  border-width: 0;
  display: block;
  width: 120px;
  margin: 25px auto 0;
  background: #60e6c5;
  color: white;
  font-size: 14px;
  outline: none;
  text-transform: uppercase;
}

/********************** добавляем форме адаптивность **********************/
@media (max-width: 600px) {
  .form-wrap {margin: 20px auto; max-width: 550px; width:100%;}
  .profile, form {float: none; width: 100%;}
  h1 {margin-top: auto; padding-bottom: 50px;}
  form {border-radius: 0 0 20px 20px;}
}

Файл form.php

<?php
  $name = trim(strip_tags($_POST["name"]));
  $sex = trim(strip_tags($_POST["sex"]));
  $email = trim(strip_tags($_POST["email"]));
  $country = trim(strip_tags($_POST["country"]));
  $subject = "Регистрация на сайте url_вашего_сайта";
  $msg = "Ваши данные формы регистрации:\n" ."Имя: $name\n" ."Пол: $sex\n" ."Ваш email: $email\n" ."Страна: $country";
  $headers = "Content-type: text/plain; charset=UTF-8" . "\r\n";
  $headers .= "From: Ваше_имя <ваш_email>" . "\r\n";
  $headers .= "Bcc: ваш_email". "\r\n";
  if(!empty($name) && !empty($sex) && !empty($email) && !empty($country) && filter_var($email, FILTER_VALIDATE_EMAIL)){
    mail($email, $subject, $msg, $headers);
    echo "Спасибо! Вы успешно зарегистрировались.";
    }
?>

Примечание
В переменной $subject укажите текст, который будет отображаться как заголовок письма;
Ваше_имя — здесь вы можете указать имя, которое будет отображаться в поле «от кого письмо» ;
url_вашего_сайта замените на адрес сайта с формой регистрации;
ваш_email замените на ваш адрес электронной почты;
$headers .= "Bcc: ваш_email". "\r\n"; отправляет скрытую копию на ваш адрес электронной почты.

See the Pen ORxGZq by Elena (@html5book) on CodePen.

Поделиться: