» »

Стиль тетрадного листа помощью CSS

Стиль тетрадного листа помощью CSS

В статье создадим похожую по стилистике странице тетрадного листа в линейку при помощи CSS, где можно будет разместить описание или текст. Вероятно многие помнят тетради для прописывания, которую здесь создадим в реальных элементах, где будет красная черта, что вертикальном положении. Но главным считаю, что на листе можно писать, где все знаки расположатся корректно. Здесь будем стилизовать в основном четыре компонента, это бумагу, вертикальную линию, синие горизонтальные линии и сам текст.

Что можно вывести на отдельную страницу тематическое описание или поставить на главную, так как по своей яркости такой стиль мало кому уступает. Как было сказано, что в большинстве многие сталкивались с текстом, написанным на линованной бумаге, что можно наблюдать на некоторых сайтах, где дает свой оригинальный шарм в уникальности произведение. Lined-paper - это популярный фоновый эффект, который мы будем создавать в этом посте с использованием CSS.

Также можете использовать изображение из линейки вместо создания этих строк с помощью CSS, но это не будет хорошим вариантом, поскольку использование большего количества изображений займет больше места на сервере и увеличит время загрузки вашей веб-страницы. Поэтому всегда лучше не использовать изображения, если вы можете выполнить ту же задачу путем кодирования.

Создаем стиль тетрадного листа на HTML + CSS


Все проверено, и так после установки выглядит, где после установки можете самостоятельно все вывести по цветовой гамме, как вам нужно или как лучше смотрится на вашей интернет площадке, ведь редакция идет в 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 в пиксель.

Демонстрация
2019-07-14 Загрузок: 1 Просмотров: 261 Комментарий: (2)

Поделиться в социальных сетях

Материал разместил

Комментарий: 2
-SAM-
-SAM- 2019-07-14 03:231
+2
Здесь представлен стиль в линейку, кому нужен в клетку - читаем.
Пожалуй, не всегда подходит делать так фон вместо картинки, поскольку в старых версиях браузеров свойства не поддерживаются... то есть картинкой в качестве заднего фона будет надёжнее и кроссбраузерно. Допустим, вот на ZorNet (как и на многих сайтах) используется такой стиль оформления для CODE, что тоже можно было бы сделать на чистом CSS3, но не стоит по выше изложенной причине.
Kosten
Kosten 2019-07-16 18:232
+1
Здесь немного отличается, в том, что можно написать, и главное все в строку будет, но как настроить, можно шире, а значит знаки переносить.
avatar