{"id":363029,"date":"2024-05-21T01:47:23","date_gmt":"2024-05-21T01:47:23","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=363029"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=363029","title":{"rendered":"<span>\u0417\u0435\u0440\u043d\u0438\u0441\u0442\u044b\u0435 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u044b \u043d\u0430 CSS \u0438 SVG<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0418\u0437\u0443\u0447\u0430\u044f \u0433\u0440\u0430\u0444\u0438\u043a\u0443 \u043d\u0430 Dribbble \u0438\u043b\u0438 Behance, \u0432\u044b \u043d\u0430\u0439\u0434\u0451\u0442\u0435 \u0442\u0430\u043c \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u043e\u0432, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0445 \u043f\u0440\u043e\u0441\u0442\u0443\u044e \u0442\u0435\u0445\u043d\u0438\u043a\u0443 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0442\u0435\u043a\u0441\u0442\u0443\u0440: \u0448\u0443\u043c. \u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0448\u0443\u043c\u0430 \u0434\u0435\u043b\u0430\u0435\u0442 \u0441\u043f\u043b\u043e\u0448\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430 \u0438\u043b\u0438 \u043f\u043b\u0430\u0432\u043d\u044b\u0435 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u044b, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0442\u0435\u043d\u0438, \u0431\u043e\u043b\u0435\u0435 \u0440\u0435\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u044b\u043c\u0438. \u041d\u043e \u043d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u043b\u044e\u0431\u043e\u0432\u044c \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u043e\u0432 \u043a \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0430\u043c, \u0448\u0443\u043c \u0440\u0435\u0434\u043a\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u0432\u0435\u0431-\u0434\u0438\u0437\u0430\u0439\u043d\u0435.<\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 CSS \u0438 SVG \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u0446\u0432\u0435\u0442\u043d\u043e\u0439 \u0448\u0443\u043c, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0443 \u043a \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0443.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/f09\/932\/421\/f09932421c748935ad00fc4907a25a3d.png\" alt=\"\u0418\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0425\u044d\u043d\u043a\u0430 \u0412\u0430\u0448\u0438\u043d\u0433\u0442\u043e\u043d\u0430 \u043d\u0430 Behance\" title=\"\u0418\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0425\u044d\u043d\u043a\u0430 \u0412\u0430\u0448\u0438\u043d\u0433\u0442\u043e\u043d\u0430 \u043d\u0430 Behance\" width=\"1773\" height=\"1773\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f09\/932\/421\/f09932421c748935ad00fc4907a25a3d.png\"\/><\/p>\n<div><figcaption>\u0418\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u044f <a href=\"https:\/\/www.behance.net\/gallery\/84818869\/Fuzzies-vol-1?tracking_source=search_projects_recommended%7Cgrainy%20texture\" rel=\"noopener noreferrer nofollow\">\u0425\u044d\u043d\u043a\u0430 \u0412\u0430\u0448\u0438\u043d\u0433\u0442\u043e\u043d\u0430 \u043d\u0430 Behance<\/a><\/figcaption><\/div>\n<\/figure>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/a8d\/e89\/735\/a8de89735df3a9245f2144335cefd423.jpeg\" alt=\"\u0418\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0414\u0436\u043e\u0440\u0434\u0430\u043d\u0430 \u041a\u044d\u044f \u043d\u0430 Dribbble\" title=\"\u0418\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0414\u0436\u043e\u0440\u0434\u0430\u043d\u0430 \u041a\u044d\u044f \u043d\u0430 Dribbble\" width=\"1199\" height=\"1200\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a8d\/e89\/735\/a8de89735df3a9245f2144335cefd423.jpeg\" data-blurred=\"true\"\/><\/p>\n<div><figcaption>\u0418\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u044f <a href=\"https:\/\/dribbble.com\/shots\/16212730-Hovedspr-ng-Double-LP-Release-Book\" rel=\"noopener noreferrer nofollow\">\u0414\u0436\u043e\u0440\u0434\u0430\u043d\u0430 \u041a\u044d\u044f \u043d\u0430 Dribbble<\/a><\/figcaption><\/div>\n<\/figure>\n<h4>\u0418\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430<\/h4>\n<p>\u041f\u0440\u043e\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442, \u043f\u043e\u0438\u0433\u0440\u0430\u0432 \u0432 <a href=\"https:\/\/grainy-gradients.vercel.app\/\" rel=\"noopener noreferrer nofollow\">\u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0435<\/a> \u0441 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438, \u0441\u043e\u0437\u0434\u0430\u044e\u0449\u0438\u043c\u0438 \u0441\u043b\u043e\u0438.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/6bb\/1d9\/861\/6bb1d9861f0460000c7081246d537164.png\" width=\"1600\" height=\"1370\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/6bb\/1d9\/861\/6bb1d9861f0460000c7081246d537164.png\"\/><\/figure>\n<h4>SVG-\u0448\u0443\u043c \u0438 CSS-\u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u044b<\/h4>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/145\/fb8\/4bc\/145fb84bc00f2615ee5aa1c7deb54c67.png\" width=\"1658\" height=\"808\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/145\/fb8\/4bc\/145fb84bc00f2615ee5aa1c7deb54c67.png\"\/><\/figure>\n<p>\u0411\u0430\u0437\u043e\u0432\u0430\u044f \u0442\u0435\u0445\u043d\u0438\u043a\u0430, \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c\u0430\u044f \u0432 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435, \u0441\u043e\u0437\u0434\u0430\u043d\u0430 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043e\u0442\u0432\u0435\u0442\u0430 \u041a\u0440\u0438\u0441\u0430 \u041f\u0430\u0445\u043b\u0430 \u043d\u0430 \u0432\u043e\u043f\u0440\u043e\u0441 \u0432 Stack Overflow:\u00a0<a href=\"https:\/\/stackoverflow.com\/questions\/4011113\/can-you-add-noise-to-a-css3-gradient\" rel=\"noopener noreferrer nofollow\">\u043c\u043e\u0436\u043d\u043e \u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0448\u0443\u043c \u043a CSS-\u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0443?<\/a><\/p>\n<p>\u0425\u0438\u0442\u0440\u043e\u0441\u0442\u044c \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0448\u0443\u043c\u0430 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 SVG-\u0444\u0438\u043b\u044c\u0442\u0440\u0430 \u0441 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u044d\u0442\u043e\u0433\u043e \u0448\u0443\u043c\u0430 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0444\u043e\u043d\u0430. \u041f\u043e\u0434\u043b\u043e\u0436\u0438\u0442\u0435 \u043f\u043e\u0434 \u043d\u0435\u0433\u043e \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442, \u0443\u0432\u0435\u043b\u0438\u0447\u044c\u0442\u0435 \u044f\u0440\u043a\u043e\u0441\u0442\u044c \u0438 \u043a\u043e\u043d\u0442\u0440\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u044c, \u0432\u043e\u0442 \u0438 \u0432\u0441\u0451 \u2014 \u0443 \u0432\u0430\u0441 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0441\u044f \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442 \u0441 \u043f\u043b\u0430\u0432\u043d\u044b\u043c \u0434\u0438\u0437\u0435\u0440\u0438\u043d\u0433\u043e\u043c.<\/p>\n<h4>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0438\u043d\u0433\u0440\u0435\u0434\u0438\u0435\u043d\u0442\u044b<\/h4>\n<p>\u0412\u043e\u0442 \u0441 \u0447\u0435\u043c \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c:<\/p>\n<ul>\n<li>\n<p><strong>SVG turbulence:<\/strong>\u00a0\u044d\u0442\u043e \u043d\u0430\u0448 \u0444\u0438\u043b\u044c\u0442\u0440 \u0448\u0443\u043c\u0430.<\/p>\n<\/li>\n<li>\n<p><strong>\u0424\u043e\u043d \u0441 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u043c \u0438 SVG:<\/strong>\u00a0\u0434\u0430\u043b\u044c\u0448\u0435 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u044d\u0442\u043e\u0442 \u0444\u0438\u043b\u044c\u0442\u0440 \u0432 CSS \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0444\u043e\u043d\u043e\u0432\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0441\u043e\u0447\u0435\u0442\u0430\u044e\u0449\u0435\u0433\u043e \u0444\u0438\u043b\u044c\u0442\u0440 \u0441 CSS-\u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u043c.<\/p>\n<\/li>\n<li>\n<p><strong>\u041f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u0435 \u044f\u0440\u043a\u043e\u0441\u0442\u0438 \u0438 \u043a\u043e\u043d\u0442\u0440\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438:<\/strong>\u00a0\u0437\u0430\u0442\u0435\u043c \u043c\u044b \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c\u00a0<code>filter<\/code>\u00a0CSS, \u0447\u0442\u043e\u0431\u044b \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0442\u044c \u044f\u0440\u043a\u043e\u0441\u0442\u044c \u0438 \u043a\u043e\u043d\u0442\u0440\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u044c \u0448\u0443\u043c\u0430.<\/p>\n<\/li>\n<li>\n<p><strong>\u0421\u043c\u0435\u0448\u0435\u043d\u0438\u0435 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u0432:<\/strong>\u00a0\u043d\u0430\u043a\u043e\u043d\u0435\u0446, \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>mix-blend-mode<\/code>\u00a0\u0434\u043b\u044f \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0439 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438 \u0446\u0432\u0435\u0442\u043e\u0432 \u0438 \u0441\u043c\u0435\u0448\u0435\u043d\u0438\u044f \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u0432.<\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u044d\u0442\u0430\u043f\u043e\u0432.<\/p>\n<h4>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 SVG turbulence<\/h4>\n<p>\u0420\u0430\u0431\u043e\u0442\u0430\u044f \u0441 SVG, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/SVG\/Element\/filter\" rel=\"noopener noreferrer nofollow\">\u0444\u0438\u043b\u044c\u0442\u0440\u044b<\/a>, \u0438 \u043e\u0434\u0438\u043d \u0438\u0437 \u0442\u0430\u043a\u0438\u0445 \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0448\u0443\u043c \u041f\u0435\u0440\u043b\u0438\u043d\u0430. \u041e\u043d \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f <code>&lt;feTurbulence><\/code>, \u0434\u043b\u044f \u043d\u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u044b\u0431\u0440\u0430\u0442\u044c, \u00ab\u0442\u0443\u0440\u0431\u0443\u043b\u0435\u043d\u0442\u043d\u043e\u0441\u0442\u044c\u00bb \u044d\u0442\u043e \u0438\u043b\u0438 \u00ab\u0448\u0443\u043c\u00bb, \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 \u0437\u0435\u0440\u043d\u0430.\u00a0<a href=\"https:\/\/css-tricks.com\/creating-patterns-with-svg-filters\/\" rel=\"noopener noreferrer nofollow\">\u0411\u0435\u043d\u0441\u0435 \u0421\u0430\u0431\u043e \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u0435\u0442 \u044d\u0442\u043e \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435<\/a>, \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u0443\u044f, \u043a\u0430\u043a \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u043e\u0432.<\/p>\n<pre><code class=\"xml\">&lt;svg viewBox=\"0 0 200 200\" xmlns='http:\/\/www.w3.org\/2000\/svg'>   &lt;filter id='noiseFilter'>     &lt;feTurbulence        type='fractalNoise'        baseFrequency='0.65'        numOctaves='3'        stitchTiles='stitch' \/>   &lt;\/filter> &lt;rect width='100%' height='100%' filter='url(#noiseFilter)' \/> &lt;\/svg><\/code><\/pre>\n<p>\u042d\u0442\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 SVG \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u0444\u0438\u043b\u044c\u0442\u0440 \u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;rect><\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0437\u0435\u0440\u043d\u0438\u0441\u0442\u044b\u0445 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u0432. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e <code>&lt;filter><\/code>\u00a0SVG\u00a0\u0437\u0430\u0434\u0430\u0451\u0442\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u043e\u0442 <code>&lt;rect><\/code>, \u0430\u00a0<code>&lt;rect><\/code>\u00a0\u043f\u0440\u043e\u0441\u0442\u043e \u0441\u0441\u044b\u043b\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043d\u0435\u0433\u043e.<\/p>\n<p>\u041c\u043e\u0436\u043d\u043e <a href=\"https:\/\/codepen.io\/cjimmy\/pen\/RwVmgGR\" rel=\"noopener noreferrer nofollow\">\u043f\u043e\u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c<\/a>\u00a0\u0441 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0438\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 <code>&lt;feTurbulence><\/code><\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6584a3412fbe8876a64a0ee5\" data-style=\"\" id=\"6584a3412fbe8876a64a0ee5\" width=\"\"><\/div>\n<p>\u041c\u044b \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043c \u044d\u0442\u043e\u0442 SVG \u043a\u0430\u043a \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0444\u0430\u0439\u043b. \u0412 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 \u0434\u0435\u043c\u043e \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f SVG \u043c\u044b \u0441\u0441\u044b\u043b\u0430\u0435\u043c\u0441\u044f \u043d\u0430 \u0432\u043d\u0435\u0448\u043d\u044e\u044e \u0441\u0441\u044b\u043b\u043a\u0443. \u041e\u0434\u043d\u0430\u043a\u043e \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0444\u0430\u0439\u043b \u0438\u043b\u0438 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e CDN. \u041f\u043e \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0441\u0442\u0440\u0430\u043d\u043d\u043e\u0439 \u043f\u0440\u0438\u0447\u0438\u043d\u0435 \u043d\u0430 SVG \u043d\u0435\u043b\u044c\u0437\u044f \u0441\u043e\u0441\u043b\u0430\u0442\u044c\u0441\u044f \u043f\u043e \u0435\u0433\u043e <code>id<\/code>\u00a0\u0432 CSS, \u043d\u043e \u043c\u043e\u0436\u043d\u043e <a href=\"https:\/\/css-tricks.com\/using-svg\/\" rel=\"noopener noreferrer nofollow\">\u0432\u0441\u0442\u0440\u043e\u0438\u0442\u044c SVG<\/a>, \u043a\u0430\u043a \u043c\u044b \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u0438 \u0432 <a href=\"https:\/\/grainy-gradients.vercel.app\/\" rel=\"noopener noreferrer nofollow\">\u0434\u0435\u043c\u043e<\/a>. \u041c\u044b \u043d\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c \u044d\u0442\u043e\u0442 \u043f\u0440\u0438\u0451\u043c \u0432 \u0434\u0435\u043c\u043e \u0440\u0430\u0434\u0438 \u043f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u044f \u0447\u0438\u0442\u0430\u0435\u043c\u043e\u0441\u0442\u0438.<\/p>\n<h4>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 CSS-\u0444\u043e\u043d\u0430 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 SVG \u0438 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0430<\/h4>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043c\u044b \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043b\u0438 \u043a\u0443\u0434\u0430-\u043d\u0438\u0431\u0443\u0434\u044c \u0444\u0430\u0439\u043b SVG, \u043c\u043e\u0436\u043d\u043e \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043d\u0435\u0433\u043e \u043f\u043e URL \u0438\u043b\u0438 \u043f\u0443\u0442\u0438 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u043c \u0432 <code>background<\/code> CSS.<\/p>\n<pre><code class=\"css\">.noise { \/* ... \/ background: linear-gradient(to right, blue, transparent), url(https:\/\/grainy-gradients.vercel.app\/noise.svg); }<\/code><\/pre>\n<p><em>\u0417\u0434\u0435\u0441\u044c \u0432\u0430\u0436\u0435\u043d \u043f\u043e\u0440\u044f\u0434\u043e\u043a. \u0412 \u044d\u0442\u043e\u043c \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043c\u044b \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u0441\u043f\u043b\u043e\u0448\u043d\u043e\u0439 \u0446\u0432\u0435\u0442 (\u0442\u043e \u0435\u0441\u0442\u044c \u0441 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c \u0448\u0443\u043c\u043e\u043c) \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043b \u0432 \u0448\u0443\u043c, \u0430 \u0437\u0430\u0442\u0435\u043c \u0432 \u0434\u0440\u0443\u0433\u043e\u0439 \u0446\u0432\u0435\u0442. \u0422\u0430\u043a\u0436\u0435 \u043c\u044b \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u043e\u0434\u0438\u043d \u043a\u043e\u043d\u0435\u0446 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0430 \u0431\u044b\u043b \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u043c, \u0447\u0442\u043e\u0431\u044b \u0441\u043a\u0432\u043e\u0437\u044c \u043d\u0435\u0433\u043e \u0431\u044b\u043b \u0432\u0438\u0434\u0435\u043d \u0448\u0443\u043c.<\/em><\/p>\n<p><em>\u0412\u043e\u0442 \u0442\u0430\u043a:<\/em><\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6584a340627c4d3097329b9f\" data-style=\"\" id=\"6584a340627c4d3097329b9f\" width=\"\"><\/div>\n<p><em>\u041e\u0434\u043d\u0430\u043a\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u044d\u0442\u043e \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043a\u0440\u0430\u0441\u0438\u0432\u043e, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0448\u0443\u043c \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0440\u0430\u0437\u043c\u044b\u0442. \u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u00ab\u043f\u043e\u0442\u0440\u0435\u043f\u0430\u0442\u044c\u00bb \u0435\u0433\u043e \u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0437\u0435\u0440\u043d\u0438\u0441\u0442\u044b\u043c. \u0418 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f\u2026<\/em><\/p>\n<h4>\u041f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u0435 \u044f\u0440\u043a\u043e\u0441\u0442\u0438 \u0438 \u043a\u043e\u043d\u0442\u0440\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438<\/h4>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u00a0<code>filter<\/code>\u00a0CSS \u0434\u0435\u043b\u0430\u0435\u0442 \u0448\u0443\u043c \u0431\u043e\u043b\u0435\u0435 \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u044b\u043c, \u0441\u0434\u0432\u0438\u0433\u0430\u044f \u0441\u0430\u043c\u044b\u0435 \u0442\u0443\u0441\u043a\u043b\u044b\u0435 \u0446\u0432\u0435\u0442\u0430 \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0443 \u0431\u0435\u043b\u043e\u0433\u043e \u0438\u043b\u0438 \u0447\u0451\u0440\u043d\u043e\u0433\u043e. \u0424\u0438\u043b\u044c\u0442\u0440 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043a\u043e \u0432\u0441\u0435\u043c\u0443 <code>&lt;div><\/code>, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u0438\u043d\u0438\u0439 \u0432 \u0441\u0430\u043c\u043e\u0439 \u043b\u0435\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u0447\u0438\u0441\u0442\u043e\u0433\u043e \u0441\u0438\u043d\u0435\u0433\u043e, \u0441 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u044b \u043d\u0430\u0447\u0430\u043b\u0438.<\/p>\n<pre><code class=\"css\">.noise { \/ ... \/ background: linear-gradient(to right, blue, transparent), url(https:\/\/grainy-gradients.vercel.app\/noise.svg); filter: contrast(170%) brightness(1000%); }<\/code><\/pre>\n<p>\u041c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441 \u0442\u0435\u043c, \u043a\u0430\u043a \u043a\u043e\u043d\u0442\u0440\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u044c \u0438 \u044f\u0440\u043a\u043e\u0441\u0442\u044c \u0432\u043b\u0438\u044f\u044e\u0442 \u043d\u0430 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442. \u0412 \u0434\u0435\u043c\u043e \u043d\u0438\u0436\u0435 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0435 \u044f\u0440\u043a\u043e\u0441\u0442\u0438 \u0438 \u043a\u043e\u043d\u0442\u0440\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438 \u0432\u044b\u0434\u0435\u043b\u044f\u0435\u0442 \u0440\u0430\u0437\u043c\u044b\u0442\u044b\u0435 \u043e\u0442\u0442\u0435\u043d\u043a\u0438 \u0441\u0435\u0440\u043e\u0433\u043e.<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6584a3412fbe8876a64a0ee7\" data-style=\"\" id=\"6584a3412fbe8876a64a0ee7\" width=\"\"><\/div>\n<h4>\u0428\u0443\u043c \u043d\u0435 \u043e\u0434\u043d\u043e\u0440\u043e\u0434\u0435\u043d \u043f\u043e \u0446\u0432\u0435\u0442\u0443<\/h4>\n<p>\u0415\u0441\u043b\u0438 \u043f\u0440\u0438\u0431\u043b\u0438\u0437\u0438\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0448\u0443\u043c \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0430 \u0446\u0432\u0435\u0442\u043e\u0432. SVG-\u0444\u0438\u043b\u044c\u0442\u0440 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0431\u044b\u043b \u0446\u0432\u0435\u0442\u043d\u044b\u043c, \u0430 \u043f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u0435 \u044f\u0440\u043a\u043e\u0441\u0442\u0438 \u0438 \u043a\u043e\u043d\u0442\u0440\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438 \u0432\u044b\u0434\u0435\u043b\u0438\u043b\u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0446\u0432\u0435\u0442\u0430. \u0425\u043e\u0442\u044f \u044d\u0442\u043e \u043a\u043e\u043d\u0444\u0435\u0442\u0442\u0438 \u043c\u0430\u043b\u043e\u0437\u0430\u043c\u0435\u0442\u043d\u043e, \u043e\u043d\u043e \u043d\u0435\u0436\u0435\u043b\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u043c \u043e\u0442\u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0446\u0432\u0435\u0442\u0430 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 CSS-\u0441\u043c\u0435\u0448\u0435\u043d\u0438\u044f (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>mix-blend-mode<\/code>\u00a0\u0438 <code>background-blend-mode<\/code>\u00a0).<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/363\/d0d\/13b\/363d0d13bc29fe74920d5adcea58dc95.png\" width=\"230\" height=\"230\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/363\/d0d\/13b\/363d0d13bc29fe74920d5adcea58dc95.png\"\/><\/figure>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/42a\/976\/89c\/42a97689c776acda3a53661f7d7986cc.png\" width=\"230\" height=\"230\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/42a\/976\/89c\/42a97689c776acda3a53661f7d7986cc.png\"\/><\/figure>\n<h4>CSS-\u0441\u043c\u0435\u0448\u0435\u043d\u0438\u0435<\/h4>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0437\u0435\u0440\u043d\u0438\u0441\u0442\u044b\u0439 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0449\u0438\u0439 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043c\u0435\u0436\u0434\u0443 \u0434\u0432\u0443\u043c\u044f \u0446\u0432\u0435\u0442\u0430\u043c\u0438. CSS-\u0441\u043c\u0435\u0448\u0435\u043d\u0438\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u043d\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c \u0434\u0440\u0443\u0433 \u043d\u0430 \u0434\u0440\u0443\u0433\u0430 \u0441\u043b\u043e\u0438 \u0446\u0432\u0435\u0442\u0430. \u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u0435\u0449\u0451 \u043e\u0434\u0438\u043d <code>&lt;div><\/code>, \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0432 \u0435\u0433\u043e \u043d\u0430\u0434 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u043c, \u0430 \u0437\u0430\u0442\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043c <code>mix-blend-mode: multiply;<\/code>, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0451 \u0441\u0433\u043b\u0430\u0434\u0438\u0442\u044c.<\/p>\n<pre><code class=\"xml\">&lt;section> &lt;div class=\"isolate\"> &lt;div class=\"noise\">&lt;\/div> &lt;div class=\"overlay\">&lt;\/div> &lt;\/div> &lt;\/section><\/code><\/pre>\n<pre><code class=\"css\">.noise { \/ ... \/ background: linear-gradient(20deg, rebeccapurple, transparent), url(https:\/\/grainy-gradients.vercel.app\/noise.svg); contrast(170%) brightness(1000%); } .overlay { \/ ... \/ background: moccasin; mix-blend-mode: multiply; }<\/code><\/pre>\n<p>\u041c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e CSS\u00a0<code>isolation<\/code>, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u043d\u0430\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u0432\u044b\u0431\u0440\u0430\u0442\u044c, \u0447\u0442\u043e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0441\u043c\u0435\u0448\u0438\u0432\u0430\u0442\u044c. \u0415\u0441\u043b\u0438 \u0431\u044b \u043c\u044b \u043f\u0440\u043e\u043f\u0443\u0441\u0442\u0438\u043b\u0438 <code>isolation<\/code>\u00a0\u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435, \u0442\u043e \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442 \u0438 \u0432\u0435\u0440\u0445\u043d\u0438\u0439 \u0441\u043b\u043e\u0439 \u0441\u043c\u0435\u0448\u0430\u043b\u0438\u0441\u044c \u0431\u044b \u0441 \u0446\u0432\u0435\u0442\u043e\u043c \u0444\u043e\u043d\u0430. \u041c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0443 \u0441\u0442\u0440\u043e\u043a\u0443 \u0432 Codepen!<\/p>\n<pre><code class=\"css\">\/* \u0411\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 *\/ .isolate { isolation: isolate; \/* ... \/ }<\/code><\/pre>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6584a3407f26cf30b3207a59\" data-style=\"\" id=\"6584a3407f26cf30b3207a59\" width=\"\"><\/div>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0440\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f<\/h4>\n<p>\u041c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0448\u0443\u043c\u043d\u043e\u0433\u043e \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0430, \u043d\u043e \u0433\u0434\u0435 \u043e\u043d \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u044c\u0441\u044f? \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u0435\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f.<\/p>\n<h4>\u0421\u0432\u0435\u0442 \u0438 \u0442\u0435\u043d\u0438 \u0441 \u0437\u0435\u0440\u043d\u0438\u0441\u0442\u043e\u0441\u0442\u044c\u044e<\/h4>\n<p>\u0413\u0434\u0435 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u044b \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0442 \u0435\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c? \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u0441\u0432\u0435\u0442\u0435 \u0438 \u0442\u0435\u043d\u044f\u0445. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c CSS <code>mix-blend-mode<\/code>\u00a0\u0434\u043b\u044f \u043f\u043b\u0430\u0432\u043d\u043e\u0433\u043e \u0441\u043c\u0435\u0448\u0435\u043d\u0438\u044f \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u0432 \u0438 \u0432\u044b\u0431\u043e\u0440\u043e\u0447\u043d\u043e\u0439 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438 \u0446\u0432\u0435\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0445\u043e\u0442\u0438\u043c \u0432\u0438\u0434\u0435\u0442\u044c \u0432 \u0448\u0443\u043c\u0435.<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6584a34172e08276d7dd98e9\" data-style=\"\" id=\"6584a34172e08276d7dd98e9\" width=\"\"><\/div>\n<p>\u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0441 \u0442\u0435\u043d\u044c\u044e \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u0442\u0451\u043c\u043d\u044b\u0439 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442 \u0438 \u0438\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0435\u0433\u043e \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0441\u043e \u0441\u0432\u0435\u0442\u043e\u043c. \u0412 \u043e\u0431\u043e\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 <code>mix-blend-mode<\/code>\u00a0\u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0438\u0445 \u0441\u043c\u0435\u0448\u0438\u0432\u0430\u043d\u0438\u0435 \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0430\u043c\u0438.<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6584a3416f566b30a5a20425\" data-style=\"\" id=\"6584a3416f566b30a5a20425\" width=\"\"><\/div>\n<h4>\u0413\u043e\u043b\u043e\u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043f\u043b\u0451\u043d\u043a\u0430<\/h4>\n<p>\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u043f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u0435 \u044f\u0440\u043a\u043e\u0441\u0442\u0438 \u0438 \u043a\u043e\u043d\u0442\u0440\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438 \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u0440\u0430\u0434\u0443\u0436\u043d\u044b\u0439 \u044d\u0444\u0444\u0435\u043a\u0442, \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u044e\u0449\u0438\u0439 \u0433\u043e\u043b\u043e\u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u043f\u043b\u0451\u043d\u043a\u0443.<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6584a3413eb8e176bf051b01\" data-style=\"\" id=\"6584a3413eb8e176bf051b01\" width=\"\"><\/div>\n<h4>\u0414\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0435 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0435<\/h4>\n<p>\u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u043f\u043e\u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441 \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438 \u0432 <a href=\"https:\/\/grainy-gradients.vercel.app\/\" rel=\"noopener noreferrer nofollow\">\u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0435<\/a>, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a \u043e\u043d\u0438 \u0432\u043b\u0438\u044f\u044e\u0442 \u043d\u0430 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0443.<\/p>\n<p>\u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u044d\u0442\u0443 \u0442\u0435\u0445\u043d\u0438\u043a\u0443 \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0437\u0432\u0438\u0442\u044c \u0438 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043c\u0438:<\/p>\n<ul>\n<li>\n<p><strong>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0440\u0443\u0433\u043e\u0439 SVG:<\/strong>\u00a0\u0432\u043e \u0432\u0441\u0435\u0445 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0430\u0445 \u0438\u0437 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 SVG, \u043d\u043e \u0432 <a href=\"https:\/\/grainy-gradients.vercel.app\/\" rel=\"noopener noreferrer nofollow\">\u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0435<\/a> \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0438\u0433\u0440\u0430\u0442\u044c\u0441\u044f \u0441 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u044e\u0449\u0438\u043c\u0438 \u0448\u0443\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438, \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u0440\u0435\u0433\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0437\u0435\u0440\u043d\u0438\u0441\u0442\u043e\u0441\u0442\u044c, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434 .<\/p>\n<\/li>\n<li>\n<p><strong>\u041f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u044b:<\/strong>\u00a0\u043a\u0440\u043e\u043c\u0435<code>linear-gradient<\/code> \u0432 CSS \u0435\u0441\u0442\u044c \u0435\u0449\u0451 \u0447\u0435\u0442\u044b\u0440\u0435 \u0442\u0438\u043f\u0430 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u0432. \u041c\u043e\u0436\u0435\u0442\u0435 \u0432\u0441\u043f\u043e\u043c\u043d\u0438\u0442\u044c \u0438\u0445? (<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/gradient\/repeating-conic-gradient\" rel=\"noopener noreferrer nofollow\">\u0412\u043e\u0442 \u043e\u0434\u0438\u043d \u0438\u0437 \u043d\u0438\u0445.<\/a>)<\/p>\n<\/li>\n<li>\n<p><strong>\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u0441\u043b\u043e\u0438:<\/strong>\u00a0\u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 CSS-\u0441\u043c\u0435\u0448\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u043b\u043e\u0436\u0438\u0442\u044c \u0434\u0440\u0443\u0433 \u043d\u0430 \u0434\u0440\u0443\u0433\u0430 \u043b\u044e\u0431\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u043b\u043e\u0451\u0432 \u0438 \u0441\u043c\u0435\u0448\u0430\u0442\u044c \u0438\u0445.<\/p>\n<\/li>\n<li>\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u0435 SVG-\u0444\u0438\u043b\u044c\u0442\u0440\u044b:<\/strong>\u00a0\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0440\u0430\u0437\u043d\u044b\u0445 \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0433\u0430\u0443\u0441\u0441\u043e\u0432\u043e \u0440\u0430\u0437\u043c\u044b\u0442\u0438\u0435 \u0438 \u0440\u0430\u0437\u043d\u044b\u0435 \u0442\u0438\u043f\u044b \u043e\u0441\u0432\u0435\u0449\u0435\u043d\u0438\u044f. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043d\u0430 \u043d\u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f \u0432 CSS-\u0444\u0438\u043b\u044c\u0442\u0440\u0435 \u0438 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/SVG\/Applying_SVG_effects_to_HTML_content\" rel=\"noopener noreferrer nofollow\">\u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u043a \u043b\u044e\u0431\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443<\/a>\u00a0\u0432 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043a SVG.<\/p>\n<\/li>\n<\/ul>\n<h4>\u0411\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430<\/h4>\n<p>\u041d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0442\u0435\u043c\u044b \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438. \u0411\u0430\u0437\u0430 \u044d\u0442\u043e\u0439 \u0442\u0435\u0445\u043d\u0438\u043a\u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432\u0441\u0435\u043c\u0438 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438. \u041a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0433\u0430\u0434\u0430\u0442\u044c\u0441\u044f, \u043e\u043d\u0430 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 Internet Explorer. \u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, Internet Explorer \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 <a href=\"https:\/\/caniuse.com\/svg-css\" rel=\"noopener noreferrer nofollow\">SVG \u043a\u0430\u043a \u0444\u043e\u043d \u0434\u043b\u044f CSS<\/a>\u00a0(\u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0435 \u0441\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c CSS\u00a0<code>filter<\/code>).<\/p>\n<h4>SVG \u043a\u0430\u043a \u0444\u043e\u043d\u043e\u0432\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 CSS<\/h4>\n<p>\u042d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0439 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0435 \u0432\u0437\u044f\u0442\u044b \u0441 <a href=\"http:\/\/caniuse.com\/#feat=svg-css\" rel=\"noopener noreferrer nofollow\">Caniuse<\/a>, \u0433\u0434\u0435 \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u0438\u0437\u0443\u0447\u0438\u0442\u044c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435. \u0427\u0438\u0441\u043b\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043e\u0442 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u0438 \u0432\u044b\u0448\u0435.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/562\/691\/b48\/562691b486460a61ce619f942f5268f6.png\" width=\"788\" height=\"445\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/562\/691\/b48\/562691b486460a61ce619f942f5268f6.png\"\/><\/figure>\n<h4>\u042d\u0444\u0444\u0435\u043a\u0442\u044b \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432 CSS<\/h4>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/269\/eae\/f92\/269eaef92a9dd6106e8466e1b2a8c320.png\" width=\"791\" height=\"447\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/269\/eae\/f92\/269eaef92a9dd6106e8466e1b2a8c320.png\"\/><\/figure>\n<p>\u0415\u0449\u0451 \u044f \u0437\u0430\u043c\u0435\u0442\u0438\u043b, \u0447\u0442\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 Blink (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, Chrome) \u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 WebKit (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, Safari) \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0442 <code>mix-blend-mode<\/code>\u00a0\u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e-\u0440\u0430\u0437\u043d\u043e\u043c\u0443, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 CSS-\u0441\u043c\u0435\u0448\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u044c\u0442\u0435 \u0435\u0433\u043e \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445. \u0412 \u0441\u0432\u043e\u0438\u0445 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b <a href=\"http:\/\/browserhacks.com\/\" rel=\"noopener noreferrer nofollow\">browser-specific media queries<\/a>\u00a0, \u0447\u0442\u043e\u0431\u044b \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0440\u0430\u0437\u0440\u0435\u0448\u0430\u0442\u044c \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0435 \u0440\u0430\u0437\u043b\u0438\u0447\u0438\u044f \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0432 CSS.<\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><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\/ru\/articles\/780840\/\"> https:\/\/habr.com\/ru\/articles\/780840\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0418\u0437\u0443\u0447\u0430\u044f \u0433\u0440\u0430\u0444\u0438\u043a\u0443 \u043d\u0430 Dribbble \u0438\u043b\u0438 Behance, \u0432\u044b \u043d\u0430\u0439\u0434\u0451\u0442\u0435 \u0442\u0430\u043c \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u043e\u0432, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0445 \u043f\u0440\u043e\u0441\u0442\u0443\u044e \u0442\u0435\u0445\u043d\u0438\u043a\u0443 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0442\u0435\u043a\u0441\u0442\u0443\u0440: \u0448\u0443\u043c. \u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0448\u0443\u043c\u0430 \u0434\u0435\u043b\u0430\u0435\u0442 \u0441\u043f\u043b\u043e\u0448\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430 \u0438\u043b\u0438 \u043f\u043b\u0430\u0432\u043d\u044b\u0435 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u044b, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0442\u0435\u043d\u0438, \u0431\u043e\u043b\u0435\u0435 \u0440\u0435\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u044b\u043c\u0438. \u041d\u043e \u043d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u043b\u044e\u0431\u043e\u0432\u044c \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u043e\u0432 \u043a \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0430\u043c, \u0448\u0443\u043c \u0440\u0435\u0434\u043a\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u0432\u0435\u0431-\u0434\u0438\u0437\u0430\u0439\u043d\u0435.<\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 CSS \u0438 SVG \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u0446\u0432\u0435\u0442\u043d\u043e\u0439 \u0448\u0443\u043c, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0443 \u043a \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0443.<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0418\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u044f <a href=\"https:\/\/www.behance.net\/gallery\/84818869\/Fuzzies-vol-1?tracking_source=search_projects_recommended%7Cgrainy%20texture\" rel=\"noopener noreferrer nofollow\">\u0425\u044d\u043d\u043a\u0430 \u0412\u0430\u0448\u0438\u043d\u0433\u0442\u043e\u043d\u0430 \u043d\u0430 Behance<\/a><\/figcaption><\/div>\n<\/figure>\n<figure class=\"full-width\">\n<div><figcaption>\u0418\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u044f <a href=\"https:\/\/dribbble.com\/shots\/16212730-Hovedspr-ng-Double-LP-Release-Book\" rel=\"noopener noreferrer nofollow\">\u0414\u0436\u043e\u0440\u0434\u0430\u043d\u0430 \u041a\u044d\u044f \u043d\u0430 Dribbble<\/a><\/figcaption><\/div>\n<\/figure>\n<h4>\u0418\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430<\/h4>\n<p>\u041f\u0440\u043e\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442, \u043f\u043e\u0438\u0433\u0440\u0430\u0432 \u0432 <a href=\"https:\/\/grainy-gradients.vercel.app\/\" rel=\"noopener noreferrer nofollow\">\u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0435<\/a> \u0441 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438, \u0441\u043e\u0437\u0434\u0430\u044e\u0449\u0438\u043c\u0438 \u0441\u043b\u043e\u0438.<\/p>\n<figure class=\"full-width\"><\/figure>\n<h4>SVG-\u0448\u0443\u043c \u0438 CSS-\u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u044b<\/h4>\n<figure class=\"full-width\"><\/figure>\n<p>\u0411\u0430\u0437\u043e\u0432\u0430\u044f \u0442\u0435\u0445\u043d\u0438\u043a\u0430, \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c\u0430\u044f \u0432 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435, \u0441\u043e\u0437\u0434\u0430\u043d\u0430 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043e\u0442\u0432\u0435\u0442\u0430 \u041a\u0440\u0438\u0441\u0430 \u041f\u0430\u0445\u043b\u0430 \u043d\u0430 \u0432\u043e\u043f\u0440\u043e\u0441 \u0432 Stack Overflow:\u00a0<a href=\"https:\/\/stackoverflow.com\/questions\/4011113\/can-you-add-noise-to-a-css3-gradient\" rel=\"noopener noreferrer nofollow\">\u043c\u043e\u0436\u043d\u043e \u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0448\u0443\u043c \u043a CSS-\u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0443?<\/a><\/p>\n<p>\u0425\u0438\u0442\u0440\u043e\u0441\u0442\u044c \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0448\u0443\u043c\u0430 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 SVG-\u0444\u0438\u043b\u044c\u0442\u0440\u0430 \u0441 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u044d\u0442\u043e\u0433\u043e \u0448\u0443\u043c\u0430 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0444\u043e\u043d\u0430. \u041f\u043e\u0434\u043b\u043e\u0436\u0438\u0442\u0435 \u043f\u043e\u0434 \u043d\u0435\u0433\u043e \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442, \u0443\u0432\u0435\u043b\u0438\u0447\u044c\u0442\u0435 \u044f\u0440\u043a\u043e\u0441\u0442\u044c \u0438 \u043a\u043e\u043d\u0442\u0440\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u044c, \u0432\u043e\u0442 \u0438 \u0432\u0441\u0451 \u2014 \u0443 \u0432\u0430\u0441 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0441\u044f \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442 \u0441 \u043f\u043b\u0430\u0432\u043d\u044b\u043c \u0434\u0438\u0437\u0435\u0440\u0438\u043d\u0433\u043e\u043c.<\/p>\n<h4>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0438\u043d\u0433\u0440\u0435\u0434\u0438\u0435\u043d\u0442\u044b<\/h4>\n<p>\u0412\u043e\u0442 \u0441 \u0447\u0435\u043c \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c:<\/p>\n<ul>\n<li>\n<p><strong>SVG turbulence:<\/strong>\u00a0\u044d\u0442\u043e \u043d\u0430\u0448 \u0444\u0438\u043b\u044c\u0442\u0440 \u0448\u0443\u043c\u0430.<\/p>\n<\/li>\n<li>\n<p><strong>\u0424\u043e\u043d \u0441 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u043c \u0438 SVG:<\/strong>\u00a0\u0434\u0430\u043b\u044c\u0448\u0435 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u044d\u0442\u043e\u0442 \u0444\u0438\u043b\u044c\u0442\u0440 \u0432 CSS \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0444\u043e\u043d\u043e\u0432\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0441\u043e\u0447\u0435\u0442\u0430\u044e\u0449\u0435\u0433\u043e \u0444\u0438\u043b\u044c\u0442\u0440 \u0441 CSS-\u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u043c.<\/p>\n<\/li>\n<li>\n<p><strong>\u041f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u0435 \u044f\u0440\u043a\u043e\u0441\u0442\u0438 \u0438 \u043a\u043e\u043d\u0442\u0440\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438:<\/strong>\u00a0\u0437\u0430\u0442\u0435\u043c \u043c\u044b \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c\u00a0<code>filter<\/code>\u00a0CSS, \u0447\u0442\u043e\u0431\u044b \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0442\u044c \u044f\u0440\u043a\u043e\u0441\u0442\u044c \u0438 \u043a\u043e\u043d\u0442\u0440\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u044c \u0448\u0443\u043c\u0430.<\/p>\n<\/li>\n<li>\n<p><strong>\u0421\u043c\u0435\u0448\u0435\u043d\u0438\u0435 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u0432:<\/strong>\u00a0\u043d\u0430\u043a\u043e\u043d\u0435\u0446, \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>mix-blend-mode<\/code>\u00a0\u0434\u043b\u044f \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0439 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438 \u0446\u0432\u0435\u0442\u043e\u0432 \u0438 \u0441\u043c\u0435\u0448\u0435\u043d\u0438\u044f \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u0432.<\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u044d\u0442\u0430\u043f\u043e\u0432.<\/p>\n<h4>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 SVG turbulence<\/h4>\n<p>\u0420\u0430\u0431\u043e\u0442\u0430\u044f \u0441 SVG, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/SVG\/Element\/filter\" rel=\"noopener noreferrer nofollow\">\u0444\u0438\u043b\u044c\u0442\u0440\u044b<\/a>, \u0438 \u043e\u0434\u0438\u043d \u0438\u0437 \u0442\u0430\u043a\u0438\u0445 \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0448\u0443\u043c \u041f\u0435\u0440\u043b\u0438\u043d\u0430. \u041e\u043d \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f <code>&lt;feTurbulence><\/code>, \u0434\u043b\u044f \u043d\u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u044b\u0431\u0440\u0430\u0442\u044c, \u00ab\u0442\u0443\u0440\u0431\u0443\u043b\u0435\u043d\u0442\u043d\u043e\u0441\u0442\u044c\u00bb \u044d\u0442\u043e \u0438\u043b\u0438 \u00ab\u0448\u0443\u043c\u00bb, \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 \u0437\u0435\u0440\u043d\u0430.\u00a0<a href=\"https:\/\/css-tricks.com\/creating-patterns-with-svg-filters\/\" rel=\"noopener noreferrer nofollow\">\u0411\u0435\u043d\u0441\u0435 \u0421\u0430\u0431\u043e \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u0435\u0442 \u044d\u0442\u043e \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435<\/a>, \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u0443\u044f, \u043a\u0430\u043a \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u043e\u0432.<\/p>\n<pre><code class=\"xml\">&lt;svg viewBox=\"0 0 200 200\" xmlns='http:\/\/www.w3.org\/2000\/svg'>   &lt;filter id='noiseFilter'>     &lt;feTurbulence        type='fractalNoise'        baseFrequency='0.65'        numOctaves='3'        stitchTiles='stitch' \/>   &lt;\/filter> &lt;rect width='100%' height='100%' filter='url(#noiseFilter)' \/> &lt;\/svg><\/code><\/pre>\n<p>\u042d\u0442\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 SVG \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u0444\u0438\u043b\u044c\u0442\u0440 \u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;rect><\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0437\u0435\u0440\u043d\u0438\u0441\u0442\u044b\u0445 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u0432. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e <code>&lt;filter><\/code>\u00a0SVG\u00a0\u0437\u0430\u0434\u0430\u0451\u0442\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u043e\u0442 <code>&lt;rect><\/code>, \u0430\u00a0<code>&lt;rect><\/code>\u00a0\u043f\u0440\u043e\u0441\u0442\u043e \u0441\u0441\u044b\u043b\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043d\u0435\u0433\u043e.<\/p>\n<p>\u041c\u043e\u0436\u043d\u043e <a href=\"https:\/\/codepen.io\/cjimmy\/pen\/RwVmgGR\" rel=\"noopener noreferrer nofollow\">\u043f\u043e\u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c<\/a>\u00a0\u0441 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0438\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 <code>&lt;feTurbulence><\/code><\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6584a3412fbe8876a64a0ee5\" data-style=\"\" id=\"6584a3412fbe8876a64a0ee5\" width=\"\"><\/div>\n<p>\u041c\u044b \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043c \u044d\u0442\u043e\u0442 SVG \u043a\u0430\u043a \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0444\u0430\u0439\u043b. \u0412 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 \u0434\u0435\u043c\u043e \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f SVG \u043c\u044b \u0441\u0441\u044b\u043b\u0430\u0435\u043c\u0441\u044f \u043d\u0430 \u0432\u043d\u0435\u0448\u043d\u044e\u044e \u0441\u0441\u044b\u043b\u043a\u0443. \u041e\u0434\u043d\u0430\u043a\u043e \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0444\u0430\u0439\u043b \u0438\u043b\u0438 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e CDN. \u041f\u043e \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0441\u0442\u0440\u0430\u043d\u043d\u043e\u0439 \u043f\u0440\u0438\u0447\u0438\u043d\u0435 \u043d\u0430 SVG \u043d\u0435\u043b\u044c\u0437\u044f \u0441\u043e\u0441\u043b\u0430\u0442\u044c\u0441\u044f \u043f\u043e \u0435\u0433\u043e <code>id<\/code>\u00a0\u0432 CSS, \u043d\u043e \u043c\u043e\u0436\u043d\u043e <a href=\"https:\/\/css-tricks.com\/using-svg\/\" rel=\"noopener noreferrer nofollow\">\u0432\u0441\u0442\u0440\u043e\u0438\u0442\u044c SVG<\/a>, \u043a\u0430\u043a \u043c\u044b \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u0438 \u0432 <a href=\"https:\/\/grainy-gradients.vercel.app\/\" rel=\"noopener noreferrer nofollow\">\u0434\u0435\u043c\u043e<\/a>. \u041c\u044b \u043d\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c \u044d\u0442\u043e\u0442 \u043f\u0440\u0438\u0451\u043c \u0432 \u0434\u0435\u043c\u043e \u0440\u0430\u0434\u0438 \u043f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u044f \u0447\u0438\u0442\u0430\u0435\u043c\u043e\u0441\u0442\u0438.<\/p>\n<h4>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 CSS-\u0444\u043e\u043d\u0430 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 SVG \u0438 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0430<\/h4>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043c\u044b \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043b\u0438 \u043a\u0443\u0434\u0430-\u043d\u0438\u0431\u0443\u0434\u044c \u0444\u0430\u0439\u043b SVG, \u043c\u043e\u0436\u043d\u043e \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043d\u0435\u0433\u043e \u043f\u043e URL \u0438\u043b\u0438 \u043f\u0443\u0442\u0438 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u043c \u0432 <code>background<\/code> CSS.<\/p>\n<pre><code class=\"css\">.noise { \/* ... \/ background: linear-gradient(to right, blue, transparent), url(https:\/\/grainy-gradients.vercel.app\/noise.svg); }<\/code><\/pre>\n<p><em>\u0417\u0434\u0435\u0441\u044c \u0432\u0430\u0436\u0435\u043d \u043f\u043e\u0440\u044f\u0434\u043e\u043a. \u0412 \u044d\u0442\u043e\u043c \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043c\u044b \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u0441\u043f\u043b\u043e\u0448\u043d\u043e\u0439 \u0446\u0432\u0435\u0442 (\u0442\u043e \u0435\u0441\u0442\u044c \u0441 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c \u0448\u0443\u043c\u043e\u043c) \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043b \u0432 \u0448\u0443\u043c, \u0430 \u0437\u0430\u0442\u0435\u043c \u0432 \u0434\u0440\u0443\u0433\u043e\u0439 \u0446\u0432\u0435\u0442. \u0422\u0430\u043a\u0436\u0435 \u043c\u044b \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u043e\u0434\u0438\u043d \u043a\u043e\u043d\u0435\u0446 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0430 \u0431\u044b\u043b \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u043c, \u0447\u0442\u043e\u0431\u044b \u0441\u043a\u0432\u043e\u0437\u044c \u043d\u0435\u0433\u043e \u0431\u044b\u043b \u0432\u0438\u0434\u0435\u043d \u0448\u0443\u043c.<\/em><\/p>\n<p><em>\u0412\u043e\u0442 \u0442\u0430\u043a:<\/em><\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6584a340627c4d3097329b9f\" data-style=\"\" id=\"6584a340627c4d3097329b9f\" width=\"\"><\/div>\n<p><em>\u041e\u0434\u043d\u0430\u043a\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u044d\u0442\u043e \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043a\u0440\u0430\u0441\u0438\u0432\u043e, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0448\u0443\u043c \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0440\u0430\u0437\u043c\u044b\u0442. \u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u00ab\u043f\u043e\u0442\u0440\u0435\u043f\u0430\u0442\u044c\u00bb \u0435\u0433\u043e \u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0437\u0435\u0440\u043d\u0438\u0441\u0442\u044b\u043c. \u0418 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f\u2026<\/em><\/p>\n<h4>\u041f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u0435 \u044f\u0440\u043a\u043e\u0441\u0442\u0438 \u0438 \u043a\u043e\u043d\u0442\u0440\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438<\/h4>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u00a0<code>filter<\/code>\u00a0CSS \u0434\u0435\u043b\u0430\u0435\u0442 \u0448\u0443\u043c \u0431\u043e\u043b\u0435\u0435 \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u044b\u043c, \u0441\u0434\u0432\u0438\u0433\u0430\u044f \u0441\u0430\u043c\u044b\u0435 \u0442\u0443\u0441\u043a\u043b\u044b\u0435 \u0446\u0432\u0435\u0442\u0430 \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0443 \u0431\u0435\u043b\u043e\u0433\u043e \u0438\u043b\u0438 \u0447\u0451\u0440\u043d\u043e\u0433\u043e. \u0424\u0438\u043b\u044c\u0442\u0440 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043a\u043e \u0432\u0441\u0435\u043c\u0443 <code>&lt;div><\/code>, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u0438\u043d\u0438\u0439 \u0432 \u0441\u0430\u043c\u043e\u0439 \u043b\u0435\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u0447\u0438\u0441\u0442\u043e\u0433\u043e \u0441\u0438\u043d\u0435\u0433\u043e, \u0441 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u044b \u043d\u0430\u0447\u0430\u043b\u0438.<\/p>\n<pre><code class=\"css\">.noise { \/ ... \/ background: linear-gradient(to right, blue, transparent), url(https:\/\/grainy-gradients.vercel.app\/noise.svg); filter: contrast(170%) brightness(1000%); }<\/code><\/pre>\n<p>\u041c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441 \u0442\u0435\u043c, \u043a\u0430\u043a \u043a\u043e\u043d\u0442\u0440\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u044c \u0438 \u044f\u0440\u043a\u043e\u0441\u0442\u044c \u0432\u043b\u0438\u044f\u044e\u0442 \u043d\u0430 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442. \u0412 \u0434\u0435\u043c\u043e \u043d\u0438\u0436\u0435 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0435 \u044f\u0440\u043a\u043e\u0441\u0442\u0438 \u0438 \u043a\u043e\u043d\u0442\u0440\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438 \u0432\u044b\u0434\u0435\u043b\u044f\u0435\u0442 \u0440\u0430\u0437\u043c\u044b\u0442\u044b\u0435 \u043e\u0442\u0442\u0435\u043d\u043a\u0438 \u0441\u0435\u0440\u043e\u0433\u043e.<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6584a3412fbe8876a64a0ee7\" data-style=\"\" id=\"6584a3412fbe8876a64a0ee7\" width=\"\"><\/div>\n<h4>\u0428\u0443\u043c \u043d\u0435 \u043e\u0434\u043d\u043e\u0440\u043e\u0434\u0435\u043d \u043f\u043e \u0446\u0432\u0435\u0442\u0443<\/h4>\n<p>\u0415\u0441\u043b\u0438 \u043f\u0440\u0438\u0431\u043b\u0438\u0437\u0438\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0448\u0443\u043c \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0430 \u0446\u0432\u0435\u0442\u043e\u0432. SVG-\u0444\u0438\u043b\u044c\u0442\u0440 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0431\u044b\u043b \u0446\u0432\u0435\u0442\u043d\u044b\u043c, \u0430 \u043f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u0435 \u044f\u0440\u043a\u043e\u0441\u0442\u0438 \u0438 \u043a\u043e\u043d\u0442\u0440\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438 \u0432\u044b\u0434\u0435\u043b\u0438\u043b\u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0446\u0432\u0435\u0442\u0430. \u0425\u043e\u0442\u044f \u044d\u0442\u043e \u043a\u043e\u043d\u0444\u0435\u0442\u0442\u0438 \u043c\u0430\u043b\u043e\u0437\u0430\u043c\u0435\u0442\u043d\u043e, \u043e\u043d\u043e \u043d\u0435\u0436\u0435\u043b\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u043c \u043e\u0442\u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0446\u0432\u0435\u0442\u0430 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 CSS-\u0441\u043c\u0435\u0448\u0435\u043d\u0438\u044f (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>mix-blend-mode<\/code>\u00a0\u0438 <code>background-blend-mode<\/code>\u00a0).<\/p>\n<figure class=\"\"><\/figure>\n<figure class=\"\"><\/figure>\n<h4>CSS-\u0441\u043c\u0435\u0448\u0435\u043d\u0438\u0435<\/h4>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0437\u0435\u0440\u043d\u0438\u0441\u0442\u044b\u0439 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0449\u0438\u0439 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043c\u0435\u0436\u0434\u0443 \u0434\u0432\u0443\u043c\u044f \u0446\u0432\u0435\u0442\u0430\u043c\u0438. CSS-\u0441\u043c\u0435\u0448\u0435\u043d\u0438\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u043d\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c \u0434\u0440\u0443\u0433 \u043d\u0430 \u0434\u0440\u0443\u0433\u0430 \u0441\u043b\u043e\u0438 \u0446\u0432\u0435\u0442\u0430. \u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u0435\u0449\u0451 \u043e\u0434\u0438\u043d <code>&lt;div><\/code>, \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0432 \u0435\u0433\u043e \u043d\u0430\u0434 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u043c, \u0430 \u0437\u0430\u0442\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043c <code>mix-blend-mode: multiply;<\/code>, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0451 \u0441\u0433\u043b\u0430\u0434\u0438\u0442\u044c.<\/p>\n<pre><code class=\"xml\">&lt;section> &lt;div class=\"isolate\"> &lt;div class=\"noise\">&lt;\/div> &lt;div class=\"overlay\">&lt;\/div> &lt;\/div> &lt;\/section><\/code><\/pre>\n<pre><code class=\"css\">.noise { \/ ... \/ background: linear-gradient(20deg, rebeccapurple, transparent), url(https:\/\/grainy-gradients.vercel.app\/noise.svg); contrast(170%) brightness(1000%); } .overlay { \/ ... \/ background: moccasin; mix-blend-mode: multiply; }<\/code><\/pre>\n<p>\u041c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e CSS\u00a0<code>isolation<\/code>, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u043d\u0430\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u0432\u044b\u0431\u0440\u0430\u0442\u044c, \u0447\u0442\u043e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0441\u043c\u0435\u0448\u0438\u0432\u0430\u0442\u044c. \u0415\u0441\u043b\u0438 \u0431\u044b \u043c\u044b \u043f\u0440\u043e\u043f\u0443\u0441\u0442\u0438\u043b\u0438 <code>isolation<\/code>\u00a0\u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435, \u0442\u043e \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442 \u0438 \u0432\u0435\u0440\u0445\u043d\u0438\u0439 \u0441\u043b\u043e\u0439 \u0441\u043c\u0435\u0448\u0430\u043b\u0438\u0441\u044c \u0431\u044b \u0441 \u0446\u0432\u0435\u0442\u043e\u043c \u0444\u043e\u043d\u0430. \u041c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0443 \u0441\u0442\u0440\u043e\u043a\u0443 \u0432 Codepen!<\/p>\n<pre><code class=\"css\">\/* \u0411\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 *\/ .isolate { isolation: isolate; \/* ... \/ }<\/code><\/pre>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6584a3407f26cf30b3207a59\" data-style=\"\" id=\"6584a3407f26cf30b3207a59\" width=\"\"><\/div>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0440\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f<\/h4>\n<p>\u041c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0448\u0443\u043c\u043d\u043e\u0433\u043e \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0430, \u043d\u043e \u0433\u0434\u0435 \u043e\u043d \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u044c\u0441\u044f? \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u0435\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f.<\/p>\n<h4>\u0421\u0432\u0435\u0442 \u0438 \u0442\u0435\u043d\u0438 \u0441 \u0437\u0435\u0440\u043d\u0438\u0441\u0442\u043e\u0441\u0442\u044c\u044e<\/h4>\n<p>\u0413\u0434\u0435 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u044b \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0442 \u0435\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c? \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u0441\u0432\u0435\u0442\u0435 \u0438 \u0442\u0435\u043d\u044f\u0445. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c CSS <code>mix-blend-mode<\/code>\u00a0\u0434\u043b\u044f \u043f\u043b\u0430\u0432\u043d\u043e\u0433\u043e \u0441\u043c\u0435\u0448\u0435\u043d\u0438\u044f \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u0432 \u0438 \u0432\u044b\u0431\u043e\u0440\u043e\u0447\u043d\u043e\u0439 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438 \u0446\u0432\u0435\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0445\u043e\u0442\u0438\u043c \u0432\u0438\u0434\u0435\u0442\u044c \u0432 \u0448\u0443\u043c\u0435.<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6584a34172e08276d7dd98e9\" data-style=\"\" id=\"6584a34172e08276d7dd98e9\" width=\"\"><\/div>\n<p>\u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0441 \u0442\u0435\u043d\u044c\u044e \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u0442\u0451\u043c\u043d\u044b\u0439 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442 \u0438 \u0438\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0435\u0433\u043e \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0441\u043e \u0441\u0432\u0435\u0442\u043e\u043c. \u0412 \u043e\u0431\u043e\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 <code>mix-blend-mode<\/code>\u00a0\u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0438\u0445 \u0441\u043c\u0435\u0448\u0438\u0432\u0430\u043d\u0438\u0435 \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0430\u043c\u0438.<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6584a3416f566b30a5a20425\" data-style=\"\" id=\"6584a3416f566b30a5a20425\" width=\"\"><\/div>\n<h4>\u0413\u043e\u043b\u043e\u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043f\u043b\u0451\u043d\u043a\u0430<\/h4>\n<p>\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u043f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u0435 \u044f\u0440\u043a\u043e\u0441\u0442\u0438 \u0438 \u043a\u043e\u043d\u0442\u0440\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438 \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u0440\u0430\u0434\u0443\u0436\u043d\u044b\u0439 \u044d\u0444\u0444\u0435\u043a\u0442, \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u044e\u0449\u0438\u0439 \u0433\u043e\u043b\u043e\u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u043f\u043b\u0451\u043d\u043a\u0443.<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6584a3413eb8e176bf051b01\" data-style=\"\" id=\"6584a3413eb8e176bf051b01\" width=\"\"><\/div>\n<h4>\u0414\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0435 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0435<\/h4>\n<p>\u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u043f\u043e\u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441 \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438 \u0432 <a href=\"https:\/\/grainy-gradients.vercel.app\/\" rel=\"noopener noreferrer nofollow\">\u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0435<\/a>, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a \u043e\u043d\u0438 \u0432\u043b\u0438\u044f\u044e\u0442 \u043d\u0430 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0443.<\/p>\n<p>\u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u044d\u0442\u0443 \u0442\u0435\u0445\u043d\u0438\u043a\u0443 \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0437\u0432\u0438\u0442\u044c \u0438 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043c\u0438:<\/p>\n<ul>\n<li>\n<p><strong>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0440\u0443\u0433\u043e\u0439 SVG:<\/strong>\u00a0\u0432\u043e \u0432\u0441\u0435\u0445 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0430\u0445 \u0438\u0437 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 SVG, \u043d\u043e \u0432 <a href=\"https:\/\/grainy-gradients.vercel.app\/\" rel=\"noopener noreferrer nofollow\">\u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0435<\/a> \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0438\u0433\u0440\u0430\u0442\u044c\u0441\u044f \u0441 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u044e\u0449\u0438\u043c\u0438 \u0448\u0443\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438, \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u0440\u0435\u0433\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0437\u0435\u0440\u043d\u0438\u0441\u0442\u043e\u0441\u0442\u044c, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434 .<\/p>\n<\/li>\n<li>\n<p><strong>\u041f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u044b:<\/strong>\u00a0\u043a\u0440\u043e\u043c\u0435<code>linear-gradient<\/code> \u0432 CSS \u0435\u0441\u0442\u044c \u0435\u0449\u0451 \u0447\u0435\u0442\u044b\u0440\u0435 \u0442\u0438\u043f\u0430 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u0432. \u041c\u043e\u0436\u0435\u0442\u0435 \u0432\u0441\u043f\u043e\u043c\u043d\u0438\u0442\u044c \u0438\u0445? (<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/gradient\/repeating-conic-gradient\" rel=\"noopener noreferrer nofollow\">\u0412\u043e\u0442 \u043e\u0434\u0438\u043d \u0438\u0437 \u043d\u0438\u0445.<\/a>)<\/p>\n<\/li>\n<li>\n<p><strong>\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u0441\u043b\u043e\u0438:<\/strong>\u00a0\u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 CSS-\u0441\u043c\u0435\u0448\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u043b\u043e\u0436\u0438\u0442\u044c \u0434\u0440\u0443\u0433 \u043d\u0430 \u0434\u0440\u0443\u0433\u0430 \u043b\u044e\u0431\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u043b\u043e\u0451\u0432 \u0438 \u0441\u043c\u0435\u0448\u0430\u0442\u044c \u0438\u0445.<\/p>\n<\/li>\n<li>\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u0435 SVG-\u0444\u0438\u043b\u044c\u0442\u0440\u044b:<\/strong>\u00a0\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0440\u0430\u0437\u043d\u044b\u0445 \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0433\u0430\u0443\u0441\u0441\u043e\u0432\u043e \u0440\u0430\u0437\u043c\u044b\u0442\u0438\u0435 \u0438 \u0440\u0430\u0437\u043d\u044b\u0435 \u0442\u0438\u043f\u044b \u043e\u0441\u0432\u0435\u0449\u0435\u043d\u0438\u044f. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043d\u0430 \u043d\u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f \u0432 CSS-\u0444\u0438\u043b\u044c\u0442\u0440\u0435 \u0438 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/SVG\/Applying_SVG_effects_to_HTML_content\" rel=\"noopener noreferrer nofollow\">\u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u043a \u043b\u044e\u0431\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443<\/a>\u00a0\u0432 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043a SVG.<\/p>\n<\/li>\n<\/ul>\n<h4>\u0411\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430<\/h4>\n<p>\u041d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0442\u0435\u043c\u044b \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438. \u0411\u0430\u0437\u0430 \u044d\u0442\u043e\u0439 \u0442\u0435\u0445\u043d\u0438\u043a\u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432\u0441\u0435\u043c\u0438 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438. \u041a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0433\u0430\u0434\u0430\u0442\u044c\u0441\u044f, \u043e\u043d\u0430 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 Internet Explorer. \u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, Internet Explorer \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 <a href=\"https:\/\/caniuse.com\/svg-css\" rel=\"noopener noreferrer nofollow\">SVG \u043a\u0430\u043a \u0444\u043e\u043d \u0434\u043b\u044f CSS<\/a>\u00a0(\u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0435 \u0441\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c CSS\u00a0<code>filter<\/code>).<\/p>\n<h4>SVG \u043a\u0430\u043a \u0444\u043e\u043d\u043e\u0432\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 CSS<\/h4>\n<p>\u042d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0439 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0435 \u0432\u0437\u044f\u0442\u044b \u0441 <a href=\"http:\/\/caniuse.com\/#feat=svg-css\" rel=\"noopener noreferrer nofollow\">Caniuse<\/a>, \u0433\u0434\u0435 \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u0438\u0437\u0443\u0447\u0438\u0442\u044c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435. \u0427\u0438\u0441\u043b\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043e\u0442 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u0438 \u0432\u044b\u0448\u0435.<\/p>\n<figure class=\"full-width\"><\/figure>\n<h4>\u042d\u0444\u0444\u0435\u043a\u0442\u044b \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432 CSS<\/h4>\n<figure class=\"full-width\"><\/figure>\n<p>\u0415\u0449\u0451 \u044f \u0437\u0430\u043c\u0435\u0442\u0438\u043b, \u0447\u0442\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 Blink (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, Chrome) \u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 WebKit (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, Safari) \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0442 <code>mix-blend-mode<\/code>\u00a0\u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e-\u0440\u0430\u0437\u043d\u043e\u043c\u0443, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 CSS-\u0441\u043c\u0435\u0448\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u044c\u0442\u0435 \u0435\u0433\u043e \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445. \u0412 \u0441\u0432\u043e\u0438\u0445 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b <a href=\"http:\/\/browserhacks.com\/\" rel=\"noopener noreferrer nofollow\">browser-specific media queries<\/a>\u00a0, \u0447\u0442\u043e\u0431\u044b \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0440\u0430\u0437\u0440\u0435\u0448\u0430\u0442\u044c \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0435 \u0440\u0430\u0437\u043b\u0438\u0447\u0438\u044f \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0432 CSS.<\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><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\/ru\/articles\/780840\/\"> https:\/\/habr.com\/ru\/articles\/780840\/<\/a><br \/><\/br><\/br><\/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-363029","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/363029","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=363029"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/363029\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=363029"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=363029"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=363029"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}