Школьная тетрадь на SVG

Пора в школу!

Создадим два файла SVG - красную вертикальную линию и синие горизонтальные линии.

Красная вертикальная линия - задаём левый отступ. Файл red-line.svg:


<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
    <line x1="15" y1="0" x2="15" y2="16" stroke-thickness="2" stroke="rgba(220,0,0,0.3)" />
</svg>

Файл blue-line.svg для синих горизонтальных линий. Обратите внимание, что мы не используем viewBox и используем 100% для параметра x2 синей линии. Цвет задан в rgba, позволяя "размочить" фон.


<svg xmlns="http://www.w3.org/2000/svg">
    <line x1="0" y1="15" x2="100%" y2="15" stroke-thickness="2" stroke="rgba(0,0,220,0.3)" />
</svg>

Используем два созданных файла вместе.


body { 
    background-image: url(blue-line.svg), url(red-line.svg); 
    background-size: 100vw 1.5em, 32px 32px;
    background-repeat: repeat, repeat-y;
    background-position: 0 0, 64px 0;
    font: 200%/1.5 Bradley Hand, Segoe Script, cursive; 
    margin-left: 120px; margin-right: 100px; 
}

background-size синей линии использует 100% ширины документа и высоту 1.5em.

Горизонтальные линии повторяются по горизонтали и вертикали. Красная линия только по вертикали.

Синяя линия начинается в левого верхнего угла, красная линия имеет отступ 64 пикселя слева.

Шрифт использует первый параметр для размера шрифта, второй - его высота, которая соответствует высоте, заданной в background-size.

Пример полностью адаптивный при увеличении или уменьшении размеров страницы.

Для демонстрации ограничимся контейнером.

Сочинение
Как я провёл лето

Можете подгонять различные настройки под себя, чтобы было красиво.

Вернуться в раздел SVG в качестве фонового рисунка.

Реклама