Стилизация изображений. 2.5D эффект для фотографий в CSS
Пояснения к статье:
- {Animation} — CSS свойство. Отвечает за создание анимации.
- <Body>, <div>, <link> и <style> — HTML теги.
- {@keywords} — ключевое свойство в CSS, которое является псевдоселектором. Используется для изменения анимации отдельных кадров.
Большинство информации размещается в текстовом виде, но она намного хуже воспринимается чем демонстрация в виде изображений. Особо важную информацию лучше преподносить в виде иллюстраций.
Из-за своей важности стилизация фотографий требует особого и кропотливого труда. Это очень трудоемкий процесс, который позволит вам создать изображения с эффектом 2.5D. Такие картинки лучше воспринимаются пользователями, а поэтому повышают общее качество веб-страницы.
В этой статье вы узнаете о том, как создать изображения с эффектом 2.5D с помощью CSS.
Самое главное отличие от остальных уникальных работ, которые мы размещали ранее — отсутствие дополнительных библиотек. Работа будет восприниматься вами намного проще, так что вы сможете самостоятельно освоить навык создания красивых фотографий.
Используемые теги и стили
Перед тем как приступать к работе, давайте рассмотрим необходимые HTML и CSS инструменты. Если вы прекрасно владеете навыками веб-программирования, то можете пропустить данный раздел.
Начнем с HTML тегов. Ну разметка страницы с помощью основных тегов — и так понятно.
Всё что нам понадобится из HTML — тег <div>. В них и будут располагаться все элементы изображения.
Из атрибутов используются только классы, а также "id", для общего контейнера.
Так как нам не нужно подключать сторонние библиотеки и фреймворки, мы не будем использовать теги <link> и <style>.
CSS стили
В этой работе не потребуются особые элементы стилизации. Вам потребуются базовые теги позиционирования и отступов.
Большую часть кода занимают элементы анимации и трансформирования — свойства <transform> и <animation>. Каждый из них будет применяться отдельно для каждого слоя изображения.
Не забываем о псевдоселекторе @keyframes. С его помощью определяются основные кадры для анимации.
Разметка HTML
Для начала подготовьте ваше изображение. В CSS нет свойств, которые превращают 2D картинку в 2.5D, поэтому изображение необходимо разделить на несколько слоев.
После подготовки изображений откроем наш HTML документ. В теге <body> создадим общий блок <div>, с идентификатором wrapper. В нем будут располагаться остальные блоки.
В блоках необходимо разместить теги <img>, в которых и находятся слои. В нашем примере используется 4 слоевых изображения, а значит потребуется 4 блока с тегами <img>.
После этого необходимо создать классы для блоков, можно использовать названия изображений.
<div id="wrapper">
<div class="dust"><img src="img/dust.png" /></div>
<div class="foreground"><img src="img/foreground.png" /></div>
<div class="midground"><img src="img/midground.png" /></div>
<div class="background"><img src="img/background.jpg" /></div>
</div>
Стилизация. CSS3
Как мы уже говорили, основной частью стилизации является анимация.
Открываем наш CSS документ и записываем все 4 класса в одном селекторе. В них мы зададим позиционирование и расположение. Также необходимо создать общую анимацию.
.background, .dust, .foreground, .midground {
position: absolute;
margin-left: -80px;
z-index: 1;
animation-name: background;
animation-duration: 40s;
animation-delay: 0ms;
animation-fill-mode: forwards;
animation-iteration-count: 1;
}После этого необходимо стилизовать каждый слой отдельно. Создаем селекторы классов и создаем анимацию для каждого отдельного слоя.
Далее создаем селектор @keyframes. В нем, с помощью процентных значений, определяем ключевые кадры. Далее изменяем трансформацию изображений.
Keyframes необходимо создавать для каждого отдельного элемента.
Заключение
В этой статье мы ознакомились с созданием 2.5D картинок. Как видите, создать их не так сложно как какой-нибудь слайдер, но эффект просто поразителен.
Можете поэкспериментировать со значениями анимации. Если хотите изучить код более детально, скачивайте наши исходники. Желаем удачи в изучении!
Теги: