Inter-Net.PRO
css kletka

  Все мы понимаем, что фоны и градиенты на 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 615px, #ED82AD 615px, #ED82AD 618px, transparent 618px), 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;
}

 

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


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

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

  Задача: найдите длину гиппотенузы прямоугольного треугольника, если катеты равны 3 и 4 см.

c² = a² + b²

c = √(a² + b²)

c = √(3² + 4²)

c = √(9 + 16)

c = √25

c = 5

Ответ: гиппотенуза треугольника равна 5 см

 

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

<div class="tetradka">
  <div class="tetradka__body">
    <p>&nbsp; <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%;
    height: 370px;
	padding-left: 25px;
	padding-top: 17px;
    background-image: linear-gradient(90deg,transparent 615px,#ED82AD 615px,#ED82AD 618px,transparent 618px),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: 32px;
	font-style: italic;
	border: solid 1px #8a8a8a;
}

.tetradka__body {
    max-width: 587px;
}

 

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

 

Войдите чтобы комментировать

Авторизация

Войти через соцсети: