Красочный эффект густого тумана для веб-сайта. HTML & CSS

Пояснения к статье:

  • 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-код:

Html/CSS спецэффекты на сайт

Далее изменяем свойства тумана. Задаем 2 класса — .fog и .fog-container. Первый отвечает за всё содержимое тега section, а второй только за туман.

Для общего контейнера задаем размеры — свойства height и width, изменяем позиционирование и цвет фона. Для контейнера с туманом делаем практически то же самое, но теперь мы не трогаем фон и задаем абсолютное позиционирование. CSS-код:

Спецэффект для сайта

Заключительная часть — изменение каждого тумана отдельно и создание keyframes. В селекторе .fog_img мы зададим размеры и абсолютное позиционирование. Для каждого тумана отдельно нам нужно задать свойства фона и создать анимацию.

После этого мы создаем селектор @keyframes, в котором будем работать с трансформацией элементов. CSS-код:

Заключение

Эффект тумана на html/css

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

В статье был представлен отрезок кода, если хотите ознакомиться с ним подробнее, то скачивайте наши исходники. Удачи в изучении:

Теги:
1+

Оставить своё мнение

Ваш e-mail не будет опубликован. Обязательные поля помечены *