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;
}

 

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


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

  Обязательно постараюсь вам помочь

Авторизация

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