/ Дизайн / Фоновые линии

Фоновые линии

04.10.2022

447

Добавим линии в верстку сайта. Это разбавит однородный фон, а также придаст стройности разным блокам контента.

6 секторов

Разделение фона линиями на 6 секторов.

<div class="lines">
	<div class="deg-000"></div>
	<div class="deg-025"></div>
	<div class="deg-050"></div>
	<div class="deg-075"></div>
	<div class="deg-100"></div>
</div>
/* Линии */

.lines {
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 100%;
    z-index: -1;
}

.lines > * {
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    background: #f7f7f7;
}

.lines .deg-000 {left: 0;}
.lines .deg-025 {left: 25%;}
.lines .deg-050 {left: 50%;}
.lines .deg-075 {left: 75%;}
.lines .deg-100 {right: 0;}

@media screen and (max-device-width: 1280px) {
	.lines {left: 5%; right: 5%;}
}

@media screen and (max-device-width: 800px) { 
	.lines {left: 0; right: 0;}
	.lines > *.deg-000, .lines > *.deg-100 {display: none;}
}

@media screen and (max-device-width: 480px) {
	.lines > *.deg-025, .lines > *.deg-075 {display: none;}
}

12 секторов

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

<div class="lines">
	<div class="deg-000"></div>
	<div class="deg-010"></div>
	<div class="deg-020"></div>
	<div class="deg-030"></div>
	<div class="deg-040"></div>
	<div class="deg-050"></div>
	<div class="deg-060"></div>
	<div class="deg-070"></div>
	<div class="deg-080"></div>
	<div class="deg-090"></div>	
	<div class="deg-100"></div>	
</div>
.lines {
    position: absolute;
    top: 0;
    left: 8.33%;
    right: 8.33%;
    height: 100%;
    z-index: -1;
}

.lines > * {
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    background: #f7f7f7;
}

.lines .deg-000 {left: 0;}
.lines .deg-010 {left: 10%;}
.lines .deg-020 {left: 50%;}
.lines .deg-030 {left: 30%;}
.lines .deg-040 {left: 40%;}
.lines .deg-050 {left: 50%;}
.lines .deg-060 {left: 60%;}
.lines .deg-070 {left: 70%;}
.lines .deg-080 {left: 80%;}
.lines .deg-090 {left: 90%;}
.lines .deg-100 {right: 0;}

Круги

Этот вид линий вряд ли можно использовать для выравнивания, это больше в декоративных целях.

И тут более жесткое требование к привязке и к порядку вывода (z-index).

<div class="rounded">
	<div class="round-50"></div>
	<div class="round-100"></div>
	<div class="round-150"></div>
	<div class="round-200"></div>			
</div>

Стили:

/* Круги */

.rounded {
    width: 100%;
    position: fixed;
	z-index: -1;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    height: 100%;
}

.rounded > * {
    position: absolute;
    border: 1px solid #f7f7f7;
    border-radius: 100%;
}

.rounded .round-5 {height: 5vh; width: 5vh;}
.rounded .round-25 {height: 25vh; width: 25vh;}
.rounded .round-50 {height: 50vh; width: 50vh;}
.rounded .round-75 {height: 75vh; width: 75vh;}
.rounded .round-100 {height: 100vh; width: 100vh;}
.rounded .round-150 {height: 150vh; width: 150vh;}
.rounded .round-200 {height: 200vh; width: 200vh;}

Поделиться в соц. сетях:

  • Похожие записи
  • Комментарии
  • Вложения
Блочная верстка сайта

Блочная верстка сайта

Сайт должен верстаться по сетке блоками. При использовании сетки разметка сайта выглядит гармонично. Предлагаю свой простой вариант верстки блоков. Для добавления блоков, используйте тэги <div class="box"> <div class="block-1">Содержимое</div> — ширина Читать далее »

Миниатюра — фон сайта

Миниатюра — фон сайта

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

/
FlexBlock. Современная верстка

FlexBlock. Современная верстка

Верстка сайтов постоянно эволюционирует: от табличной верстки к верстке div с float (frame), далее промежуточный этап верстка diplay:inline-block. Так или иначе суть верстки — модульная сетка. Современный CSS дает нам Читать далее »

/

Добавить комментарий

Пока нет комментариев. Будь первым!

Фоновые линии
Установка шрифтов
Рекомендации для васУстановка шрифтовOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.