Листалка блоков

Листалка блоков полностью построена на свойствах CSS3. Для красивого перелистывания содержимого блоков добавлено немного анимации CSS3 при переходах. Свойства анимации CSS3 добавляют простой листалки страниц эффект слайдера.

Оглавление:
  1. На весь экран с переходами
  2. Расположить кнопки переходов

Использовать только свойства CSS3 для интерфейса сайта без применения JavaScript может быть не совсем правильным решением. Дело в том что мир всё еще переполнен старыми браузерами IE которые не понимают свойства CSS: селекторы, псевдоклассы, псевдоэлементы, преобразования и т.д …

В этих примерах показано насколько мощным инструментом стал CSS для создания динамического содержания и прекрасной заменой некоторых событий JavaScript.

Важная часть примеров — это использование селекторов :focus и :checked +. Селекторы являются основой всех примеров, которые мы будем рассматривать в этой записи. В статье «Дерево каталогов» для открытия содержимого каталогов Я успешно применил селектор :checked .

Нужно отметить что примеры адаптивные для разных размеров экрана!

На весь экран с переходами

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

Переход на страницу с анимацией
Четыре пункта для выбора страницы

HTML

<input type="radio" class="radio" name="pages" id="exit" checked />
<main>
  <input type="radio" class="radio" name="pages" id="page_1" />
  <section class="section-container">
  <label for="exit" class="exit-label"> X </label>
  <label for="page_1" class="page-label">
  <span>Страница 1</span>
  </label>
  <header>
  <h1>Заголовок страницы 1</h1>
  </header>
  <article>
   <p>Сдержание</p>
  </article>
  </section>

  <input type="radio" class="radio" name="pages" id="page_2" />
  <section class="section-container">
  <label for="exit" class="exit-label"> X </label>
  <label for="page_2" class="page-label">
  <span>Страница 2</span>
  </label>
  <header>
  <h1>Заголовок страницы 2</h1>
  </header>
  <article>
  <p>Сдержание</p>
 </article>
  </section>

  <input type="radio" class="radio" name="pages" id="page_3" />
  <section class="section-container">
  <label for="exit" class="exit-label"> X </label>
  <label for="page_3" class="page-label">
  <span>Страница 3</span>
  </label>
  <header>
  <h1>Заголовок страницы 3</h1>
  </header>
  <article>
  <p>Сдержание</p>
  </article>
  </section>

  <input type="radio" class="radio" name="pages" id="page_4" />
  <section class="section-container">
  <label for="exit" class="exit-label"> X </label>
  <label for="page_4" class="page-label">
  <span>Страница 4</span>
  </label>
  <header>
  <h1>Заголовок страницы 4</h1>
  </header>
  <article>
  <p>Сдержание</p>
  </article>
  </section>
</main>

CSS

