Знает ли кто-нибудь хороший способ репликации режима многослойного Photoshop, используя изображение или CSS?
Я работаю над проектом, у которого есть миниатюры, которые получают наложение цвета, когда вы наводите на них курсор, но дизайнер использовал набор слоев, чтобы размножаться, и я не могу понять, как его создать в Интернете.
Лучшее, что я придумал, это либо использование rgba, либо прозрачного png, но даже тогда оно выглядит не так.
Появляются новые свойства CSS для выполнения этой вещи: blend-mode и background-blend-mode.
В настоящее время вы не сможете использовать их в какой-либо производственной среде, так как они очень новы и в настоящее время поддерживаются только Chrome Canary (экспериментальный веб-браузер) и Webkit Nightly.
Эти свойства настроены так, чтобы работать практически так же, как и режимы смешивания фотошоп, и позволяют устанавливать различные режимы в качестве значений этих свойств, таких как overlay, screen, lighten, color-dodge, и, конечно, multiply.. среди прочих.
blend-mode позволит изображения (и, возможно, контент? Я ничего не слышал, чтобы предположить, что на данный момент.), слоистые друг над другом, чтобы применить этот эффект смешивания.
background-blend-mode будет очень похожим, но будет предназначен для фоновых изображений (с использованием background или background-image), а не фактических элементов изображения.
EDIT: Следующий раздел становится немного неуместным по мере роста поддержки браузера. Проверьте этот график, чтобы посмотреть, какие браузеры поддерживают это: http://caniuse.com/#feat=css-backgroundblendmode
Если у вас установлена последняя версия Chrome на вашем компьютере, вы можете увидеть эти стили в использовании, включив некоторые флаги в своем браузере (просто введите их в адресную строку:)
chrome://flags/#enable-experimental-web-platform-features
chrome://flags/#enable-css-shaders
* note that the flags required for this might change at any time
Включите этих плохих парней, а затем просмотрите эту скрипку: http://jsfiddle.net/cqzJ5/ (Если стили правильно включены в вашем браузере, два изображения должны быть смешаны, чтобы сцена выглядела так, будто она находится под водой)
Хотя это, возможно, не самый законный ответ на текущий момент из-за почти полностью несуществующей поддержки этой функции, мы можем надеяться, что современные браузеры будут использовать эти свойства в ближайшем будущем, предоставляя нам действительно хорошее и простое решение к этой проблеме.
Некоторые дополнительные ресурсы чтения в режимах смешивания и свойства css:
Просто для записи этот парень разрабатывает библиотеку для этого. Я только что вошел в него во время исследования, еще не пробовал.
Простой с немного SVG:
<svg width="200" height="200" viewBox="10 10 280 280">
<filter id="multiply">
<feBlend mode="multiply"/>
</filter>
<image id="kitten" x="0" y="0" width="300" height="300" xlink:href="http://placekitten.com/300" />
</svg>
и некоторые CSS:
#kitten:hover {
filter:url(#multiply);
}
Скрипка: http://jsfiddle.net/7uCQQ/381/
Это возможно с 24.png - если вы знаете трюк.
В иллюстраторе вы можете экспортировать графику в формате 24.png, но это никогда не работает как умножение.
Я нашел.
работает так же, как умножение, когда z-index (ed) поверх изображения.
Нет таких возможностей. Единственные параметры компоновки, которые вы получаете, даже близки:
lighter режим компоновки на HTML5 <canvas> (который является a + b не a * b и имеет противоположный эффект для умножения)
min или subtract Compositor только в IE.
Ничего не реально.
В общем, вы не должны пытаться экспортировать Photoshop comps в виде слоев, но визуализировать их до одного непрозрачного изображения. Для опрокидывания вы можете сделать два изображения (одно для нормального состояния, одно для зависания) и обменять их между собой с помощью стиля CSS :hover, чтобы выбрать другое фоновое изображение, или, что лучше, поскольку он не требует предварительной загрузки и уменьшает HTTP-запросы - объединить оба изображения в одно и используйте background-image/background-position, чтобы отобразить правую часть этого изображения в каждом состоянии в качестве фонового изображения. ( "CSS спрайты" )
Недавно мне нужно было точно сделать то, что спросил ОП, поэтому я искал. Я нашел отличный способ воспроизвести эффект умножения, сделав прозрачный PNG в Photoshop.
Alt/Option + click на самой маске.Cmd/Ctrl + i, чтобы инвертировать только что вставленный слой.opacity маскируемого слоя, который мы создали.Все кредиты принадлежат Sojeong от https://superuser.com/questions/381704/multiply-blending-mode-to-png
Проверьте это: http://www.webdesign.org/photoshop/photoshop-basics/remove-white-using-channels.10545.html
Используя эти инструкции, я с большим успехом сделал водяной знак черно-белым изображением (чернилами в моем случае с черными и серыми на сплошном белом фоне) на темном фоне (дерево в моем случае). Существует практически никакой разницы с реальным фильтром Multiply Adobe.
Я использовал инструкции Photoshop, чтобы удалить белые из моего изображения, оставив только черные и серые на прозрачном фоне. Сохранение этого в PNG и размещение его на дереве в CSS/HTML по-прежнему выглядели намного хуже, чем многократно, но сильно уменьшая яркость PNG, разрешившего его (светлые серые выделялись раньше, делая его уродливым).
В общем, я рекомендую вам поиграть в Photoshop, реплицируя веб-ситуацию: полупрозрачный (без специального материала) слой поверх сплошного фона. Учебники, такие как выше, могут позволять воспроизводить многократные или другие причудливые эффекты.
Не уверен, что вам повезет. Насколько я знаю, это невозможно, даже если вы попытались интегрировать с ним некоторый продвинутый JavaScript.