Фон для сайта в тетрадную клеточку на чистом CSS

Все мы понимаем, что фоны и градиенты на CSS имеют огромнейшее преимущество перед фонами сделанными на основе изображений.

Сегодня я хочу поделиться фоном, градиент которого сделан в виде тетрадной клетки.

Можно найти много тематик, где данный фон будет востребован и они не будут ограничиваться только школьной тематикой.

Фон для сайта в тетрадную клеточку

Он выполнен в стиле разметки тетрадной клетки.

Как пример, вот блок у которого фон как школьная тетрадная клетка сделанная на CSS:

CSS-код

.kletka {
	background: linear-gradient( #bbb, transparent 1px), linear-gradient( 90deg, #bbb, transparent 1px);
	background-size: 20px 20px;
	background-position: center center;
}

Чтобы размещать на таком фоне текст и при этом он аккуратно вписывался в строки, то здесь нужно индивидуально проработать над такими свойствами как font-size и line-height, которые отвечают за размер шрифта и межстрочный интервал соответственно.

Клетка с полями

Если нам нужна полная имитация традиционного тетрадного листика в клеточку, то мы можем добавить в наш css-фон поле.

Будет это выглядеть так:

CSS-код клетки с полем:

.kletka-pole {
    background-image: linear-gradient(90deg, transparent 81px, #ED82AD 81px, #ED82AD 84px, transparent 84px), linear-gradient(#bbb 1px, transparent 0px), linear-gradient(90deg, #bbb 1px, transparent 0px);
    background-size: 100% 100%, 20px 20px, 20px 20px;
    background-position: 0 0, -1px -1px, -1px 1px;
}

Поле с правой стороны

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

Например: width: 768px или max-width: 700px;

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

При max-width же можно задать поле исходя из максимального размера блока и тогда при уменьшении экрана сайт будет адаптироваться правильно, но вод само поле будет уходить в зону невидимости (его не будет видно).

Как пример у меня блок ниже имеет максимальную ширину 700px и поле при максимальных экранах отображается корректно. Если экран уменьшить - то блок останется просто без поля.

Демка:

CSS-код для блока с полем справа:

.kletka-pole-right {
    background-image: linear-gradient(90deg,transparent 735px,#ED82AD 735px,#ED82AD 738px,transparent 738px),linear-gradient(#bbb 1px,transparent 0px),linear-gradient(90deg,#bbb 1px,transparent 0px);
    background-size: 100% 100%, 20px 20px, 20px 20px;
    background-position: 0 0, -1px -1px, -1px 1px;
}

Поэтому здесь нужен индивидуальный подход к каждому случаю.

Фон в клеточку с текстом

Приведённые выше примеры с фоном в тетрадную клетку можно использовать как фон сайта или как фон для отдельных блоков сайтов. Давайте я покажу вам ниже пример с реализацией фона в блоке:

HTML код примера фона в клеточку с текстом

<div class="tetradka">
  <div class="tetradka__body">
    <p><strong>Задача:</strong> найдите длину гиппотенузы прямоугольного треугольника, если катеты равны 3 и 4 см.</p>
    <p>c² = a² + b²</p>
    <p>c = √(a² + b²)</p>
    <p>c = √(3² + 4²)</p>
    <p>c = √(9 + 16)</p>
    <p>c = √25</p>
    <p>c = 5</p>
    <p><strong>Ответ:</strong> гиппотенуза треугольника равна 5 см</p>
  </div>
</div>

CSS стили:

.tetradka {
    width: 96%;
	padding-left: 25px;
	padding-top: 17px;
    background-image: linear-gradient(90deg,transparent 708px,#ED82AD 710px,#ED82AD 711px,transparent 712px),linear-gradient(#e9e9e9 1px,transparent 0px),linear-gradient(90deg,#e9e9e9 1px,transparent 0px);
    background-size: 100% 100%, 20px 20px, 20px 20px;
    background-position: 0 0,-1px -1px,-1px 1px;
    font-family: monospace;
    color: #8a2be2;
    font-size: 19px;
    line-height: 24px;
	font-style: italic;
	border: solid 1px #8a8a8a;
}

.tetradka__body {
    max-width: 587px;
}

Если у вас есть вопросы или возникают сложности - не стесняйтесь и пишите в комментарии.