Школьная тетрадка на чистом css
Так как у нас учебный сайт, то в некоторых случаях для придания материалу привычного для школьников вида, мы будем использовать имитацию школьной тетрадки. Для этого у нас в запасе есть целый набор css-стилей, в том числе и с использованием графических элементов. Здесь же приведем пример создания стилизации под лист школьной тетрадки на чистом css. Пример текста на тетрадном листе вы можете видеть ниже.
И в завершение остается привести css-код, использованный здесь для создания фона в виде тетрадного листа.
Этот тетрадный лист можно использовать на сайте с адаптивным шаблоном. Он имеет высоту, которая подстраивается под размер текста, размещенного в контейнере тетрадного листа. Вы можете легко настроить нужный вам цвет клеточек и рамки, в зависимости от цвета вашего шрифта и основного фона страницы. Также можно настроить межстрочное расстояние так, чтобы новая строка совпадала с клеточками, хотя это и не обязательно.
Прелесть использованного здесь css-стиля в том, что цвет тетрадки легко поменять. Например, как вам вариант, приведенный ниже?
Этот текст читается значительно лучше, чем текст, приведенный выше. Но, текст выше заставляет обратить на себя внимание - он явно ярче и заставляет задержаться при чтении.
Продолжим эксперименты с подбором подходящего цвета и на этот раз вот такой вариант:
Цвет тетрадки здесь хоть и похож на предыдущий, но текст явно читается четче. Текст как бы выдвигается на передний план, хотя на первый взгляд это и не заметно. Вы можете подобрать для вашего сайта именно тот вариант, который гармонирует с остальными цветами на сайте.
Продолжаем эксперименты с цветом. Вот вам очень синяя тетрадка с красным текстом для разнообразия.
Очевидно, фоновый цвет слишком яркий. Надо правильно подбирать сочетание цвета шрифта и фона. Скорее всего такой вариант мало кого устроит. Это всего лишь пример не правильного цветового решения.
Идем дальше благо количество цветов у нас почти бесконечно.
Ну вот, кажется для имитации школьной тетрадки почти идеальный вариант. Тест читается, клеточки внимание не отвлекают, акцент на тексте, а фоновая тетрадка вписывается в цветовую гамму нашего сайта. Согласитесь - отличный вариант.
.grid-gradient {
background: linear-gradient( mediumvioletred, transparent 1px ),
linear-gradient( 90deg, mediumvioletred, transparent 1px );
background-size: 10px 10px; background-position: center center;
border: 2px solid mediumvioletred; }
Похожие публикации: