В статье мы создадим страницу тетрадного листа похожую на линейку с помощью CSS, где можно будет разместить описание или текст. Наверное, многие помнят блокнот, который мы здесь создадим в реальных элементах, где будет красная линия, находящаяся в вертикальном положении. Но я думаю, самое главное, что вы можете написать на листе бумаги, где все знаки должны быть расположены правильно. Здесь мы будем стилизовать в основном четыре компонента, это бумага, вертикальная линия, синие горизонтальные линии и сам текст.
Что можно вывести на отдельную страницу тематическое описание или поставить на главную, так как по яркости этот стиль не уступает никакому. Как было сказано, многим в большинстве случаев попадался текст, написанный на линованной бумаге, что можно наблюдать кое-где, где произведение придает оригинальное очарование уникальности произведения. Разлинованная бумага — популярный фоновый эффект, который мы создадим в этом посте с помощью CSS.
Вы также можете использовать изображение из линейки вместо того, чтобы создавать эти линии с помощью CSS, но это не будет хорошим вариантом, поскольку использование нескольких изображений займет больше места на сервере и увеличит время загрузки вашего сайта. Поэтому всегда лучше не использовать изображения, если вы можете выполнить ту же задачу с помощью кодирования.
Создание стиля блокнота с помощью HTML + CSS
Все проверяется и выглядит так после установки, где после установки вы можете самостоятельно отображать все по той цветовой схеме, которая вам нужна или как это лучше всего смотрится на вашем сайте, ведь редакция на CSS, что не очень сложно если ты немного знаешь.
Установочный процесс:
HTML
<div id="dolekonal-suinesed">
<div id="depenukes">
<div id="cumicebang">
Здесь можно написать мануал, а также сделать оригинальное описание в тематическом наклонение сайта.
</div>
</div>
</div>CSS
#dolekonal-suinesed {
width: 715px;
height: 583px;
position: relative;
margin: 18px auto;
padding-top: 35px;
padding-bottom: 35px;
background-color: #f7f7f7;
box-shadow: 0px 0px 5px 0px #827d7d;
}/* укладка красной вертикальной линии */#dolekonal-suinesed::before {
content: »;
width: 2px;
height: 100%;
position: absolute;
top: 0;
left: 36px;
background—color: rgba(255,0,0,0.6);
}
#depenukes {
height: 100%;
background—image: repeating—linear—gradient(#f7f5f5 0px, #f9f8f8 24px, #107b7b 25px);
}
#cumicebang {
padding—top: 6px;
padding—left: 56px;
padding—right: 16px;
line—height: 25px;
font—family: ‘Dancing Script’, cursive;
font—size: 19px;
letter—spacing: 1px;
word—spacing: 5px;
}
Если говорить про структуру, то здесь HTML состоит из div с id бумагой, которая сделает нашу тетрадь бумажной. Внутри него есть еще один div с шаблоном id, который будет содержать все строки в документе. Внутри этого div есть еще один div с идентификатором контента, где содержит текст, который будет написан на бумаге.
Высота элемента div с идентификатором шаблона устанавливается равной 100% высоты его родителя. Там, где установлен DIV с идентификатором бумаги, задаются верхнее и нижнее поля, чтобы в документе были пустые места над и под строками.
Горизонтальные линии создаются с помощью функции класса. Где также DIV с идентификатором шаблона настроен на повторяющийся линейный градиент, это белый 0px 24px, белый, бирюзовый 25px, который создает повторяющийся узор высотой 25 px, с белым цветом для высоты 24 пикселя и синим цвет высотой 1 пиксель.