<MyRusakov.ru />

Вёрстка сайта с нуля

Вёрстка сайта с нуля

Это уникальная информация по созданию страниц любой сложности. Вы узнаете всё, что нужно по HTML и CSS, а также увидите множество примеров по вёрстке страниц. А также почти к каждому уроку идут упражнения для закрепления материала, поэтому в отличном результате можете быть уверены! Пройдя данный курс, Вы сможете верстать страницы с любым по сложности дизайном. Помимо курса, Вы получите Бонус, который расскажет, как заработать на вёрстке сайтов.

Весь курс соткан из практических примеров реальной вёрстки. А также почти к каждому уроку идут упражнения для закрепления материала, поэтому в отличном результате можете быть уверены!

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Градиент поверх фоновой картинки в CSS

Градиент поверх фоновой картинки в CSS

На этом уроке мы не просто познакомимся с градиентами, но и узнаем, как их можно применять на практике. Вариантов применения градиентов в веб-дизайне, несчетное количество, но нас не интересует все и сразу. Будем двигаться постепенно и начнем мы с популярного дизайнерского приёма – это наложения градиента поверх большой фоновой картинки, используя CSS стили.

Сейчас вы наверное задумались, а зачем вообще что-то накладывать на картинку и почему в CSS, если есть Photoshop?

На первую половину вопроса я отвечу, демонстрируя два изображения. На первом нет наложения градиента, а на втором – используется градиент. Что смотрится интереснее по дизайну?

Первый вариант

Градиент поверх фоновой картинки в CSS.

Второй вариант

Градиент поверх фоновой картинки в CSS.

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

Во втором варианте градиенты используются и в качестве тонирующего слоя, убираются резкие цветовые переходы, задний фон никак не отвлекает от текста.

Демонстрация.

Photoshop или CSS?

Ответ будет разный, смотря, о ком мы говорим? Дизайнер рисует свой макет в Photoshop, вынося градиенты на отдельный слой. Верстальщик, анализируя макет, должен решить – объединять ли слой картинки с градиентом и сохранить их в одном jpg/png/gif файле или градиенты верстать на CSS?

Здесь нет чёткого правила, но одно мы знаем точно, что если по замыслу дизайнера, предполагается делать анимированный фон, то без CSS/JS уже не обойтись. И конечно не надо забывать, что картинка с градиентом будет больше весить, поэтому если градиент простой, то лучше написать его кодом.

Переходим к написанию кода примера и как всегда начинаем с разметки.

HTML разметка

Тег header будет служить контейнером для фоновой картинки, а тег div с классом header_box – контейнером для двух заголовков.

<header>
  <div class="header_box">
    <h1>The Forest</h1>
    <h2>where nature and people</h2>
  </div>
</header>

CSS код

В теге header опишем все свойства сразу для двух заголовков, поскольку стилизуем мы их одинаково и сознательно помещаем одну фразу в заголовки разных уровней. Здесь мы решаем вопрос переноса строки и вторая часть фразы меньше в размерах, так как находиться в теге h2. Разбивание одной фразы – это хороший дизайнерский приём, опять же делает фразу более значимой.

header {
  font-family: sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 7px;
}

Кроме стилизации текста, в теге header лежит наш градиент вместе с фоновой картинкой. Свойство cover растягивает картинку на всю ширину и высоту хедера.

background-size: cover;

Градиент поверх картинки

Для справки: Градиенты бывают линейные и радиальные, линейный тянется по прямой линии, от одного цвета к другому, как правило их используют для заполнения фигур с углами (прямоугольники, квадраты). Радиальный градиент тянется из центра окружности к краям и он хорошо подходит округлым фигурам (круг, овал), на сайтах это обычно кнопки.

Итак, у нас линейный градиент (linear-gradient), тянущийся снизу вверх (to top), от светлого-зеленого оттенка к темно-зеленому (rgba и цифры).

background-image: linear-gradient (to top, rgba (89,106,114, 0.6), rgba (206,220,23, 0.4)), url (fog.jpg);

Последние две цифры – 0.6/0.4 регулируют степень прозрачности градиента, без этих цифр, мы вообще не увидели бы картинки, а один сплошной градиент.

Градиент по высоте заполняет первый экран на 95 процентов, просто так лучше смотрится скошенная линия снизу.

height: 95vh;

Это не фотошоп, в реальности фотография целиковая, это мы виртуально её подрезали с помощью свойства clip-path. Пара цифр обозначает координаты X и Y, по которым строится кривая, маскирующая все лишнее. Данное свойство не поддерживается IE и Edge.

clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);

Позиционирование текста

Для текста мы создали специальный блок, с позиционировали его относительно окна браузера ровно посередине.

.header_box {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

Примеры градиентов

https://cssgradient.io
https://webkul.github.io/coolhue/
https://www.grabient.com/

Оттуда можно скопировать код цвета и вставить в Photoshop или сразу в ваш CSS код.

See the Pen Gradient Overlay Image using Clip-path by porsake (@porsake) on CodePen.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.