Зададим три секции, у средней section будет класс grad, а фон сделаем с градиентом.
Добавим в секцию заголовок.
Переходы между секциями будут не прямые линии, а любой формы.
Код в index.html.
|
1 2 3 4 5 |
<section class="top1"></section> <section class="grad"> <h1>Заголовок</h1> </section> <section class="top2"></section> |
Добавим стили к секции grad.
- Для всех секций сделаем ширину width: 100% и расстояния между ними зададим min-height: 500px.
- Для секции с классом grad, сделаем position: relative и наложит линейный градиент background: linear-gradient (90deg, #1f62e9, #b641b0).
- Добавим секции элемент &:before с свойством абсолютного позиционирования. Добавим изображение background-image: url () с волнами белового цвета, как у первой секции. Зададим размеры изображению.
- &:after добавляем вторую картинку сверху, для красивого перехода между секциями. Также добавим изображение, только вначале перевернем его на 180 градусов transform: rotate (180deg).
Код в main.sass.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
section width: 100% min-height: 500px .grad position: relative background: linear-gradient(90deg, #1f62e9, #b641b0) h1 font-family: "FuturaRound-example" color: #fff text-align: center line-height: 380px &:before content: '' position: absolute bottom: 330px width: 100% height: 170px background-image: url("../img/3.png") background-repeat: no-repeat &:after content: '' position: absolute bottom: 0px width: 100% height: 170px background-image: url("../img/3.png") transform: rotate(180deg) background-repeat: no-repeat |
Смотрим, как отображается в браузере.
Делаем переходные фоны изображения в photoshop для элемента &:before и &:after.
- Нажимаем в photoshop создать новый документ. Укажем размер по ширине, который нужен и по высоте, например 200 пикселей.
- Инструментом эллипс делаем около десяти изображение, объединяем все слои.
- Инструментом волшебная палочка выделяем изображение с другим цветом и удаляем.
- Добавляем тени и свечение, при необходимости.
- Сохраняем получившуюся картинку в формате png.
Разберем все свойства фона background.
- Для создания картинки для фона используем background-image: url ().
- По умолчанию картинка будет повторяться, чтобы убрать используем background-repeat: no-repeat.
- Картинку можно повторять по горизонтали repeat-x и по вертикали repeat-y.
- Выравнивать картинку относительно секции можно свойством background-position: center.
- Для изменения размера изображения используем background-size:, задаем в процентах, пикселях. Часто используется cover, когда картинка заполняет контейнер.
- background-attachment: fixed можно задать, чтобы фон был фиксированный и не прокручивался при скролле сайта вниз.