Октябрь 2017
Автор: Рубрика: Верстка Комментариев нет

Красивый переход фона для landing page между секциями

Красивый переход фона для landing page между секциями

Зададим три секции, у средней section будет класс grad, а фон сделаем с градиентом.

Добавим в секцию заголовок.

Переходы между секциями будут не прямые линии, а любой формы.

Код в index.html.

Добавим стили к секции grad.

  1. Для всех секций сделаем ширину width: 100% и расстояния между ними зададим min-height: 500px.
  2. Для секции с классом grad, сделаем position: relative и наложит линейный градиент background: linear-gradient (90deg, #1f62e9, #b641b0).
  3. Добавим секции элемент &:before с свойством абсолютного позиционирования. Добавим изображение background-image: url () с волнами белового цвета, как у первой секции. Зададим размеры изображению.
  4. &:after добавляем вторую картинку сверху, для красивого перехода между секциями. Также добавим изображение, только вначале перевернем его на 180 градусов transform: rotate (180deg).

Код в main.sass.

Смотрим, как отображается в браузере.

фона для landing page между секциями

Делаем переходные фоны изображения в photoshop для элемента &:before и &:after.

  1. Нажимаем в photoshop создать новый документ. Укажем размер по ширине, который нужен и по высоте, например 200 пикселей.
  2. Инструментом эллипс делаем около десяти изображение, объединяем все слои.
  3. Инструментом волшебная палочка выделяем изображение с другим цветом и удаляем.
  4. Добавляем тени и свечение, при необходимости.
  5. Сохраняем получившуюся картинку в формате png.

Делаем переходные фоны изображения в photoshop

Разберем все свойства фона background.

  • Для создания картинки для фона используем background-image: url ().
  • По умолчанию картинка будет повторяться, чтобы убрать используем background-repeat: no-repeat.
  • Картинку можно повторять по горизонтали repeat-x и по вертикали repeat-y.
  • Выравнивать картинку относительно секции можно свойством background-position: center.
  • Для изменения размера изображения используем background-size:, задаем в процентах, пикселях. Часто используется cover, когда картинка заполняет контейнер.
  • background-attachment: fixed можно задать, чтобы фон был фиксированный и не прокручивался при скролле сайта вниз.
Комментариев нет

Комментарии:

Комментарии запрещены