{"id":289339,"date":"2018-09-13T13:05:02","date_gmt":"2018-09-13T09:05:02","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=289339"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=289339","title":{"rendered":"\u0423\u043b\u0443\u0447\u0448\u0435\u043d\u043d\u044b\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0441 \u0440\u0435\u0436\u0438\u043c\u043e\u043c \u0441\u043c\u0435\u0448\u0438\u0432\u0430\u043d\u0438\u044f \u0444\u043e\u043d\u043e\u0432\u044b\u0445 \u0441\u043b\u043e\u0435\u0432 \u0432 CSS"},"content":{"rendered":"\n<div class=\"post__text post__text-html js-mediator-article\">\u0415\u0441\u043b\u0438 \u043e\u0434\u043d\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u0430 \u0437\u0430\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u0435\u0442 \u0442\u044b\u0441\u044f\u0447\u0438 \u0441\u043b\u043e\u0432, \u0442\u043e \u0441\u043c\u0435\u0448\u0435\u043d\u0438\u0435 \u0434\u0432\u0443\u0445 \u043a\u0430\u0440\u0442\u0438\u043d \u0437\u0430\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u0435\u0442 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u043e\u043b\u044c\u0448\u0435\u0433\u043e. \u0422\u043e\u0447\u043d\u043e \u0442\u0430\u043a \u0436\u0435, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0434\u0438\u0437\u0430\u0439\u043d\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0441 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0441\u043c\u0435\u0448\u0438\u0432\u0430\u043d\u0438\u044f \u0441\u043b\u043e\u0435\u0432 \u0432 CSS \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u043e\u043b\u044c\u0448\u0435, \u0447\u0435\u043c \u0432\u044b \u0434\u0443\u043c\u0430\u0435\u0442\u0435.<\/p>\n<p>  \u041a\u043e\u0433\u0434\u0430 \u0432\u044b \u0441\u043b\u044b\u0448\u0438\u0442\u0435 \u043e\u0431\u0441\u0443\u0436\u0434\u0435\u043d\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 <b>CSS Blend Modes<\/b>, \u0442\u043e \u043e\u0431\u044b\u0447\u043d\u043e \u0440\u0435\u0447\u044c \u0438\u0434\u0435\u0442 \u043e \u0442\u0440\u0435\u0445 \u043d\u043e\u0432\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u0445 CSS, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0445\u043e\u0440\u043e\u0448\u0443\u044e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0432 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445.<\/p>\n<p>  \u0412\u043e\u0442 \u044d\u0442\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430:<\/p>\n<ul>\n<li><code>background-blend-mode<\/code> \u2014 \u0434\u043b\u044f \u0441\u043c\u0435\u0448\u0438\u0432\u0430\u043d\u0438\u044f \u0444\u043e\u043d\u043e\u0432\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u0432 \u0438 \u0446\u0432\u0435\u0442\u043e\u0432 \u0444\u043e\u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432;<\/li>\n<li><code>mix-blend-mode<\/code> \u2014 \u0434\u043b\u044f \u0441\u043c\u0435\u0448\u0438\u0432\u0430\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438;<\/li>\n<li><code>isolation<\/code> \u2013 \u043c\u0435\u043d\u0435\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 mix-blend-mode \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u0441\u043c\u0435\u0448\u0438\u0432\u0430\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.<\/li>\n<\/ul>\n<p>  <a href=\"https:\/\/habr.com\/company\/poiskvps\/blog\/423115#habracut\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/kd\/bt\/ao\/kdbtao0ibocxo310gxjf4ud605s.jpeg\"><\/a><\/p>\n<p>  \u041a\u0430\u043a \u0431\u044b \u0442\u043e \u043d\u0438 \u0431\u044b\u043b\u043e, \u044d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0441\u0432\u044f\u0449\u0435\u043d\u0430 <code>background-blend-mode<\/code>, \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0448\u0438\u0440\u043e\u043a\u043e\u0439 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439, \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u0430 \u0441\u0432\u043e\u0435\u043c \u0441\u0430\u0439\u0442\u0435 \u043f\u0440\u0438\u0432\u043b\u0435\u043a\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0444\u043e\u043d\u043e\u0432 \u0438 \u0444\u043e\u0442\u043e\u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043a\u043e\u0433\u0434\u0430-\u0442\u043e \u0431\u044b\u043b\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0432 Photoshop.<br \/>  <a name=\"habracut\"><\/a>  <\/p>\n<h3>\u041a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 CSS-\u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u0432 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 background-blend-mode<\/h3>\n<p>  CSS-\u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 <code>background<\/code>. \u0422\u0430\u043a\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043a\u0430\u043a <code>linear-gradient()<\/code>, <code>radial-gradient()<\/code>, <code>repeating-linear-gradient()<\/code> \u0438 <code>repeating-radial-gradient()<\/code> \u0438\u043c\u0435\u044e\u0442 \u0448\u0438\u0440\u043e\u043a\u0443\u044e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0438 \u0431\u043e\u043b\u0435\u0435 \u0441\u0442\u0440\u043e\u0433\u0438\u0439, \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445.<\/p>\n<p>  \u041d\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>background<\/code> \u043c\u043e\u0436\u0435\u0442 \u0434\u043e\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0430, \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044f \u0438\u0445 \u043f\u043e\u0432\u0435\u0440\u0445 \u0434\u0440\u0443\u0433 \u0434\u0440\u0443\u0433\u0430, \u0435\u0441\u043b\u0438 \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0438\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0447\u0435\u0440\u0435\u0437 \u0437\u0430\u043f\u044f\u0442\u0443\u044e. Lea Verou \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043b\u0430 <a href=\"http:\/\/lea.verou.me\/css3patterns\">\u0432\u043f\u0435\u0447\u0430\u0442\u043b\u044f\u044e\u0449\u0438\u0435 \u043e\u0431\u0440\u0430\u0437\u0446\u044b<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u0442\u043e\u0439 \u0442\u0435\u0445\u043d\u0438\u043a\u0438: \u043e\u0442 \u0448\u0430\u0445\u043c\u0430\u0442\u043d\u044b\u0445 \u0434\u043e\u0441\u043e\u043a \u0434\u043e \u043a\u0438\u0440\u043f\u0438\u0447\u0435\u0439 \u0438 \u0437\u0432\u0435\u0437\u0434.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/sj\/e8\/bs\/sje8bsh9iscujgosfod5smohnom.png\"><\/p>\n<p>  \u041d\u043e \u0441\u0435\u0439\u0447\u0430\u0441, \u043a\u043e\u0433\u0434\u0430 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>background-blend-mode<\/code>, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u043d\u043e\u0432\u044b\u0435 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u044b \u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u044b.<\/p>\n<h3>\u0421\u043f\u0435\u043a\u0442\u0440\u0430\u043b\u044c\u043d\u044b\u0439 \u0444\u043e\u043d<\/h3>\n<p>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u043b\u043e\u0436\u0438\u043c \u0442\u0440\u0438 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0430, \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0444\u043e\u043d \u0441 \u043f\u043e\u0447\u0442\u0438 \u043f\u043e\u043b\u043d\u044b\u043c \u0441\u043f\u0435\u043a\u0442\u0440\u043e\u043c \u0446\u0432\u0435\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u043d\u0430 \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0435.<\/p>\n<pre><code class=\"css\">.spectrum-background {     background:         linear-gradient(red, transparent),         linear-gradient(to top left, lime, transparent),         linear-gradient(to top right, blue, transparent);     background-blend-mode: screen; }<\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/er\/si\/ef\/ersiefxnakb4ebjiootjy4o_ag4.png\"><\/p>\n<p>  \u042d\u0442\u043e\u0442 \u044d\u0444\u0444\u0435\u043a\u0442 \u0440\u0430\u043d\u0435\u0435 \u0431\u044b\u043b \u0432\u043e\u0437\u043c\u043e\u0436\u0435\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0432\u0438\u0434\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438, \u0437\u0430\u043d\u0438\u043c\u0430\u0432\u0448\u0435\u0439 \u0434\u0435\u0441\u044f\u0442\u043a\u0438 \u043a\u0438\u043b\u043e\u0431\u0430\u0439\u0442. \u041d\u043e \u043c\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u043b\u0438 \u0435\u0433\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c \u043c\u0435\u043d\u0435\u0435 200 \u0431\u0430\u0439\u0442, \u043d\u0435 \u0433\u043e\u0432\u043e\u0440\u044f \u0443\u0436\u0435 \u043e\u0431 \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0438 HTTP-\u0437\u0430\u043f\u0440\u043e\u0441\u0430. <\/p>\n<h3>\u041a\u043b\u0435\u0442\u0447\u0430\u0442\u044b\u0439 \u0444\u043e\u043d<\/h3>\n<p>  \u041c\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u044b, \u0438\u043c\u0438\u0442\u0438\u0440\u0443\u044e\u0449\u0438\u0435 \u043a\u043b\u0435\u0442\u0447\u0430\u0442\u044b\u0439 \u043f\u043b\u0435\u0434, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0430 \u0438 <code>background-blend-mode<\/code>.<\/p>\n<pre><code class=\"css\">.plaid-background {     background:         repeating-linear-gradient(             -45deg,             transparent 0,             transparent 25%,             dodgerblue 0,             dodgerblue 50%        ),        repeating-linear-gradient(             45deg,             transparent 0,             transparent 25%,             tomato 0,             tomato 50%         ),         repeating-linear-gradient(             transparent 0,             transparent 25%,             gold 0,             gold 50%         ), white;     background-blend-mode: multiply;     background-size: 100px 100px; }<\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/wr\/fi\/be\/wrfibelqthphvv1xei5wldey134.png\"><\/p>\n<h3>\u0424\u043e\u043d \u0432 \u043a\u0440\u0443\u0436\u043e\u0447\u0435\u043a<\/h3>\n<p>  \u0412\u043e\u0442 \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u0444\u043e\u043d, \u0442\u0435\u043f\u0435\u0440\u044c \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0440\u0430\u0434\u0438\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0430: <\/p>\n<pre><code class=\"css\">.circles-background {     background:         radial-gradient(             khaki 40px,             transparent 0,             transparent 100%         ),         radial-gradient(             skyblue 40px,             transparent 0,             transparent 100%         ),         radial-gradient(             pink 40px,             transparent 0,             transparent 100%         ), snow;     background-blend-mode: multiply;     background-size: 100px 100px;     background-position: 0 0, 33px 33px, -33px -33px; }<\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/z-\/5j\/my\/z-5jmyea42njmlt9t7lrvbi-fhg.png\"><\/p>\n<h3>\u0411\u043e\u043b\u044c\u0448\u0435 \u0444\u043e\u043d\u043e\u0432\u044b\u0445 \u0440\u0438\u0441\u0443\u043d\u043a\u043e\u0432<\/h3>\n<p>  \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Yoksel \u0438 Una Kravets \u044f \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u043b <a href=\"https:\/\/bennettfeely.com\/gradients\">\u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044e \u0438\u0437 24 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432<\/a>, \u0441\u0434\u0435\u043b\u0430\u043d\u043d\u044b\u0445 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043c\u0435\u0448\u0438\u0432\u0430\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0434\u0435\u043b\u0430\u044e\u0442 \u0432\u0430\u0448 \u0441\u0430\u0439\u0442 \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u0438 \u043f\u0440\u0438\u0432\u043b\u0435\u043a\u0430\u0442\u0435\u043b\u044c\u043d\u0435\u0435.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/hw\/mo\/yd\/hwmoydqtcl9fe5qw1wm1x_ai3nk.png\"><\/p>\n<h3>\u0424\u043e\u0442\u043e\u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e background-blend-mode<\/h3>\n<p>  \u0425\u043e\u0442\u044f <code>background-image<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0444\u043e\u043a\u0443\u0441 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0442\u0430\u043a\u0438\u043c \u0436\u0435 \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0444\u043e\u043d\u043e\u0432\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 <code>url()<\/code>. \u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u0441\u043e\u0432\u043c\u0435\u0449\u0430\u0435\u043c \u044d\u0442\u043e \u0441 <code>background-blend-mode<\/code> \u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438 \u0432\u0440\u043e\u0434\u0435 <code>filter<\/code>, \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c\u0441\u044f \u0447\u0442\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435.<\/p>\n<h3>\u042d\u0444\u0444\u0435\u043a\u0442 \u043a\u0430\u0440\u0430\u043d\u0434\u0430\u0448\u043d\u043e\u0433\u043e \u043d\u0430\u0431\u0440\u043e\u0441\u043a\u0430<\/h3>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/qj\/o5\/cr\/qjo5crix3vtl31hjcl_ssfx3xeu.png\"><\/p>\n<p>  \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c CSS, \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u044e \u0441\u043b\u0435\u0432\u0430 \u043f\u043e\u0445\u043e\u0436\u0435\u0439 \u043d\u0430 \u043a\u0430\u0440\u0430\u043d\u0434\u0430\u0448\u043d\u044b\u0439 \u043d\u0430\u0431\u0440\u043e\u0441\u043e\u043a. \u041d\u0430\u043c \u043d\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u044f\u0442\u0441\u044f Photoshop, HTML5 canvas, WebGL, \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 Javascript. \u041f\u044f\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432 CSS \u2013 \u0432\u0441\u0435, \u0447\u0442\u043e \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f.<\/p>\n<p>  \u0425\u043e\u0442\u044f \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u0435 \u0431\u043b\u043e\u0447\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a <code>body<\/code>, <code>section<\/code>, <code>figure<\/code>, \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0442\u0430\u043a\u043e\u0439 HTML:<\/p>\n<pre><code class=\"xml\">&lt;div class=\u201dpencil-effect\u201d&gt;&lt;\/div&gt;<\/code><\/pre>\n<p>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u0447\u043d\u0435\u043c \u043c\u043e\u0434\u0435\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435. \u0417\u0430\u043c\u0435\u043d\u0438\u043c <code>chapel.jpg<\/code> \u043d\u0430 url \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435. \u041c\u044b \u0434\u0432\u0430\u0436\u0434\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0444\u043e\u043d\u043e\u0432\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043c \u0435\u0433\u043e \u0444\u043e\u043d\u043e\u0432\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440.<\/p>\n<pre><code class=\"css\">.pencil-effect {     background:         url(chapel.jpg),         url(chapel.jpg);     background-size: cover; }<\/code><\/pre>\n<p>  \u041d\u0438\u0436\u0435 \u043d\u0430 \u043f\u0435\u0440\u0432\u043e\u043c \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0448\u0430\u0433\u0430:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/jk\/8q\/ei\/jk8qeiratroxigduonfxfj0hscw.png\"><\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0440\u0435\u0436\u0438\u043c \u0441\u043c\u0435\u0448\u0438\u0432\u0430\u043d\u0438\u044f:<\/p>\n<pre><code class=\"css\">background-blend-mode: difference;<\/code><\/pre>\n<p>  \u041e \u043d\u0435\u0442, \u043a\u0443\u0434\u0430 \u0432\u0441\u0435 \u0434\u0435\u043b\u043e\u0441\u044c? \u0423 \u043d\u0430\u0441 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0441\u044f \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u0447\u0435\u0440\u043d\u044b\u0439 \u043a\u0432\u0430\u0434\u0440\u0430\u0442. \u0420\u0435\u0436\u0438\u043c \u0432\u044b\u0447\u0438\u0442\u0430\u043d\u0438\u044f \u0434\u043b\u044f \u0441\u043c\u0435\u0448\u0438\u0432\u0430\u043d\u0438\u044f \u0431\u0435\u0440\u0435\u0442 \u0434\u0432\u0430 \u0444\u043e\u043d\u0430 \u0438 \u043e\u0442\u043d\u0438\u043c\u0430\u0435\u0442 \u043f\u0438\u043a\u0441\u0435\u043b\u044c \u0437\u0430 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u043c \u0431\u043e\u043b\u0435\u0435 \u0442\u0435\u043c\u043d\u044b\u0439 \u0446\u0432\u0435\u0442 \u043e\u0434\u043d\u043e\u0433\u043e \u0444\u043e\u043d\u0430 \u0438\u0437 \u0431\u043e\u043b\u0435\u0435 \u0441\u0432\u0435\u0442\u043b\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430 \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u0444\u043e\u043d\u0430. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/n7\/nq\/py\/n7nqpyjvmvho-reskqpi0h_n0g0.png\"><\/p>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u044b \u0437\u0430\u043f\u0443\u0442\u0430\u043b\u0438\u0441\u044c \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e \u0441\u043b\u0443\u0447\u0438\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0441\u043c\u0435\u0441\u0442\u0438\u043c \u0434\u0432\u0430 \u0444\u043e\u043d\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>background-position<\/code> \u0438 <code>calc()<\/code>.<\/p>\n<pre><code class=\"css\">background-position:     calc(50% \u2014 1px) calc(50% \u2014 1px),     calc(50% + 1px) calc(50% + 1px);<\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/3b\/lp\/nr\/3blpnrkiy8ic26ii1v_hstyikpi.png\"><\/p>\n<p>  \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0437\u0430\u043f\u044f\u0442\u0443\u044e, \u043c\u044b \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0434\u0432\u0435 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u0444\u043e\u043d\u0430, \u043a\u0430\u0436\u0434\u0430\u044f \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043e\u0434\u043d\u043e\u0439 \u043a\u043e\u043f\u0438\u0438 \u0444\u043e\u043d\u043e\u0432\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u041f\u0435\u0440\u0432\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043c\u044b \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0435\u043c\u0441\u044f \u043e\u0442 \u0446\u0435\u043d\u0442\u0440\u0430 \u043f\u043e \u043e\u0441\u0438 \u0425 \u0432\u043b\u0435\u0432\u043e \u043d\u0430 \u043e\u0434\u0438\u043d \u043f\u0438\u043a\u0441\u0435\u043b\u044c \u0438 \u043e\u0442 \u0446\u0435\u043d\u0442\u0440\u0430 \u043f\u043e \u043e\u0441\u0438 Y \u0432\u0432\u0435\u0440\u0445 \u043d\u0430 \u043f\u0438\u043a\u0441\u0435\u043b\u044c. \u0414\u043b\u044f \u0432\u0442\u043e\u0440\u043e\u0439 \u043a\u043e\u043f\u0438\u0438 \u0444\u043e\u043d\u043e\u0432\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043c\u044b \u0434\u0435\u043b\u0430\u0435\u043c \u043f\u0440\u044f\u043c\u043e \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u043f\u043e\u043b\u043e\u0436\u043d\u043e\u0435, \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u044f \u0435\u0435 \u0432\u043d\u0438\u0437 \u0438 \u0432\u043f\u0440\u0430\u0432\u043e.<\/p>\n<p>  \u0423 \u043d\u0430\u0441 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438\u0441\u044c \u0434\u0432\u0430 \u0444\u043e\u043d\u043e\u0432\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043b\u0435\u0433\u043a\u0430 \u0441\u043c\u0435\u0449\u0435\u043d\u044b, \u043d\u043e \u0432\u0441\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u0430 \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0430 \u0432 \u043d\u0430\u0448\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435. \u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u0440\u0435\u0436\u0438\u043c \u0432\u044b\u0447\u0438\u0442\u0430\u043d\u0438\u044f \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u0432\u0430\u0435\u0442 \u0440\u0430\u0437\u043d\u0438\u0446\u0443 \u043c\u0435\u0436\u0434\u0443 \u0434\u0432\u0443\u043c\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438, \u0432\u0438\u0434\u043d\u044b \u043a\u0440\u0430\u044f \u043d\u0430 \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u0438. \u0417\u0434\u043e\u0440\u043e\u0432\u043e, \u043d\u0435 \u0442\u0430\u043a \u043b\u0438?<\/p>\n<p>  \u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>filter<\/code>, \u0447\u0442\u043e\u0431\u044b \u0438\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u044e \u0438 \u043f\u0435\u0440\u0435\u0432\u0435\u0441\u0442\u0438 \u0435\u0435 \u0432 \u043e\u0442\u0442\u0435\u043d\u043a\u0438 \u0441\u0435\u0440\u043e\u0433\u043e.<\/p>\n<pre><code class=\"css\">filter: brightness(3) invert(1) grayscale(1);<\/code><\/pre>\n<p>  \u0414\u043b\u044f \u044d\u0442\u043e\u0439 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u0438 \u043c\u044b \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0432\u044b\u0441\u0438\u043c \u044f\u0440\u043a\u043e\u0441\u0442\u044c, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0438\u043c\u0435\u0435\u0442 \u0432\u0442\u043e\u0440\u0438\u0447\u043d\u044b\u0439 \u044d\u0444\u0444\u0435\u043a\u0442 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0440\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438 \u043b\u0438\u043d\u0438\u0439.<\/p>\n<p>  \u0412\u043e\u0442 \u043e\u043a\u043e\u043d\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 CSS \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0430:<\/p>\n<pre><code class=\"css\">.pencil-effect {     background:         url(photo.jpg),         url(photo.jpg);     background-size: cover;     background-blend-mode: difference;     background-position:         calc(50% \u2014 1px) calc(50% \u2014 1px),         calc(50% + 1px) calc(50% + 1px);     filter: brightness(3) invert(1) grayscale(1); }<\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/-b\/gy\/hg\/-bgyhgygue7435jn9rh4f-pq22y.png\"><\/p>\n<h3>\u042d\u0444\u0444\u0435\u043a\u0442 \u0448\u043a\u043e\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u0441\u043a\u0438<\/h3>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/da\/3o\/jx\/da3ojx7fwl4q9aibloihuwmgsky.png\"><\/p>\n<p>  \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0432\u043e\u0441\u0441\u043e\u0437\u0434\u0430\u0442\u044c \u044d\u0444\u0444\u0435\u043a\u0442 \u0448\u043a\u043e\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u0441\u043a\u0438, \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0432 \u0448\u0430\u0433\u0438 \u0434\u043b\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u043a\u0430\u0440\u0430\u043d\u0434\u0430\u0448\u043d\u043e\u0433\u043e \u043d\u0430\u0431\u0440\u043e\u0441\u043a\u0430 \u0438 \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>invert(1)<\/code> \u043d\u0430 \u0437\u0430\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u043c \u044d\u0442\u0430\u043f\u0435. <\/p>\n<h3>\u042d\u0444\u0444\u0435\u043a\u0442 \u043f\u0440\u0438\u0431\u043e\u0440\u0430 \u043d\u043e\u0447\u043d\u043e\u0433\u043e \u0432\u0438\u0434\u0435\u043d\u0438\u044f<\/h3>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ax\/nj\/oj\/axnjoju-sujdba-waj-knmw2dxe.png\"><\/p>\n<p>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u043e\u0441\u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u044d\u0444\u0444\u0435\u043a\u0442 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u0441\u043c\u0435\u0448\u0438\u0432\u0430\u043d\u0438\u044f CSS \u0438 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u044e, \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0449\u0443\u044e \u0442\u0430\u043a, \u043a\u0430\u043a \u0431\u0443\u0434\u0442\u043e \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u0435\u0435 \u0447\u0435\u0440\u0435\u0437 \u043e\u0431\u044a\u0435\u043a\u0442\u0438\u0432 \u043f\u0440\u0438\u0431\u043e\u0440\u0430 \u043d\u043e\u0447\u043d\u043e\u0433\u043e \u0432\u0438\u0434\u0435\u043d\u0438\u044f.<\/p>\n<p>  \u0415\u0441\u0442\u044c \u0442\u0440\u0438 \u0447\u0430\u0441\u0442\u0438 \u043d\u0430\u0448\u0435\u0433\u043e \u0444\u043e\u043d\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0441\u043c\u0435\u0448\u0438\u0432\u0430\u0442\u044c \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0440\u0435\u0436\u0438\u043c\u0430 <code>overlay<\/code>. \u042d\u0442\u043e\u0442 \u0440\u0435\u0436\u0438\u043c \u0441\u043c\u0435\u0448\u0438\u0432\u0430\u043d\u0438\u044f \u043e\u0441\u0432\u0435\u0442\u043b\u044f\u0435\u0442 \u0438 \u0437\u0430\u0442\u0435\u043c\u043d\u044f\u0435\u0442 \u0444\u043e\u043d, \u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043a\u0430\u043a \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0446\u0438\u044f \u0434\u0432\u0443\u0445 \u0434\u0440\u0443\u0433\u0438\u0445 \u0440\u0435\u0436\u0438\u043c\u043e\u0432 \u0441\u043c\u0435\u0448\u0438\u0432\u0430\u043d\u0438\u044f \u2013 <code>multiply<\/code> \u0438 <code>screen<\/code>.<\/p>\n<p>  \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043c\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0444\u043e\u043d\u043e\u0432\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435, \u043d\u0430 \u044d\u0442\u043e\u0442 \u0440\u0430\u0437 \u043e\u0434\u043d\u043e. <\/p>\n<pre><code class=\"css\">background: url(moose.jpg); background-size: cover; background-position: center;<\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/t0\/nt\/c-\/t0ntc-pfx6-yge2fd1uvsahv16y.png\"><\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442 \u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0441\u043c\u0435\u0448\u0438\u0432\u0430\u043d\u0438\u044f \u0444\u043e\u043d\u043e\u0432\u044b\u0445 \u0441\u043b\u043e\u0435\u0432. \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0440\u0430\u0434\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442 \u043e\u0442 \u043f\u043e\u043b\u0443\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0433\u043e \u043b\u0430\u0439\u043c\u043e\u0432\u043e\u0433\u043e \u0434\u043e \u0447\u0435\u0440\u043d\u043e\u0433\u043e.<\/p>\n<pre><code class=\"css\">background:     url(moose.jpg),     radial-gradient(         rgba(0,255,0,.8),         black     ); background-blend-mode: overlay;<\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ge\/fs\/-r\/gefs-rgbzglf2khj1yfeyo-js4q.png\"><\/p>\n<p>  \u041d\u0435 \u0442\u0430\u043a \u0443\u0436 \u043f\u043b\u043e\u0445\u043e, \u043c\u043e\u0436\u043d\u043e \u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0432\u0441\u0435 \u0442\u0430\u043a. \u041d\u043e \u0443 \u043c\u0435\u043d\u044f \u0435\u0441\u0442\u044c \u0435\u0449\u0435 \u043e\u0434\u043d\u0430 \u0438\u0434\u0435\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043c\u043e\u0436\u0435\u0442 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0444\u0444\u0435\u043a\u0442 \u0431\u043e\u043b\u0435\u0435 \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0447\u043d\u044b\u043c \u2014 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u0430 \u0444\u043e\u043d \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0444\u0430\u043b\u044c\u0448\u0438\u0432\u044b\u0445 \u043b\u0438\u043d\u0438\u0439 \u0440\u0430\u0437\u0432\u0435\u0440\u0442\u043a\u0438 \u0441 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0438\u043c\u0441\u044f \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u043c \u0444\u043e\u043d\u0430.<\/p>\n<pre><code class=\"css\">background:     url(moose.jpg),     radial-gradient(         rgba(0,255,0,.8),         black     ),     repeating-linear-gradient(         transparent 0,         rgba(0,0,0,.2) 3px,         transparent 6px     );<\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ux\/qz\/fx\/uxqzfxw4jqtoga1fxjlxo8dgyfo.png\"><\/p>\n<p>  \u0418, \u0432 \u0438\u0442\u043e\u0433\u0435, \u0432\u043e\u0442 \u043f\u043e\u043b\u043d\u044b\u0439 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 CSS, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0430:<\/p>\n<pre><code class=\"css\">.night-vision-effect {     background:         url(moose.jpg),         radial-gradient(             rgba(0,255,0,.8),             black         ),         repeating-linear-gradient(             transparent 0,             rgba(0,0,0,.2) 3px,             transparent 6px         );     background-blend-mode: overlay;     background-size: cover;  }<\/code><\/pre>\n<p>  <\/p>\n<h3>\u0411\u043e\u043b\u044c\u0448\u0435 \u0444\u043e\u0442\u043e\u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432<\/h3>\n<p>  \u042f \u0441\u0434\u0435\u043b\u0430\u043b \u0433\u0430\u043b\u0435\u0440\u0435\u044e \u0438\u0437 <a href=\"https:\/\/bennettfeely.com\/image-effects\">20 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a \u0441 CSS-\u044d\u0444\u0444\u0435\u043a\u0442\u0430\u043c\u0438<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0441\u0432\u043e\u0438\u0445 \u0441\u0430\u0439\u0442\u043e\u0432. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/fd\/wy\/d8\/fdwyd80kommxpuxdaaf97mwhlqo.png\"><\/p>\n<h3>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0438 \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u0430\u044f \u0434\u0435\u0433\u0440\u0430\u0434\u0430\u0446\u0438\u044f<\/h3>\n<p>  \u0425\u043e\u0440\u043e\u0448\u0438\u0435 \u043d\u043e\u0432\u043e\u0441\u0442\u0438 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>background-blend-mode<\/code> \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 Firefox, Chrome \u0438 Opera.<\/p>\n<p>  \u041e\u0442\u0447\u0430\u0441\u0442\u0438 \u0445\u043e\u0440\u043e\u0448\u0435\u0439 \u043d\u043e\u0432\u043e\u0441\u0442\u044c\u044e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u043e, \u0447\u0442\u043e \u043e\u043d\u0430 \u0438\u043c\u0435\u0435\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u0443\u044e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0432 Safari \u0432 \u0447\u0430\u0441\u0442\u0438 \u0442\u0435\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u0437\u0434\u0435\u0441\u044c, \u043d\u043e Safari \u0432 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 <code>saturation<\/code>, <code>hue<\/code>, <code>color<\/code> \u0438 <code>luminosity<\/code>.<\/p>\n<p>  \u041f\u043b\u043e\u0445\u0430\u044f \u043d\u043e\u0432\u043e\u0441\u0442\u044c \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e Internet Explorer \u0438 IE Edge \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0441\u043c\u0435\u0448\u0438\u0432\u0430\u043d\u0438\u044f CSS.<\/p>\n<p>  \u042d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432, \u0434\u043e \u0441\u0438\u0445 \u043f\u043e\u0440 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0449\u0438\u0445 <code>background-blend-mode<\/code>. \u0417\u0430\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u043e CSS <code>@supports<\/code> \u0434\u0435\u043b\u0430\u0435\u0442 \u044d\u0442\u043e \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u044b\u043c. \u0412\u043e\u0442 \u0434\u0432\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0430.<\/p>\n<p>  \u0414\u043b\u044f \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u043c\u044b \u0432\u043e\u0437\u044c\u043c\u0435\u043c \u043d\u0430\u0448 \u0441\u043f\u0435\u043a\u0442\u0440\u0430\u043b\u044c\u043d\u044b\u0439 \u0444\u043e\u043d\u043e\u0432\u044b\u0439 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442 \u0438 \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0440\u0435\u0437\u0435\u0440\u0432\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043d\u0430 \u0441\u043b\u0443\u0447\u0430\u0439, \u0435\u0441\u043b\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f <code>background-blend-mode<\/code> \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f. \u041c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430 <code>background: gray<\/code> \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0440\u0435\u0437\u0435\u0440\u0432\u0430, \u043d\u043e \u0432 \u044d\u0442\u043e\u043c \u043c\u0435\u0441\u0442\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043b\u044e\u0431\u043e\u0439 CSS.<\/p>\n<pre><code class=\"css\">.spectrum-background {     background: gray;      @supports (background-blend-mode: screen) {         background:             linear-gradient(red, transparent),             linear-gradient(to top left, lime, transparent),             linear-gradient(to top right, blue, transparent);         background-blend-mode: screen;     } }<\/code><\/pre>\n<p>  \u0410 \u0437\u0434\u0435\u0441\u044c \u044d\u0444\u0444\u0435\u043a\u0442 \u043a\u0430\u0440\u0430\u043d\u0434\u0430\u0448\u043d\u043e\u0433\u043e \u043d\u0430\u0431\u0440\u043e\u0441\u043a\u0430 \u0441 \u0437\u0430\u043f\u0430\u0441\u043d\u044b\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u043c. \u041c\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0434\u0432\u0430 \u0432\u0430\u0436\u043d\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u0440\u0435\u0431\u0443\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u0430: <code>filter<\/code> \u0438 <code>background-blend-mode<\/code>. \u0415\u0441\u043b\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0438\u0445 (\u0438\u043b\u0438 \u0435\u0441\u043b\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 CSS <code>@supports<\/code>), \u043c\u044b \u0432\u0435\u0440\u043d\u0435\u043c\u0441\u044f \u043a \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0439 \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u0438.<\/p>\n<pre><code class=\"css\">.pencil-effect {     background-image: url(photo.jpg);     background-size: cover;      @supports (background-blend-mode: difference) and (filter: invert(1)) {         background-image:             url(photo.jpg),             url(photo.jpg);         background-blend-mode: difference;         background-position:             calc(50% \u2014 1px) calc(50% \u2014 1px),             calc(50% + 1px) calc(50% + 1px);         filter: brightness(3) invert(1) grayscale(1);     } }<\/code><\/pre>\n<p>  <\/p>\n<h3>\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438:<\/h3>\n<p>  <a href=\"http:\/\/alistapart.com\/article\/blending-modes-demystified\">Blending Modes Demystified by Justin McDowell<\/a><br \/>  <a href=\"https:\/\/css-tricks.com\/basics-css-blend-modes\">Basics of CSS Blend Modes by Chris Coyier<\/a><br \/>  <a href=\"http:\/\/lea.verou.me\/css3patterns\">CSS3 Patterns Gallery by Lea Verou<\/a><br \/>  <a href=\"http:\/\/una.im\/vintage-washout\/#%F0%9F%92%81\">Una Kravets\u2019 6-part CSS Image Effects Series<\/a><br \/>  <a href=\"https:\/\/caniuse.com\/#search=background-blend-mode\">Can I use\u2026 Support for background-blend-mode<\/a><br \/>  <a href=\"https:\/\/bennettfeely.com\/image-effects\">Image Effects with CSS by Bennett Feely<\/a><br \/>  <a href=\"http:\/\/bennettfeely.com\/gradients\">New CSS Gradient possibilities with the background-blend-mode property by Bennett Feely<\/a><br \/>  <a href=\"https:\/\/github.com\/cabanier\/poly\">Experimental Polyfill for background-blend-mode by Rik Cabanier<\/a><br \/>  <a href=\"https:\/\/www.w3.org\/TR\/compositing-1\">Compositing and Blending Level 1 Specification by the W3C<\/a><\/p>\n<blockquote><p><a href=\"https:\/\/vps.today\/\"><\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/op\/1d\/zd\/op1dzdczzwfxzcisazp6zysnoxg.png\"><\/div>\n<p><\/a><br \/>  \u0417\u0430\u0433\u043b\u044f\u0434\u044b\u0432\u0430\u0439\u0442\u0435 \u043d\u0430 <a href=\"https:\/\/vps.today\/\">VPS.today<\/a> \u2014 \u0441\u0430\u0439\u0442 \u0434\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u0430 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u0432. 1435 \u0442\u0430\u0440\u0438\u0444\u043e\u0432 \u043e\u0442 130 \u0445\u043e\u0441\u0442\u0435\u0440\u043e\u0432, \u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0438 \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u0447\u0438\u0441\u043b\u043e \u043a\u0440\u0438\u0442\u0435\u0440\u0438\u0435\u0432 \u0434\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u0430 \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0435\u0433\u043e \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u0430.<\/p>\n<p>  <a href=\"https:\/\/vps.today\/\"><\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/dd\/ky\/d6\/ddkyd6kuoqn62p8il6p3oc4zilq.png\"><\/div>\n<p><\/a><\/p><\/blockquote>\n<\/div>\n<p>        <script class=\"js-mediator-script\">!function(e){function t(t,n){if(!(n in e)){for(var r,a=e.document,i=a.scripts,o=i.length;o--;)if(-1!==i[o].src.indexOf(t)){r=i[o];break}if(!r){r=a.createElement(\"script\"),r.type=\"text\/javascript\",r.async=!0,r.defer=!0,r.src=t,r.charset=\"UTF-8\";var d=function(){var e=a.getElementsByTagName(\"script\")[0];e.parentNode.insertBefore(r,e)};\"[object Opera]\"==e.opera?a.addEventListener?a.addEventListener(\"DOMContentLoaded\",d,!1):e.attachEvent(\"onload\",d):d()}}}t(\"\/\/mediator.mail.ru\/script\/2820404\/\",\"_mediator\")}(window);<\/script>     <br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/post\/423115\/\"> https:\/\/habr.com\/post\/423115\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html js-mediator-article\">\u0415\u0441\u043b\u0438 \u043e\u0434\u043d\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u0430 \u0437\u0430\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u0435\u0442 \u0442\u044b\u0441\u044f\u0447\u0438 \u0441\u043b\u043e\u0432, \u0442\u043e \u0441\u043c\u0435\u0448\u0435\u043d\u0438\u0435 \u0434\u0432\u0443\u0445 \u043a\u0430\u0440\u0442\u0438\u043d \u0437\u0430\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u0435\u0442 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u043e\u043b\u044c\u0448\u0435\u0433\u043e. \u0422\u043e\u0447\u043d\u043e \u0442\u0430\u043a \u0436\u0435, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0434\u0438\u0437\u0430\u0439\u043d\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0441 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0441\u043c\u0435\u0448\u0438\u0432\u0430\u043d\u0438\u044f \u0441\u043b\u043e\u0435\u0432 \u0432 CSS \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u043e\u043b\u044c\u0448\u0435, \u0447\u0435\u043c \u0432\u044b \u0434\u0443\u043c\u0430\u0435\u0442\u0435.<\/p>\n<p>  \u041a\u043e\u0433\u0434\u0430 \u0432\u044b \u0441\u043b\u044b\u0448\u0438\u0442\u0435 \u043e\u0431\u0441\u0443\u0436\u0434\u0435\u043d\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 <b>CSS Blend Modes<\/b>, \u0442\u043e \u043e\u0431\u044b\u0447\u043d\u043e \u0440\u0435\u0447\u044c \u0438\u0434\u0435\u0442 \u043e \u0442\u0440\u0435\u0445 \u043d\u043e\u0432\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u0445 CSS, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0445\u043e\u0440\u043e\u0448\u0443\u044e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0432 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445.<\/p>\n<p>  \u0412\u043e\u0442 \u044d\u0442\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430:<\/p>\n<ul>\n<li><code>background-blend-mode<\/code> \u2014 \u0434\u043b\u044f \u0441\u043c\u0435\u0448\u0438\u0432\u0430\u043d\u0438\u044f \u0444\u043e\u043d\u043e\u0432\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u0432 \u0438 \u0446\u0432\u0435\u0442\u043e\u0432 \u0444\u043e\u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432;<\/li>\n<li><code>mix-blend-mode<\/code> \u2014 \u0434\u043b\u044f \u0441\u043c\u0435\u0448\u0438\u0432\u0430\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438;<\/li>\n<li><code>isolation<\/code> \u2013 \u043c\u0435\u043d\u0435\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 mix-blend-mode \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u0441\u043c\u0435\u0448\u0438\u0432\u0430\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.<\/li>\n<\/ul>\n<p>  <a href=\"https:\/\/habr.com\/company\/poiskvps\/blog\/423115#habracut\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/kd\/bt\/ao\/kdbtao0ibocxo310gxjf4ud605s.jpeg\"><\/a><\/p>\n<p>  \u041a\u0430\u043a \u0431\u044b \u0442\u043e \u043d\u0438 \u0431\u044b\u043b\u043e, \u044d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0441\u0432\u044f\u0449\u0435\u043d\u0430 <code>background-blend-mode<\/code>, \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0448\u0438\u0440\u043e\u043a\u043e\u0439 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439, \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u0430 \u0441\u0432\u043e\u0435\u043c \u0441\u0430\u0439\u0442\u0435 \u043f\u0440\u0438\u0432\u043b\u0435\u043a\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0444\u043e\u043d\u043e\u0432 \u0438 \u0444\u043e\u0442\u043e\u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043a\u043e\u0433\u0434\u0430-\u0442\u043e \u0431\u044b\u043b\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0432 Photoshop.  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-289339","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/289339","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=289339"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/289339\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=289339"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=289339"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=289339"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}