19 ноя 2014
Аккордеон изображений для сайта на CSS3
Ares Категория: Web-Мастеру » Уроки
У нас вы можете скачать бесплатно Аккордеон изображений для сайта на CSS3

Данный материал предоставлен сайтом Skripter.info исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
Аккордеон изображений для сайта на CSS3


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

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



И так, давайте приступим.

Шаг 1. HTML

Разметка будет очень простой, нам необходимо вывести пять классов, каждый из которых отвечает за свое изображение и его позиционирование в пространстве:

<div class='wrapper'>
<div class='item ryze'></div>
<div class='item irelia'></div>
<div class='item jinx'></div>
<div class='item katarina'></div>
<div class='item ziggs'></div>
</div>


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

Шаг 2. CSS

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

.wrapper {
display: flex;
flex-direction: row;
align-items: stretch;
height: 100%;
.item {
display: flex;
flex-grow: 1;
transition: all .5s ease;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
overflow: hidden;
&:hover {
flex-grow: 4;
box-shadow: inset 0 0 20px #000;
}
&:after {
content: "";
width: 200%;
height: 43.33%;
background-color: rgba(#000, 0.75);
left: -50%;
bottom: -10%;
position: absolute;
transform: rotate(-15deg);
color: #fff;
text-align: center;
padding-top: 20px;
text-transform: uppercase;
font-size: 40px;
font-family: 'Raleway';
font-weight: 100;
}
&.ryze {
background-image: url($ryze);
background-position: 70% center;
&:after {
content: "Ryze";
}
}
&.irelia {
background-image: url($irelia);
background-position: 45% center;
&:after {
content: "Irelia";
}
}
&.jinx {
background-image: url($jinx);
background-position: 70% center;
&:after {
content: "Jinx";
}
}
&.katarina {
background-image: url($katarina);
background-position: 70% center;
&:after {
content: "Katarina";
}
}
&.ziggs {
background-image: url($ziggs);
background-position: 75% center;
&:after {
content: "Ziggs";
}
}
}
}


Так как подписи были убраны из разметки мы перенесли их в стили. Такой простой способ поможет с легкостью внедрить аккордеон в структуру Вашего проекта.

Скачивание файлов доступно только зарегистрированным пользователям









Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.