Стиль тетрадного листа помощью CSS
 | |
| В статье создадим похожую по стилистике странице тетрадного листа в линейку при помощи CSS, где можно будет разместить описание или текст. Вероятно многие помнят тетради для прописывания, которую здесь создадим в реальных элементах, где будет красная черта, что вертикальном положении. Но главным считаю, что на листе можно писать, где все знаки расположатся корректно. Здесь будем стилизовать в основном четыре компонента, это бумагу, вертикальную линию, синие горизонтальные линии и сам текст. Что можно вывести на отдельную страницу тематическое описание или поставить на главную, так как по своей яркости такой стиль мало кому уступает. Как было сказано, что в большинстве многие сталкивались с текстом, написанным на линованной бумаге, что можно наблюдать на некоторых сайтах, где дает свой оригинальный шарм в уникальности произведение. Lined-paper - это популярный фоновый эффект, который мы будем создавать в этом посте с использованием 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 в пиксель. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 4 | |
|
| |
