Все для веб-дизайнера
Аккордеон изображений для сайта на CSS3
Наверное каждому из веб-разработчиков приходилось сталкиваться с аккордеонами изображений, весьма хитрый ход позволяет стилизовать сайт изображениями, при этом сэкономив уйму места, и привлекая при этом пользователей интересным решением анимации, в данном уроке мы рассмотрим достаточно простой способ реализации аккордеона изображений для сайта с помощью CSS. Такой вариант решения может стать отличным началом приветствия вашего сайта, где пользователю нужно сделать основной выбор. Давайте посмотрим, что у нас получилось.
Много различным бесплатных шаблонов вы можете найти на сайте наших партнеров, также имеются и премиум шаблоны с круглосуточной техподдержкой и помощью в настройке:
Идея состоит в том, что у нас есть пять изображений, мы выстраиваем их в ряд, затем добавляем подписи, последним шагом будет подключение увеличения изображений так, чтобы остальные немного изменяли свой размер. И так, давайте приступим.
Шаг 1. HTML
Разметка будет очень простой, нам необходимо вывести пять классов, каждый из которых отвечает за свое изображение и его позиционирование в пространстве:
|
1 2 3 4 5 6 7 |
<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
Теперь нам необходимо, для начала, определить общие параметры контейнера, с указанным его позиционированием, затем мы указываем процентное соотношение для каждого блока:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
.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"; } } } } |
Так как подписи были убраны из разметки мы перенесли их в стили. Такой простой способ поможет с легкостью внедрить аккордеон в структуру Вашего проекта.
Вот и все. Готово!
Интересно:
| Опубликовал admin 27.10.2014 в 12:04, в категории CSS. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
Загрузка ...