*, *:after, *:before {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

:root {
 background: #fafafa;
 font: 120% arial; } 

body {
 height: 100%;
 overflow: hidden;
 margin: 0; }  

article, aside, canvas,
footer, header, main, section {
  display: block; }

header h1 {
  position: relative;
  top: 40px;}

.radio,
.exit-label {
  display: none;
  visibility: hidden; }

.exit-label {
  background-color: #ccc;
  border: 1px solid #333;
  border-radius: 10px;
  display: inline-block;
  padding: 4px 12px;
  position: fixed;
  right: 40px;
  text-decoration: none;
  top: 20px; }

.page-label {
  height: 100%;
  left: 0;
  position: absolute;
  text-align: center;
  top: 0;
  width: 100%; }
  .page-label span {
  position: relative;
  top: 50%; }

label {
  cursor: pointer; }
label:hover, label:active {
  background: rgba(0, 0, 0, 0.3);
  color: #fff; }
label:focus {
  outline: thin dotted; }

.section-container {
  -moz-transition: 0.4s all;
  -webkit-transition: 0.4s all;
  transition: 0.4s all;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -o-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
  border: 0px solid;
  height: 50%;
  overflow: hidden;
  position: fixed;
  width: 50%;
  z-index: 1; }

header h1, article {
  -moz-transition: 0.66s all;
  -webkit-transition: 0.66s all;
  transition: 0.66s all;
  margin: auto;
  max-width: 800px;
  padding: 20px;
  opacity: 0;
  visibility: hidden; }

:checked + .section-container {
  -moz-transform: translate(0%, 0%);
  -ms-transform: translate(0%, 0%);
  -o-transform: translate(0%, 0%);
  -webkit-transform: translate(0%, 0%);
  transform: translate(0%, 0%);
  width: 100%;
  height: 100%;
  z-index: 5;
  overflow: auto; }
  :checked + section .exit-label {
  display: inline-block;
  visibility: visible; }
  :checked + section .page-label {
  display: none; }
  :checked + section article,
  :checked + section header h1 {
  opacity: 1;
  visibility: visible; }

section:nth-of-type(1) {
  -moz-transform: translate(0%, 0%);
  -ms-transform: translate(0%, 0%);
  -o-transform: translate(0%, 0%);
  -webkit-transform: translate(0%, 0%);
  transform: translate(0%, 0%);
  background: #FFE4C4; }

section:nth-of-type(2) {
  -moz-transform: translate(100%, 0%);
  -ms-transform: translate(100%, 0%);
  -o-transform: translate(100%, 0%);
  -webkit-transform: translate(100%, 0%);
  transform: translate(100%, 0%);
  background: #c8f4c8; }

section:nth-of-type(3) {
  -moz-transform: translate(0%, 100%);
  -ms-transform: translate(0%, 100%);
  -o-transform: translate(0%, 100%);
  -webkit-transform: translate(0%, 100%);
  transform: translate(0%, 100%);
  background: #c8f4f2; }

section:nth-of-type(4) {
  -moz-transform: translate(100%, 100%);
  -ms-transform: translate(100%, 100%);
  -o-transform: translate(100%, 100%);
  -webkit-transform: translate(100%, 100%);
  transform: translate(100%, 100%);
  background: #eef4c8; }

#exit:checked + section {
  border: none;
  opacity: 1; }

main:not(:checked) + section {
  border: 40px solid; }

Демо

Что бы заставить работать свойства CSS3 в старом браузере нужно подключить библиотеку javascript modernizr.com. Если Вы всё таки решили применить этот макет для своего веб-приложения рекомендую посмотреть вариант макета построенный на JavaScript. Полноэкранный макет страницы с переходами с помощью javascript

к меню ↑

Расположить кнопки переходов

Вот еще два примера, первый очень похож на закладки.

  1. Макет страницы на весь экран с кнопками для переходов
  2. Слайдер на CSS3

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

Имея всё это в виду, давайте перейдем к следующему и последнему примеру листалки CSS. Этот пример листалки гораздо более доступный, чем примеры выше, и также позволяет нам добиться подобных результатов. В этом примере используется псевдокласс :target и ссылки.
HTML

<main>

  <section class="section-content" id="page_1">

    <a href="#exit"> X </a>
    <a href="#page_1">
      <span>Страница 1</span>
    </a>

    <header>
        <h1>Заголовок страницы 1</h1>
    </header>

      <article>
        <p>Содержание ...</p>
      </article>

  </section>

  <section class="section-content" id="page_2">

    <a href="#exit"> X </a>
    <a href="#page_2">
      <span>Страница 2</span>
    </a>

    <header>
         <h1>Заголовок страницы 2</h1>
    </header>

      <article>
        <p>Содержание ...</p>
      </article>

  </section>

  <section class="section-content" id="page_3">

    <a href="#exit"> X </a>
    <a href="#page_3">
      <span>Страница 3</span>
    </a>

    <header>
        <h1>Заголовок страницы 3</h1>
    </header>

      <article>
        <p>Содержание ...</p>
      </article>

  </section>

  <section class="section-content" id="page_4">

    <a href="#exit"> X </a>
    <a href="#page_4">
      <span>Страница 4</span>
    </a>

    <header>
        <h1>Заголовок страницы 4</h1>
    </header>

      <article>
        <p>Содержание ...</p>
      </article>

  </section>

 </main>

CSS

*, *:after, *:before {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background: #fafafa;
  font-family: arial narrow, arial;
  font-size: 120%;
  margin: 0;
}

body, html, main {
  height: 100%;
  overflow: hidden;
}

h1, h2, h3, h4, p, li {
  margin-top: 0;
}

header, main, section, article {
  display: block;
}

main {
  position: fixed;
  top: 0;
  width: 100%;
}

[href*="exit"] {
  color: #333;
  display: none;
  visibility: hidden;
}

section:nth-of-type(1):target [href*="exit"],
section:nth-of-type(2):target [href*="exit"],
section:nth-of-type(3):target [href*="exit"],
section:nth-of-type(4):target [href*="exit"] {
  border: 1px solid #333;
  display: inline-block;
  padding: 4px 12px;
  text-decoration: none;
  visibility: visible;
}

section a:last-of-type  {
  height: 100%;
  left: 0;
  position: absolute;
  text-align: center;
  top: 0;
  width: 100%;
}

section a span {
  position: relative;
  top: 50%;
  color: #333;
}

a:hover, a:active {
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  text-decoration:none;
}

a:focus {
  outline: thin dotted;
}

.section-content {
  -moz-transition: 0.4s all;
  -webkit-transition: 0.4s all;
  transition: 0.4s all;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -o-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
  border: 0px solid;
  height: 50%;
  overflow: hidden;
  position: fixed;
  width: 50%;
  z-index: 1;
}

header, article {
  -moz-transition: 0.66s all;
  -webkit-transition: 0.66s all;
  transition: 0.66s all;
  margin: auto;
  max-width: 800px;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
}

section:nth-of-type(1):target,
section:nth-of-type(2):target,
section:nth-of-type(3):target,
section:nth-of-type(4):target {
  -moz-transform: translate(0%, 0%);
  -ms-transform: translate(0%, 0%);
  -o-transform: translate(0%, 0%);
  -webkit-transform: translate(0%, 0%);
  transform: translate(0%, 0%);
  width: 100%;
  height: 100%;
  z-index: 5;
  overflow: auto;
}

section:nth-of-type(1):target [href*="exit"],
section:nth-of-type(2):target [href*="exit"],
section:nth-of-type(3):target [href*="exit"],
section:nth-of-type(4):target [href*="exit"] {
  display: inline-block;
  visibility: visible;
}

section:nth-of-type(1):target [href*="page_1"],
section:nth-of-type(2):target [href*="page_2"],
section:nth-of-type(3):target [href*="page_3"],
section:nth-of-type(4):target [href*="page_4"] {
  display: none;
}

section:nth-of-type(1):target article,
section:nth-of-type(2):target article,
section:nth-of-type(3):target article,
section:nth-of-type(4):target article,
section:nth-of-type(1):target header,
section:nth-of-type(2):target header,
section:nth-of-type(3):target header,
section:nth-of-type(4):target header {
  border: 0;
  opacity: 1;
  visibility: visible;
}

section:nth-of-type(1) {
  -moz-transform: translate(0%, 0%);
  -ms-transform: translate(0%, 0%);
  -o-transform: translate(0%, 0%);
  -webkit-transform: translate(0%, 0%);
  transform: translate(0%, 0%);
  background: #f5bfb8;
}

section:nth-of-type(2) {
  -moz-transform: translate(100%, 0%);
  -ms-transform: translate(100%, 0%);
  -o-transform: translate(100%, 0%);
  -webkit-transform: translate(100%, 0%);
  transform: translate(100%, 0%);
  background: #c8f4c8;
}

section:nth-of-type(3) {
  -moz-transform: translate(0%, 100%);
  -ms-transform: translate(0%, 100%);
  -o-transform: translate(0%, 100%);
  -webkit-transform: translate(0%, 100%);
  transform: translate(0%, 100%);
  background: #c8f4f2;
}

section:nth-of-type(4) {
  -moz-transform: translate(100%, 100%);
  -ms-transform: translate(100%, 100%);
  -o-transform: translate(100%, 100%);
  -webkit-transform: translate(100%, 100%);
  transform: translate(100%, 100%);
  background: #eef4c8;
}

main:target section {
  border: none;
  opacity: 1;
}

Слайдер на CSS3

К этому примеру можно добавить расширенное управление. Существуют некоторые дополнительные компоненты ARIA которые применяются к тегам HTML, визуально выглядят как кнопки, но на самом деле ссылки (что действительно важно, для поддержки специальных возможностей каждого).