Кодинг
★ Рубрика: Кодинг
★ Тема: CSS

Школьная тетрадка на чистом 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; }
Здесь мы последовательно сверху вниз использовали следующие цвета: mediumvioletred, MediumSeaGreen, MediumAquamarine, MediumBlue и окончательный вариант - LightSteelBlue. Вы можете экспериментировать.
 Похожие публикации: CSS

Войдите, чтобы добавить Ваш ответ. [ Регистрация | Вход ]