Создание трехмерных очков с использованием режимов наложения CSS
12 июля 2016 | Опубликовано в css | 1 Комментарий »
Нас заинтересовала демонстрация трехмерных очков с использованием режимов наложения CSS, созданная Bennett Feely. Вдохновившись его творением, мы решили создать свой вариант, используя настоящую стереоскопическую фотографию.
Демонстрация трехмерных очков от Bennett Feely
Хотя эта демонстрация сама по себе не позволяет увидеть трехмерное изображение, это происходит в голове с помощью очков, которые находятся гораздо ближе к глазам, но она показывает еще одну важную особенность режима умножения.
Разметка и стили
Очки, созданные с помощью SVG, — это путь и две прямоугольных «линзы» с закругленными углами, находящиеся вместе со стереоскопической фотографией, сделанной по методу анаглифа, в блоке:
<div id="dino"> <img src="saguaro-national-park.jpg" alt> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 817 296" id="glasses"> <path fill="#E5F2E7" d="M795.4,7H18.6C12.2,7,7,12.2,7 …" /> <rect x="57.5" y="48.1" fill="#f00" width="254.5" height="186.9" rx="26" ry="26" /> <rect x="493" y="48.1" fill="#0ff" width="254.5" height="186.9" rx="26" ry="26" /> </svg> </div>
Элементам заданы стили CSS:
#saguaro { position: relative; overflow: hidden; } #saguaro img { width: 100%; } #glasses { width: 60%; position: absolute; pointer-events: none; -ms-touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; } #glasses rect { mix-blend-mode: multiply; }
Обратите внимание на использование свойства pointer-events: none у элемента с идентификатором #glasses: хотя этот способ не всегда работает, он часто позволяет уменьшить или совсем убрать «лаги» (заметные паузы в окне браузера между перерисовками). Если не следить за нажатиями на элемент, перемещение обычно происходит более плавно. Остальные свойства этого элемента отключают попытки мобильных устройств запрашивать подтверждение на копирование, если элемента касаются дольше, чем одна-две секунды.
Еще нужен небольшой фрагмент кода JavaScript, чтобы следить за перемещением очков с помощью мыши или прикосновений:
var saguaro = document.getElementById("saguaro"), glasses = document.getElementById("glasses"), boundingRect = saguaro.getBoundingClientRect(); saguaro.addEventListener( "mousemove", moveGlasses, false); saguaro.addEventListener( "touchstart", moveGlasses, false); saguaro.addEventListener( "touchmove", moveGlasses, false); function moveGlasses(e) { glasses.style.left = (e.pageX - boundingRect.left)+"px"; glasses.style.top = (e.pageY - boundingRect.top)+"px"; }
Эффект умножения
Обратите внимание, что режим умножения на прямоугольных линзах фактически отсекает естественный цвет каждой линзы: фильтр умножения на левой линзе пропускает только не красные части фотографии, а на правой — показывает только не голубые. Вы можете увидеть это сами, быстро передвигая трехмерные очки вперед-назад над одной точкой на фотографии в демонстрации.
Из-за того, что эти цвета разнесены в изображении, визуальное объединение создает впечатление трехмерности и глубины, как минимум при просмотре через очки с подходящими линзами.
Важно, что красный и голубой — дополняющие цвета: они противоположны друг другу на цветовой модели HSL. Наведение любого из них на белый цвет даст черный, как и наложение их друг на друга.
Пересечение голубого и красного элементов в режиме наложения умножения
Использованы фотографии Koala MeatPie и Министерства внутренних дел США, лицензированные по лицензии 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