Пояснения к статье:
- html, head, body — главные html теги, которые являются основой каждого веб-сайта. Они содержат в себе всю остальную информацию страницы, как внешнюю, так и внутреннюю.
Здравствуйте, в этой статье мы не будем рассматривать создание сложных слайдеров, навигационных панелей или каких-либо других разработок, которые требуют больших усилий.
Сейчас мы рассмотрим простой, красочный эффект для веб-сайта. Прочитав эту статью внимательно, вы узнаете о том, как создать красочный эффект густого тумана для своего веб-сайта.
Самое главное, вам не понадобится ни JQuery, ни JavaScript в целом. Все что нам нужно — HTML и CSS. Однако, при работе с CSS понадобится много времени, но все не так плохо.
Вообще эффект тумана — необычное украшение дизайна. Добавив его на свой сайт вы сможете сделать его не только привлекательнее, но и уникальнее. Часто ли вы видите что-то подобное на сайтах-конкурентах.
HTML разметка
Для начала создадим основу страницы. Сначала основа — создаем теги doctype, html, head и body. В теге head размещаем всю необходимую информацию, а body пока не трогаем.
Много внешних файлов не потребуется, всё что нужно — подключить файл style.css, для этого используем тег link:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Тест</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section class="fog">
<figure class="absolute-bg" style="background-image: url('1.jpg');"></figure>
<div class="fog__container">
<div class="fog__img fog__img--first"></div>
<div class="fog__img fog__img--second"></div>
</div>
</section>
</body>
</html>
В нашем примере мы создадим простую разметку страницы. Все наши элементы будут находиться в контейнере section, которому присвоен класс fog.
Чтобы показать туман более наглядно зададим фоновое изображение для страницы.
У нас будет несколько видов тумана, соответственно, нужно создать несколько блоков div с разными классами.
CSS стилизация
Теперь самое сложное — создание стилей CSS. Давайте разделим работу на несколько этапов.
Для начала мы поработаем над общим фоном. Нам нужно задать абсолютное позиционирование, с помощью свойства position: absolute. После этого размещаем картинку в удобном месте, задаем размеры и изменяем свойства фона. CSS-код:
Далее изменяем свойства тумана. Задаем 2 класса — .fog и .fog-container. Первый отвечает за всё содержимое тега section, а второй только за туман.
Для общего контейнера задаем размеры — свойства height и width, изменяем позиционирование и цвет фона. Для контейнера с туманом делаем практически то же самое, но теперь мы не трогаем фон и задаем абсолютное позиционирование. CSS-код:
Заключительная часть — изменение каждого тумана отдельно и создание keyframes. В селекторе .fog_img мы зададим размеры и абсолютное позиционирование. Для каждого тумана отдельно нам нужно задать свойства фона и создать анимацию.
После этого мы создаем селектор @keyframes, в котором будем работать с трансформацией элементов. CSS-код:
Заключение
У нас получилась очень красивая веб-страница, а всё благодаря лишь одному эффекту. Надеемся что у вас всё получилось, работа не очень простая, но она не требует использования JavaScript, что является сложностью для начинающих веб-разработчиков.
В статье был представлен отрезок кода, если хотите ознакомиться с ним подробнее, то скачивайте наши исходники. Удачи в изучении:
Теги: