—»     —»   Гармошка с изображениями на CSS3
  Раздел: Руководства, CSS/Style Sheets   Нет комментариев  

Гармошка с изображениями на CSS3



Сегодня мы займемся разработкой гармошки с изображениями, и при этом будем использовать лишь код CSS. Мы воспользуемся вложенной структурой и применим технику радио-кнопок и родственного комбинатора для осуществления управления слайдами. Идея заключается в том, чтобы сделать каждый пункт, или слайд, «кликабельным» за счет того, что радио-кнопка будет размещена поверх самого слайда, и при клике по которой будет изменяться расположение дочернего элемента.

Гармошка с изображениями на CSS3

Изображения, использованные в нашем демо, были взяты из проекта Андрея и Лили под названием «L’aquarelle», размещенного на Behance. Материалы распространяются под лицензионным соглашением Creative Commons Attribution-NonCommercial 3.0 Unported License.

Пожалуйста, учтите: результат данного руководства будет работать только в тех браузерах, где имеется поддержка соответствующих CSS-параметров.

Разметка

Главная идея заключается в том, чтобы создать вложенную структуру, которая позволит нам легко переместить соответствующие слайды гармошки на одну сторону, то есть перемещение одного слайда повлечет за собой перемещение всех его внутренних слайдов (вложенных элементов). У каждого числа будет изображение, радио-кнопка для управления «открытия» слайда, и заголовок.

<div class="ia-container">

<figure>
<img src="images/1.jpg" alt="image01" />
<input type="radio" name="radio-set" checked="checked" />
<figcaption><span>True Colors</span></figcaption>

<figure>
<img src="images/2.jpg" alt="image02" />
<input type="radio" name="radio-set" />
<figcaption><span>Honest Light</span></figcaption>

<figure>
<!-- ... -->

<figure>
<!-- ... -->

<figure>
<!-- ... -->

<figure>
<!-- ... -->

<figure>
<!-- ... -->

<figure>
<!-- ... -->
</figure>

</figure>

</figure>

</figure>

</figure>

</figure>

</figure>

</figure>

</div>

Правда вы здесь можете использовать разные типы контента, что очень важно, так как нам нужно использовать вложенную структуру и радио-кнопку.

CSS-код

Мы зададим слайдеру значение ширины и спрячем излишки с помощью overflow:hidden.

.ia-container {
width: 685px;
margin: 20px auto;
overflow: hidden;
box-shadow: 1px 1px 4px rgba(0,0,0,0.08);
border: 7px solid rgba(255,255,255,0.6);
}

Ширины вычисляется следующим образом:

( (число изображений – 1) * 50 пикселей ) + 335 пикселей

где 50 – это ширина видимой части изображения и 335 – это ширина изображения. В нашем случае, это дает нам ( (8-1) * 50 пикселей) + 335 пикселей = 350 + 335 = 685 пикселей.

У каждого числа останется значение равное 50 пикселям (видимая часть). Это и должно быть их относительное положение к их родительскому элементу. Это приводит к тому, что слайдер выглядит как гармошка. Ширина числа равна 335 пикселей, как и ширина изображения внутри. Мы зададим этому элементу переход, чтобы он двигался более плавно:

.ia-container figure {
position: absolute;
top: 0;
left: 50px; /* width of visible piece */
width: 335px;
box-shadow: 0 0 0 1px rgba(255,255,255,0.6);
transition: all 0.3s ease-in-out;
}

Первый элемент будет расположен с самого левого края, и мы выставим параметр !important, так как мы будем использовать media queries, и нам нужно будет, чтобы самая левая часть всегда представляла собой 0. Позиция будет выставлена на относительную для того, чтобы мы могли задать высоту слайдера:

.ia-container > figure {
position: relative;
left: 0 !important;
}

Изображение будет иметь ширину равную 100%, чтобы оно полностью заполняло элемент:

.ia-container img {
display: block;
width: 100%;
}

Каждая из радио-кнопок будет покрывать видимую часть слайда. Мы выставим параметр уровня плотности отображения на 0, чтобы её невозможно было увидеть, но можно было по ней кликнуть. Параметр z-index должен быть высоким, чтобы он был расположен поверх всего остального:

.ia-container input {
position: absolute;
top: 0;
left: 0;
width: 50px; /* just cover visible part */
height: 100%;
cursor: pointer;
border: 0;
padding: 0;
opacity: 0;
z-index: 100;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

Когда мы кликаем по элементу ввода или выделяем его, нам нужно, чтобы он исчез. На самом деле, мы можем добавить нечто вроде width: 0px, но ввиду странного поведения в браузере Chrome нам придется сохранить этот элемент в правой части (следующий элемент не хочет запускать эффект при наведении, если мы не производим наведение по текущему элементу). Нам также нужно, чтобы смежные элементы переместились влево в сопровождении эффекта перехода:

.ia-container input:checked{
width: 5px;
left: auto;
right: 0px;
}
.ia-container input:checked ~ figure {
left: 335px;
transition: all 0.7s ease-in-out;
}

Задав два разных промежутка перехода (один будет использован в качестве «исходного» положения, а второй при выделении элемента ввода), мы получим эффект случайности. Поиграв с этими значениями, мы можем получить абсолютно разные эффекты.

Заголовок элемента будет покрывать весь элемент темным прозрачным наложением, и элемент span изначально будет размещен поверх верхней части элемента:

.ia-container figcaption {
width: 100%;
height: 100%;
background: rgba(87, 73, 81, 0.1);
position: absolute;
top: 0px;
transition: all 0.2s linear;
}

.ia-container figcaption span {
position: absolute;
top: 40%;
margin-top: -30px;
right: 20px;
left: 20px;
overflow: hidden;
text-align: center;
background: rgba(87, 73, 81, 0.3);
line-height: 20px;
font-size: 18px;
opacity: 0;
text-transform: uppercase;
letter-spacing: 4px;
font-weight: 700;
padding: 20px;
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}

Когда мы выделяем слайд, мы убираем наложение за счет выставления параметра уровня плотности отображения RGBa-цвета на 0:

.ia-container input:checked + figcaption,
.ia-container input:checked:hover + figcaption{
background: rgba(87, 73, 81, 0);
}

Span-элемент потихоньку появится, и переместится с верхней части с небольшой задержкой (сначала должен открыться слайд):

.ia-container input:checked + figcaption span {
transition: all 0.4s ease-in-out 0.5s;
opacity: 1;
top: 50%;
}

Так как после последнего слайда больше ничего нет, нам больше не нужно, чтобы задержка была такой длинной (последней радио-кнопке мы задали id ia-selector-last):

.ia-container #ia-selector-last:checked + figcaption span {
transition-delay: 0.3s;
}

Когда мы наводим курсор мыши на видимую часть закрытого слайда, нам нужно, чтобы происходил небольшой эффект. Но так как радио-кнопка покрывает эту часть (она находится поверх других элементов), мы воспользуемся смежным родственным комбинатором (для этого нам потребуется, чтобы элемент ввода шел сразу же за элементом figcaption):

.ia-container input:hover + figcaption {
background: rgba(87, 73, 81, 0.03);
}

Все последующие смежные элементы выделенного элемента ввода должны получить меньшее значение z-index, опять же, для того чтобы предотвратить нежелательное поведение приложения в браузере Chrome:

.ia-container input:checked ~ figure input{
z-index: 1;
}

И наконец, мы добавляем некоторые media queries для того, чтобы наш слайдер был адаптивным:

@media screen and (max-width: 720px) {
.ia-container {
width: 540px;
}

.ia-container figure {
left: 40px;
width: 260px;
}

.ia-container input {
width: 40px;
}

.ia-container input:checked ~ figure {
left: 260px;
}

.ia-container figcaption span {
font-size: 16px;
}
}

@media screen and (max-width: 520px) {
.ia-container {
width: 320px;
}

.ia-container figure {
left: 20px;
width: 180px;
}

.ia-container input {
width: 20px;
}

.ia-container input:checked ~ figure {
left: 180px;
}

.ia-container figcaption span {
font-size: 12px;
letter-spacing: 2px;
padding: 10px;
margin-top: -20px;
}

}

И на этом все! Надеемся, вам понравилось!

Посмотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 6292   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц February по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930