Визуальный эффект полутонов — построение изображения из крошечных цветных точек — легко создать на веб-странице, используя SVG. Способ, показанный здесь, использует значение свойства множественных фоновых изображений у элемента блока: один повторяющийся решетчатый узор, использованный в нашем уроке «Создание фоновых изображений в стиле поп-арт с помощью SVG и режимов наложения», только с меньшим размером решетки, объединенный с битовым изображением. Также добавлен переход с использованием черно-белого фильтра, чтобы обесцветить цветное изображение.

Разметка и код CSS

Возьмем пустой элемент блока:

<div id="silkscreen"></div>

Который будет поддерживаться открытым с помощью свойства нижнего внутреннего отступа, примерно как в способе, использованном для создания адаптивного дизайна для встроенных видео с сайта Youtube.

Блоку заданы повторяющиеся множественные фоновые изображения и фильтр:

div#silkscreen {
        background: url(silkscreen.svg), url(lotus.jpg);
        padding-bottom: 64%;
        background-size:4px 4px, 100%;
        background-repeat: repeat, no-repeat;
        filter: grayscale(1);
        transition: 1.3s;
}
div#silkscreen:hover {
        filter: none;
}

Создание шахматной доски с использованием SVG

Создание шахматной доски с использованием SVG для эффекта полутонов достигается с помощью всего двух диагонально расположенных элементов квадратов:

<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
    <g fill="rgba(0,0,0,0.5)">
        <rect width="25" height="25" />
        <rect x="25" y="25" width="25" height="25" />
    </g>
</svg>

Что создаст подобный узор:

Сжав узор выше с помощью свойства размера фона, можно просто и быстро создать очень мелкозернистый эффект полутонов поверх любого изображения:

Подобный способ использовал Ash Andrien для создания фонового эффекта полутонов как в комиксах для веб-страниц.

Использована фотография P Lam Khun, лицензированное по лицензии Creative Commons.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Генератор фоновых узоров SVG из пересекающихся кругов
• Создание базового кода CSS для изображений
• Фоновые узоры в виде чешуи и шестиугольников с использованием SVG