Одна з більшості неоціненних функцій Photoshop - це режими змішування. Режими змішування беруть два пікселя, розташовані один на одному, і комбінують їх по-різному, наприклад темніший кольоровий режим змішування просто представить темніші з двох пікселів. Коли змішуються цілі зображення, то режими змішування можуть призвести приголомшливий ефект.
Тепер таке-ж можна зробити динамічно за допомогою CSS3.
підтримка браузерами
На даний момент підтримка браузерами властивостей фонового режиму змішування CSS поступово поліпшується. Більш ранні версії браузерів б зажадали префіксів або активація експериментальних функцій. незрозуміло ще з підтримки IE, але оскільки режими змішування - прогресивне поліпшення, то можна почати розглядати їх наприклад на інших браузерах (оновлених до останніх версій).
Як використовувати фоновий режим змішування
В CSS3 є багато опцій режиму змішування, але найкориснішим в наших цілях є фоновий режим змішування. Це властивість дозволяє нам змішувати два зображення або зображення і колір фону.
Ось код який нам буде потрібно:
І ось наш основний CSS:
Ми тепер готові додати режими змішування.
Щоб зробити це, ми збираємося додати інший клас нашого div, наприклад "multiply":
І потім ми створимо друге правило стилю:
Множення - примножує основний піксель на колір змішування, що призводить до більш темного кольору. Множення на чорний - результат чорного кольору і множення білого кольору - незмінне зображення.
screen примножує інверсію квітів на два пікселя. screen - протилежність множення і використовуючи білий фон призведе до білого зображення, а чорний фон залишить зображення незмінним.
Накладення (overlay) - складний режим змішування. Множення залежить від основного кольору: легкі кольори стають легше, темні кольори стають темнішими.
Затемнення (darken) затемнює зображення. Дивиться на два перекриваються пікселя і вибирає більш темні з двох.
Протилежність затемненими -свеченіе (lighten) висвітлює зображення, порівнюючи два перекриваються пікселя і вибирає той який світліше з двох.
Сolor-dodge
Колірний баланс (color-dodge) прикрашає основний колір, щоб відобразити колір змішування при цьому зменшуючи контраст.
Color-burn
Color-burn - противагу color-dodge - затемнює основний колір, що призводить до збільшення контрасту.
Hard-light
Жорсткій світло (hard-light) або примножує або екранує кольори залежно від кольору змішування. Якщо змішання буде легше, ніж 50% -й сірий, то зображення буде висвітлюватися, інакше буде затемнено. Це - відмінний спосіб поліпшити виділення і тіні в зображенні.
Soft-light
М'яке світло (soft-light) подібний до жорсткого світу. але замість того, щоб помножити або екранувати кольору, використовується для більш тонкого ефекту.
Difference
Різниця (difference) порівнює два перекриваються пікселя і віднімає колір з більшою яскравістю з іншого.