Создание эффекта полутонов с использованием SVG
2 января 2018 | Опубликовано в css | Нет комментариев »
Визуальный эффект полутонов — построение изображения из крошечных цветных точек — легко создать на веб-странице, используя 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
Перевод — Дежурка
Смотрите также:
Оставить ответ
Похожие статьи
- Использование множественных фоновых изображений CSS: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
550
- Насколько важно сегодня использовать Web Safe цвета?
539
- 20 наборов кистей для Фотошопа, которые вам пригодятся
531
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- 30 примеров фрактального искусства
191