Как сделать закругленную шапку сайта
![Как сделать закругленную шапку сайта](/images/articles/css_curved_header.jpg)
Согласитесь, что закругленная внизу линия шапки сайта смотрится более изящнее, чем прямоугольная. На первый взгляд может показаться, что это дизайнер сам обрезал таким образом изображение. Но все намного проще.
HTML разметка
В секцию пойдет большое изображение на весь экран. Внутри контентного блока расположится заголовок.
<section>
<div class="content">
<h2>Curved Header</h2>
</div>
</section>
CSS код
На данный момент изображение занимает весь первый экран и по прежнему имеет прямоугольную форму. Магия произойдет чуть позже.
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
*{
margin: 0; /*обнуление отступов*/
padding: 0;/*обнуление полей*/
box-sizing: border-box; /*размеры блоков не учитывают толщину рамок, полей*/
font-family: 'Quicksand', sans-serif; /*название шрифта*/
}
body{
min-height: 120vh; /*минимальная высота видимой области*/
}
section{
position: relative; /*относительное позиционирование*/
width: 100%; /*на всю ширину экрана*/
min-height: 100vh; /*на всю высоту экрана*/
background: #000; /*фон секции*/
background: url(bg.jpg);/*фоновая картинка*/
background-size: cover; /*растянуть с сохранением пропорций*/
background-attachment: fixed; /*фон не перемещается вместе с элементом*/
...
}
![Как сделать закругленную шапку сайта.](/images/articles/css_curved_header_01.jpg)
CSS свойство clip-path отсекает по форме круга часть изображения. Внутри отсеченной область контент видно, а вот за пределами круга уже нет. Причем форма отсечения может быть другой геометрической фигурой, а не только кругом.
section{
...
clip-path: circle(180vh at 50% -80vh); /*как отображать содержимое круга*/
display: flex; /*отображать как гибкий контейнер*/
justify-content: center; /*горизонтальное выравнивание*/
align-items: center; /*вертикальное выравнивание*/
}
![Как сделать закругленную шапку сайта.](/images/articles/css_curved_header_02.jpg)
Стилизуем заголовок.
section .content{
max-width: 1000px; /*ограничение максимальной ширины для заголовка*/
text-align: center; /*заголовок в центре*/
}
section .content h2{
font-size: 5em; /*размер шрифта*/
color: #fff; /*цвет шрифта*/
font-weight: 700; /*толщина шрифта*/
text-shadow: 0 5px 20px rgba(0,0,0,0.2); /*тень у текста*/
}
![Как сделать закругленную шапку сайта.](/images/articles/css_curved_header_03.jpg)
-
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.