До зображень на веб-сторінці можна застосовувати деякі графічні ефекти.

Наприклад, кілька зображень можна сумістити, за принципом, схожим на режими накладання шарів у Photoshop.

Із цих початкових зображень можна отримати:

за допомогою такого стилю: 

background-image: url(файл першого зображення), url(файл другого зображення);
background-color: orange;
background-blend-mode: screen;
height:200px; width:300px;
background-size: cover;

Варіантів накладання background-blend-mode є досить багато, їх можна комбінувати, записуючи черз кому: normal (без ефектів), multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color and luminosity. 

background-image: url(файл першого зображення), url(файл другого зображення);
background-blend-mode: lighten;
height:200px; width:300px;
background-size: cover;

background-image: url(файл першого зображення);
background-color: #FF3399;
background-blend-mode: luminosity;
height:200px; width:300px;
background-size: cover;

background-image: url(файл першого зображення), url(файл другого зображення);
background-blend-mode: screen;
height:200px; width:300px;
background-size: cover;

background-image: url(файл першого зображення), url(файл другого зображення);
background-blend-mode: color-burn;
height:200px; width:300px;
background-size: cover;


Дуже цікавим може бути накладання не лише цілих зображень, але й тексту чи блоків, для яких потрібно налаштувати стиль mix-blend-mode.

Happy New Year 

mix-blend-mode: exclusion; color: white; top: 20px; left:20px; position: relative;

Happy New Year 

mix-blend-mode: luminosity; top: 20px; left:20px; position: relative;

Happy New Year 

<div style="mix-blend-mode: luminosity; background-color: red; width: 250px;  height: 50px; top:20px;  position: relative;">
<h1 style="color:yellow; mix-blend-mode: screen;">  Happy New Year  </h1>
</div>

Happy New Year

 
mix-blend-mode: difference; background-color: grey; color:black; position: relative; top:50px; text-align:center; text-transform: uppercase;
Новий
веб
дизайн 
<div style="color: red; height:200px; width:300px; top: 10px; left:20px; position: relative;  font-size: 47px; font-weight: bold; font-family: 'Open Sans';"> Новий
  <div style="color:green;  left:10px; position: relative; mix-blend-mode:difference;"> веб
    <div style="color: blue; left:10px; position: relative; mix-blend-mode:multiply;"> дизайн </div>
</div>
</div>


Last modified: Sunday, 27 August 2023, 11:34 AM