Полутоновые узоры, эти интенсивные точечные изображения, являются краеугольным камнем печати и веб-дизайна. Хотя традиционно используется как средство для точного воспроизведения печатных изображений, он также стал его собственным стилем.
Сегодня полутоновые узоры используются в качестве фона или сюрреалистических спецэффектов для изображений. С продвижением CSS и JavaScript дизайнеры также нашли способ интегрировать эффект в код. Результаты могут быть удивительными.
Давайте посмотрим на некоторые примеры того, как код реализует полутона. Как вы увидите, есть несколько фотографий и техник, чтобы донести эту классическую модель до Интернета.
Центральный баннер фотографии вашей кошки (или не кошки)
Это, вероятно, самая известная реализация полутонов. Он состоит из добавления эффекта к существующей фотографии (в данном случае, кошке). Этот раздел также может быть полностью настроен. Например, вы можете заменить точки эмодзи или текстом. Вы также можете изменить размер каждого элемента. И да, вы можете изменить кошку с лицом, но почему?
См. Ycw, средняя тональная ручка
Нажмите для полутонов
Вот очень креативное приложение полутонов. Эта кнопка отображает тонкий узор с немного более сильным эффектом прокрутки. Однако нажатие активирует высококонтрастный рисунок, который бросается в глаза.
См. Пуховую полутоновую кнопку Тейлор Хант
Раскрытие секретов
Эффект фонарика стал очень популярным в последнее время. Здесь он сочетается с полутоновым рисунком, который «осветляет» скрытый текст. Это забавное взаимодействие, и шаблон приносит немного ретро / брутализма.
Посмотрите на ручку Откройте для себя скрытый текст Тайлера Дюрретта
Возьмите более тонкий тон
Нет закона, что полузащитники должны быть высокими, и этот отрывок является доказательством. Эффекты полутонов прекрасно сочетаются с рисунком штриховки. Результат – нечто уникальное и тонкое. Бонусные баллы за создание с чистым CSS.
См. Девин Прайс Полутоновая ручка
Удалить эффекты прокрутки
Вот отрывок, похожий на фантастический боевик. Синяя полутоновая фотография на черном фоне смотрит на нас через экран. Наведите указатель мыши на него, и часть изображения потемнеет.
Смотрите ручку на полпути в обход Тео Гила
Параллакс Санс БС
Эта фотография является еще одним сюрреалистическим изображением эффекта и показывает удивительное разнообразие цветных точек. При перемещении курсора создается эффект трехмерного параллакса, который раскрывает тонкий контур, нависающий над основным изображением. Дополнительное измерение делает эффект еще более интересным.
Посмотреть Эрик Джексон Вуд Параллакс Полутоновая Шариковая Ручка
Дуэт всего
Благодаря режимам наложения CSS почти все может быть обеспечено эффектами полутонов. В этом примере, хорошая смесь добавляется к нескольким фотографиям. Когда вы наводите курсор мыши на один из них, отображается его истинный цвет. Это очень практичное приложение, которое привлекательно, но не преувеличено.
См. CSS-карандаш в режиме смешивания Jos van Weesel
Больше, чем средняя тень текста.
Давайте закончим еще одним делом для практического использования. Здесь у нас есть простое изображение карты, которое использует смещение. В первых двух примерах используется сплошной цветовой тон, который хорошо работает. Тем не менее, второй набор имеет полутоновый рисунок, который придает ему более художественный вид.
Увидеть пером Отметить линии, тени + эффекты полутонов
Стандарт инноваций.
Лучшее в сочетании кода с классическим эффектом изображения состоит в том, что он открывает целый новый мир возможностей. Конечно, мы можем добавить полутоновый узор к элементу дизайна, но зачем останавливаться на достигнутом?
Дизайнеры находят новые умные применения для этих целей. В приведенных выше фрагментах кода средний тон используется традиционным и инновационным способом. Старые ограничения существуют, только если мы хотим, чтобы они существовали.
Хотите увидеть больше примеров полутонов? Смотрите нашу коллекцию CodePen для других творческих целей.
