{"id":397583,"date":"2024-06-29T13:32:39","date_gmt":"2024-06-29T13:32:39","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=397583"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=397583","title":{"rendered":"<span>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u044b \u043c\u0430\u0441\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0432 CSS<\/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-1\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\"><a href=\"https:\/\/habr.com\/ru\/companies\/ruvds\/articles\/729974\/\"><\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/nn\/tp\/af\/nntpafof0gvulj0y3k55_cdlrw0.png\" data-src=\"https:\/\/habrastorage.org\/webt\/nn\/tp\/af\/nntpafof0gvulj0y3k55_cdlrw0.png\"\/><\/div>\n<p><\/a><br \/>  \u0412 \u043c\u0438\u0440\u0435 \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u043c\u0430\u0441\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0439 \u0442\u0435\u0445\u043d\u0438\u043a\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432. \u0411\u0443\u0434\u0443\u0447\u0438 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u043e\u043c, \u044f \u0441\u0430\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u044d\u0442\u0443 \u0442\u0435\u0445\u043d\u0438\u043a\u0443 \u043c\u043d\u043e\u0433\u043e \u0440\u0430\u0437, \u043d\u043e \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0447\u0430\u0441\u0442\u043e \u0432 \u0432\u0435\u0431-\u0441\u0440\u0435\u0434\u0435. \u0414\u0443\u043c\u0430\u044e, \u0447\u0442\u043e \u043e\u0442 \u0435\u0451 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043d\u0430 \u0441\u0430\u0439\u0442\u0430\u0445 \u043c\u0435\u043d\u044f \u0443\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u043b\u0430 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438. \u041f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e \u044d\u0442\u043e\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 Safari \u0438 Firefox, \u0430 \u0432\u043e\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u043d\u0430 \u0434\u0432\u0438\u0436\u043a\u0435 Blink (Chrome \u0438 Edge) \u2014 \u043b\u0438\u0448\u044c \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e.<\/p>\n<p>  \u0420\u0430\u0434\u0443\u0435\u0442 \u0442\u043e, \u0447\u0442\u043e \u0442\u0435\u043c\u0430 CSS \u043c\u0430\u0441\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0447\u0430\u0441\u0442\u044c\u044e <a href=\"https:\/\/web.dev\/interop-2023\/\">Interop 2023<\/a>, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442, \u0432\u0441\u043a\u043e\u0440\u0435 \u043c\u043e\u0436\u043d\u043e \u043e\u0436\u0438\u0434\u0430\u0442\u044c \u043a\u0440\u043e\u0441\u0441-\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u0443\u044e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u044d\u0442\u043e\u0439 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 (\u0412\u0430\u0443!).<\/p>\n<p>  \u0412 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u043f\u0440\u043e\u0433\u043e\u0432\u043e\u0440\u044e, \u0447\u0442\u043e \u0432\u043e\u043e\u0431\u0449\u0435 \u0442\u0430\u043a\u043e\u0435 CSS \u043c\u0430\u0441\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u043e\u0431\u044a\u044f\u0441\u043d\u044e, \u043a\u0430\u043a \u043e\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0443 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<p>  \u041f\u043e\u0435\u0445\u0430\u043b\u0438!<a name=\"habracut\"><\/a><\/p>\n<h2><font color=\"#3AC1EF\">\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435<\/font><\/h2>\n<p>  <\/p>\n<ul>\n<li><a href=\"#anchorid1\">\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u043c\u0430\u0441\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435?<\/a><\/li>\n<li><a href=\"#anchorid2\">\u041a\u0430\u043a \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u043c\u0430\u0441\u043a\u0438 \u0432 CSS?<\/a><\/li>\n<li><a href=\"#anchorid3\">\u041c\u0430\u0441\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u0432<\/a><\/li>\n<li><a href=\"#anchorid4\">\u041f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b<\/a><br \/> \n<ul>\n<li><a href=\"#anchorid5\">\u0417\u0430\u0442\u0435\u043d\u0435\u043d\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f<\/a><\/li>\n<li><a href=\"#anchorid6\">\u041c\u0430\u0441\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0442\u0435\u043a\u0441\u0442\u0430: \u043f\u0440\u0438\u043c\u0435\u0440 1<\/a><\/li>\n<li><a href=\"#anchorid7\">\u041c\u0430\u0441\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0442\u0435\u043a\u0441\u0442\u0430: \u043f\u0440\u0438\u043c\u0435\u0440 2<\/a><\/li>\n<li><a href=\"#anchorid8\">\u041c\u0430\u0441\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u043f\u0438\u0441\u043a\u043e\u0432<\/a><\/li>\n<li><a href=\"#anchorid9\">\u0418\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0434\u043b\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439<\/a><\/li>\n<li><a href=\"#anchorid10\">\u0421\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u0435 \u0432\u043a\u043b\u0430\u0434\u043e\u043a<\/a><\/li>\n<li><a href=\"#anchorid11\">\u0412\u044b\u0440\u0435\u0437\u043a\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0430\u0432\u0430\u0442\u0430\u0440\u043e\u0432<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#anchorid12\">\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/a><\/li>\n<li><a href=\"#anchorid13\">\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b<\/a><\/li>\n<\/ul>\n<p>  <a name=\"anchorid1\"><\/a><\/p>\n<h2><font color=\"#3AC1EF\">\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u043c\u0430\u0441\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435?<\/font><\/h2>\n<p>  \u0412 \u0441\u0432\u043e\u0435\u0439 \u0441\u0443\u0442\u0438 \u043c\u0430\u0441\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u043e\u0434\u0440\u0430\u0437\u0443\u043c\u0435\u0432\u0430\u0435\u0442 \u0441\u043a\u0440\u044b\u0442\u0438\u0435 \u0447\u0430\u0441\u0442\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0431\u0435\u0437 \u0435\u0433\u043e \u0441\u0442\u0438\u0440\u0430\u043d\u0438\u044f.<\/p>\n<p>  \u0412\u0437\u0433\u043b\u044f\u043d\u0438\u0442\u0435 \u043d\u0430 \u044d\u0442\u043e\u0442 \u0440\u0438\u0441\u0443\u043d\u043e\u043a:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/ac\/y1\/qq\/acy1qqymhmtrd7umk6n2ppn6elw.png\" data-src=\"https:\/\/habrastorage.org\/webt\/ac\/y1\/qq\/acy1qqymhmtrd7umk6n2ppn6elw.png\"\/><\/p>\n<p>  \u0417\u0434\u0435\u0441\u044c \u0443 \u043d\u0430\u0441 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438 \u043c\u0430\u0441\u043a\u0430. \u0412 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445 \u0434\u043b\u044f \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u0432\u0440\u043e\u0434\u0435 Photoshop \u043c\u043e\u0436\u043d\u043e \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432 \u0441\u0435\u0440\u0443\u044e \u0444\u0438\u0433\u0443\u0440\u0443, \u043f\u043e\u043b\u0443\u0447\u0430\u044f \u0435\u0433\u043e \u043c\u0430\u0441\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u0444\u043e\u0440\u043c\u0443.<\/p>\n<p>  \u041f\u0440\u0438\u043d\u0446\u0438\u043f \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u043a\u0440\u044b\u0442\u0438\u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0447\u0430\u0441\u0442\u0435\u0439 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0431\u0435\u0437 \u0438\u0445 \u0441\u0442\u0438\u0440\u0430\u043d\u0438\u044f.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/mz\/p6\/tc\/mzp6tczj9hohqnyyxzxv9d9izqa.png\" data-src=\"https:\/\/habrastorage.org\/webt\/mz\/p6\/tc\/mzp6tczj9hohqnyyxzxv9d9izqa.png\"\/><\/p>\n<p>  \u042d\u0442\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043f\u0440\u0438\u043d\u0446\u0438\u043f \u043c\u0430\u0441\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u043f\u043e\u0434\u0440\u0430\u0437\u0443\u043c\u0435\u0432\u0430\u044e\u0449\u0438\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u0435\u043a\u043e\u0439 \u0444\u0438\u0433\u0443\u0440\u044b (\u043c\u0430\u0441\u043a\u0438) \u0434\u043b\u044f \u043f\u043e\u043a\u0430\u0437\u0430\/\u0441\u043a\u0440\u044b\u0442\u0438\u044f \u0447\u0430\u0441\u0442\u0435\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0442\u0430\u043a\u0436\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0431\u043e\u043b\u0435\u0435 \u0433\u043b\u0443\u0431\u043e\u043a\u0438\u0435 \u0438 \u0431\u043e\u043b\u0435\u0435 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u043c\u0430\u0441\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430.<\/p>\n<p>  \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043d\u0443\u044e \u043c\u0430\u0441\u043a\u0443:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/u1\/jp\/ec\/u1jpecbzw2_zu3vupjqz4wdrako.png\" data-src=\"https:\/\/habrastorage.org\/webt\/u1\/jp\/ec\/u1jpecbzw2_zu3vupjqz4wdrako.png\"\/><\/p>\n<p>  \u0412 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0435 \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0442 \u0437\u0430\u043a\u0440\u0430\u0448\u0435\u043d\u043d\u044b\u0435 \u0438 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u0435 \u043f\u0438\u043a\u0441\u0435\u043b\u0438. \u0417\u0430\u043a\u0440\u0430\u0448\u0435\u043d\u043d\u044b\u0435 \u0441\u043e\u043e\u0442\u043d\u043e\u0441\u044f\u0442\u0441\u044f \u0441 \u0432\u0438\u0434\u0438\u043c\u044b\u043c\u0438 \u0447\u0430\u0441\u0442\u044f\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0430 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u0435 \u2014 \u0441\u043e \u0441\u043a\u0440\u044b\u0442\u044b\u043c\u0438.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/sp\/ct\/ht\/spcthtmu7pgtgs5jc7gnkpv5jjo.png\" data-src=\"https:\/\/habrastorage.org\/webt\/sp\/ct\/ht\/spcthtmu7pgtgs5jc7gnkpv5jjo.png\"\/><\/p>\n<p>  \u0412 Photoshop \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u043b\u043e\u0439 \u043c\u0430\u0441\u043a\u0438 \u043a \u0446\u0435\u043b\u043e\u0439 \u0433\u0440\u0443\u043f\u043f\u0435 \u0441\u043b\u043e\u0451\u0432, \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044f \u0435\u0433\u043e \u043a \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u043c\u0443 \u044d\u0442\u043e\u0439 \u0433\u0440\u0443\u043f\u043f\u044b. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0434\u043b\u044f \u043c\u0430\u0441\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0447\u0430\u0441\u0442\u0438 \u0433\u0440\u0443\u043f\u043f\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u00ab\u043a\u0438\u0441\u0442\u044c\u00bb.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/qb\/sw\/gj\/qbswgjo2-oe_apbvzzrhss884e4.png\" data-src=\"https:\/\/habrastorage.org\/webt\/qb\/sw\/gj\/qbswgjo2-oe_apbvzzrhss884e4.png\"\/><\/p>\n<p>  \u041c\u0430\u0441\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043d\u0435 \u0441\u0442\u0438\u0440\u0430\u0435\u0442\u0441\u044f, \u0430 \u043b\u0438\u0448\u044c \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f (\u043e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0433\u0440\u0443\u043f\u043f\u044b).<\/p>\n<p>  \u0425\u043e\u0440\u043e\u0448\u043e, \u0442\u0435\u043e\u0440\u0438\u0438 \u0445\u0432\u0430\u0442\u0438\u0442. \u0414\u0430\u043b\u0435\u0435 \u043c\u044b \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u043c\u0430\u0441\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0432 CSS.<\/p>\n<p>  <a name=\"anchorid2\"><\/a><\/p>\n<h2><font color=\"#3AC1EF\">\u041a\u0430\u043a \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u043c\u0430\u0441\u043a\u0438 \u0432 CSS<\/font><\/h2>\n<p>  \u0412 CSS \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u0434\u043b\u044f \u043c\u0430\u0441\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432:<\/p>\n<ul>\n<li>\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>mask<\/code>;<\/li>\n<li>\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>clip-path<\/code>;<\/li>\n<li>SVG &lt;mask>.<\/li>\n<\/ul>\n<p>  \u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0435 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438 <code>mask<\/code> \u0438 <code>clip-path<\/code> \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043f\u0435\u0440\u0432\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0438 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u0432, \u0430 \u0432\u0442\u043e\u0440\u043e\u0435 \u0434\u043b\u044f \u043f\u0443\u0442\u0435\u0439. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u0430\u043a\u0446\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u0441\u0434\u0435\u043b\u0430\u043d \u043d\u0430 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 <code>mask<\/code>.<\/p>\n<p>  \u0415\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0437\u0432\u0430\u0442\u044c \u0441\u043e\u043a\u0440\u0430\u0449\u0451\u043d\u043d\u044b\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>background<\/code>, \u043d\u043e \u0441\u043e \u0441\u0432\u043e\u0438\u043c\u0438 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044f\u043c\u0438.<\/p>\n<p>  \u0412\u043c\u0435\u0441\u0442\u043e \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u0432\u0441\u0435\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u043c\u0430\u0441\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0432 CSS, \u044f \u043f\u043e\u043a\u0430\u0436\u0443 \u043f\u0440\u0438\u043c\u0435\u0440 \u0441 \u043f\u043e\u044d\u0442\u0430\u043f\u043d\u044b\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u043c\u0430\u0441\u043a\u0438, \u0447\u0442\u043e\u0431\u044b \u0432\u044b \u043c\u043e\u0433\u043b\u0438 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0440\u0430\u0437\u043d\u0438\u0446\u0443.<\/p>\n<p>  \u041f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 <code>background<\/code> \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<pre><code class=\"css\">.card__thumb {     background-image: url('hero-cool.png'); } \u0410 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043c\u0430\u0441\u043a\u0438 \u0442\u0430\u043a: .card__thumb {     mask-image: url('hero-cool.png'); }<\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/kg\/ie\/sd\/kgiesdogmkq2yovfj4t4xwrnr0y.png\" data-src=\"https:\/\/habrastorage.org\/webt\/kg\/ie\/sd\/kgiesdogmkq2yovfj4t4xwrnr0y.png\"\/><\/p>\n<p>  \u041a\u0440\u0443\u0442\u043e, \u043f\u0440\u0430\u0432\u0434\u0430? \u0422\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442 \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0438 \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u0435 \u043c\u0430\u0441\u043e\u043a.<\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u0432\u0442\u043e\u0440\u0438\u043c \u0432 CSS \u043d\u0430\u0448 \u043f\u0435\u0440\u0432\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440.<\/p>\n<p>  \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0443\u0436\u043d\u043e \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0444\u0438\u0433\u0443\u0440\u0443 \u0432 \u0432\u0438\u0434\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f png.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/ui\/jk\/-1\/uijk-1g0fbtisv7_y4qbyuqnlnu.png\" data-src=\"https:\/\/habrastorage.org\/webt\/ui\/jk\/-1\/uijk-1g0fbtisv7_y4qbyuqnlnu.png\"\/><\/p>\n<p>  \u041f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u044f \u0445\u043e\u0447\u0443 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u043a \u044d\u0442\u043e\u043c\u0443 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044e \u043c\u0430\u0441\u043a\u0443.<\/p>\n<pre><code class=\"xml\">&lt;img src=\"ahmad-shadeed-web-directions.jpg\" alt=\"\" \/><\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">img {     mask-image: url(\"shape.png\"); }<\/code><\/pre>\n<p>  \u041c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c, \u043a\u0430\u043a\u043e\u0439 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442? \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043c\u0430\u0441\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0442\u044c\u0441\u044f, \u0438 \u0435\u0451 \u0440\u0430\u0437\u043c\u0435\u0440 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u0443 \u0435\u0451 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u0421\u0435\u0439\u0447\u0430\u0441 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u0442\u0430\u043a\u043e\u0439:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/ct\/ed\/uj\/ctedujl6wh5kgsvbst1dlg_la28.png\" data-src=\"https:\/\/habrastorage.org\/webt\/ct\/ed\/uj\/ctedujl6wh5kgsvbst1dlg_la28.png\"\/><\/p>\n<p>  \u0427\u0442\u043e\u0431\u044b \u044d\u0442\u043e \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c, <code>mask-repeat<\/code>, \u043a\u0430\u043a \u0438 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 \u0444\u043e\u043d\u043e\u0432\u044b\u043c\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438, \u043d\u0443\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043d\u0430 <code>no-repeat<\/code>.<\/p>\n<pre><code class=\"css\">img {     mask-image: url(\"shape.png\");     mask-repeat: no-repeat; }<\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/0p\/_-\/vr\/0p_-vrh8gqsgqehmgkrjj60cs0g.png\" data-src=\"https:\/\/habrastorage.org\/webt\/0p\/_-\/vr\/0p_-vrh8gqsgqehmgkrjj60cs0g.png\"\/><\/p>\n<p>  \u041f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u043e! \u0417\u0430\u043c\u0435\u0442\u044c\u0442\u0435, \u0447\u0442\u043e \u043c\u0430\u0441\u043a\u0430 \u043e\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u0432 \u0432\u0435\u0440\u0445\u043d\u0435\u043c \u043b\u0435\u0432\u043e\u043c \u0443\u0433\u043b\u0443. \u0415\u0451 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>mask-position<\/code>. \u041e\u043f\u044f\u0442\u044c \u0436\u0435, \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0438\u0434\u0435\u043d\u0442\u0438\u0447\u0435\u043d \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0443 \u0434\u043b\u044f \u0444\u043e\u043d\u043e\u0432\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439.<\/p>\n<pre><code class=\"css\">img {     mask-image: url(\"shape.png\");     mask-repeat: no-repeat;     mask-position: center; }<\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/nv\/2a\/vo\/nv2avomfstrh0ctfvzy1ubgk_-a.png\" data-src=\"https:\/\/habrastorage.org\/webt\/nv\/2a\/vo\/nv2avomfstrh0ctfvzy1ubgk_-a.png\"\/><\/p>\n<p>  \u041f\u043e\u043c\u0438\u043c\u043e \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043c\u0430\u0441\u043a\u0438, \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0435\u0451 \u0440\u0430\u0437\u043c\u0435\u0440. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043c\u0430\u0441\u043a\u0438 \u043e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u044b\u043c \u043a \u0440\u0430\u0437\u043c\u0435\u0440\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.<\/p>\n<pre><code class=\"css\">img {     mask-image: url(\"shape.png\");     mask-repeat: no-repeat;     mask-position: center;     mask-size: 60%; }<\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/r6\/r2\/cr\/r6r2cr8aobeuxgh4p7zg0y0kcrm.png\" data-src=\"https:\/\/habrastorage.org\/webt\/r6\/r2\/cr\/r6r2cr8aobeuxgh4p7zg0y0kcrm.png\"\/><\/p>\n<p>  \u0423 \u043c\u0430\u0441\u043e\u043a \u0435\u0441\u0442\u044c \u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u043d\u043e \u043f\u043e\u043a\u0430 \u044f \u043d\u0435 \u0445\u043e\u0447\u0443 \u0432\u0430\u0441 \u0438\u043c\u0438 \u043f\u0435\u0440\u0435\u0433\u0440\u0443\u0436\u0430\u0442\u044c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043b\u0443\u0447\u0448\u0435 \u043f\u043e\u043a\u0430\u0436\u0443 \u0438\u0445 \u043f\u043e\u0437\u0434\u043d\u0435\u0435 \u0443\u0436\u0435 \u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445.<\/p>\n<p>  <a name=\"anchorid3\"><\/a><\/p>\n<h2><font color=\"#3AC1EF\">\u041c\u0430\u0441\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u0432<\/font><\/h2>\n<p>  \u0412 CSS \u043c\u0430\u0441\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u2013 \u044d\u0442\u043e \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043c\u043e\u0449\u043d\u044b\u0445 \u0438 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432.<\/p>\n<p>  \u0427\u0443\u0442\u044c \u043f\u043e\u0437\u0436\u0435 \u044f \u043f\u043e\u043a\u0430\u0436\u0443 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b, \u0430 \u043f\u043e\u043a\u0430 \u0445\u043e\u0447\u0443 \u0441\u043e\u0441\u0440\u0435\u0434\u043e\u0442\u043e\u0447\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0430\u0445 \u0440\u0430\u0431\u043e\u0442\u044b \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u0432 \u043f\u0440\u0438 \u043c\u0430\u0441\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438.<\/p>\n<p>  \u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 <code>mask-image<\/code> \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u043b\u0438\u043d\u0435\u0439\u043d\u043e\u0433\u043e \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0430, \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044f\u0449\u0435\u0433\u043e \u043e\u0442 \u0447\u0451\u0440\u043d\u043e\u0433\u043e \u043a \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u043c\u0443.<\/p>\n<pre><code class=\"css\">img {     mask-image: linear-gradient(#000, transparent); }<\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/tx\/ly\/-1\/txly-1ylx_h-9pfcg93x9mqvqia.png\" data-src=\"https:\/\/habrastorage.org\/webt\/tx\/ly\/-1\/txly-1ylx_h-9pfcg93x9mqvqia.png\"\/><\/p>\n<blockquote><p>\u0418\u0437 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/mask-image\">MDN<\/a>:<\/p>\n<p>  \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u044d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0430\u043b\u044c\u0444\u0430-\u043a\u0430\u043d\u0430\u043b \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043c\u0430\u0441\u043a\u0438, \u0431\u0443\u0434\u0435\u0442 \u0443\u043c\u043d\u043e\u0436\u0435\u043d \u043d\u0430 \u0430\u043b\u044c\u0444\u0430-\u043a\u0430\u043d\u0430\u043b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u0423\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u044d\u0442\u0438\u043c \u043c\u043e\u0436\u043d\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>mask-mode<\/code>.<\/p><\/blockquote>\n<p>  \u0422\u043e \u0435\u0441\u0442\u044c \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u043c\u0430\u0441\u043a\u0438 \u043b\u044e\u0431\u043e\u0439 \u0446\u0432\u0435\u0442, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043f\u0440\u0435\u0434\u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u0440\u0435\u0436\u0438\u043c \u043c\u0430\u0441\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d \u043d\u0430 <code>alpha<\/code> (\u043f\u043e\u0437\u0434\u043d\u0435\u0435 \u044f \u043f\u043e\u044f\u0441\u043d\u044e \u044d\u0442\u043e \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e).<\/p>\n<pre><code class=\"css\">img {     mask-image: linear-gradient(red, transparent); }<\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/dl\/by\/ot\/dlbyotyu9-qdwu7uvtzwntbbvvm.png\" data-src=\"https:\/\/habrastorage.org\/webt\/dl\/by\/ot\/dlbyotyu9-qdwu7uvtzwntbbvvm.png\"\/><\/p>\n<p>  \u041e\u043f\u044f\u0442\u044c \u0436\u0435, \u043f\u0440\u0438\u043d\u0446\u0438\u043f \u043c\u0430\u0441\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u043a\u0440\u044b\u0442\u0438\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u043c\u0438 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u043c\u0438. \u0412\u043e\u0442 \u0443\u043f\u0440\u043e\u0449\u0451\u043d\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0430 \u0441 \u0436\u0451\u0441\u0442\u043a\u0438\u043c \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u043c \u0446\u0432\u0435\u0442\u0430:<\/p>\n<pre><code class=\"css\">img {     mask-image: linear-gradient(#000 50%, transparent 0); }<\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/ls\/1h\/lj\/ls1hljs0zdc0aed3le8sskn00mi.png\" data-src=\"https:\/\/habrastorage.org\/webt\/ls\/1h\/lj\/ls1hljs0zdc0aed3le8sskn00mi.png\"\/><\/p>\n<p>  \u041e\u0442\u043b\u0438\u0447\u043d\u043e! \u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c \u0441 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u043c\u0438 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0430\u043c\u0438 \u043c\u0430\u0441\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u0435\u0432 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043c\u0430\u0441\u043e\u043a \u0432 CSS.<\/p>\n<p>  <a name=\"anchorid4\"><\/a><\/p>\n<h2><font color=\"#3AC1EF\">\u041f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b<\/font><\/h2>\n<p>  <a name=\"anchorid5\"><\/a><\/p>\n<h3><font color=\"#3AC1EF\">\u258d \u0417\u0430\u0442\u0443\u0445\u0430\u043d\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f<\/font><\/h3>\n<p>  \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0433\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043c\u0430\u0441\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u0437\u0430\u0442\u0443\u0445\u0430\u043d\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u0438 \u0435\u0433\u043e \u0441\u043c\u0435\u0448\u0438\u0432\u0430\u043d\u0438\u0438 \u0441 \u0444\u043e\u043d\u043e\u0432\u043e\u0439 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u043e\u0439.<\/p>\n<p>  \u0412\u0437\u0433\u043b\u044f\u043d\u0438\u0442\u0435 \u043d\u0430 \u044d\u0442\u0443 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/de\/8h\/pe\/de8hpedau0vppc7mhhar_bmic2u.png\" data-src=\"https:\/\/habrastorage.org\/webt\/de\/8h\/pe\/de8hpedau0vppc7mhhar_bmic2u.png\"\/><\/p>\n<p>  \u041d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u0442\u0443\u0442 \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442 \u0441 \u0442\u0435\u043c \u0436\u0435 \u0446\u0432\u0435\u0442\u043e\u043c, \u0447\u0442\u043e \u0438 \u0444\u043e\u043d. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0442\u0430\u043a:<\/p>\n<pre><code class=\"css\">.hero__thumb:after {     position: absolute;     inset: 0;     background: linear-gradient(to top, #f1f1f1, transparent) }<\/code><\/pre>\n<p>  \u0418 \u0445\u043e\u0442\u044f \u0442\u0430\u043a\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043c\u043e\u0436\u0435\u0442 \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c, \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0444\u043e\u043d\u043e\u0432\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430 \u0432\u0441\u0451 \u043d\u0430\u0440\u0443\u0448\u0438\u0442\u0441\u044f. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e hero-\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0442\u0435\u043f\u0435\u0440\u044c \u0438\u043c\u0435\u0435\u0442 \u0436\u0451\u0441\u0442\u043a\u0438\u0439 \u043f\u0435\u0440\u0435\u0445\u043e\u0434:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/g4\/bp\/t0\/g4bpt0jzy8swcz3wyr_z6cz9lvm.png\" data-src=\"https:\/\/habrastorage.org\/webt\/g4\/bp\/t0\/g4bpt0jzy8swcz3wyr_z6cz9lvm.png\"\/><\/p>\n<p>  \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u044b \u043c\u043e\u0436\u043d\u043e \u043c\u0430\u0441\u043a\u0438\u0440\u043e\u0432\u0430\u0442\u044c hero-\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e \u0441 \u043b\u044e\u0431\u044b\u043c \u0446\u0432\u0435\u0442\u043e\u043c \u0444\u043e\u043d\u0430.<\/p>\n<pre><code class=\"css\">.hero__thumb {     mask-image: linear-gradient(#000, transparent); }<\/code><\/pre>\n<p>  \u0412\u043e\u0442 \u0438 \u0432\u0441\u0451! \u0422\u0435\u043f\u0435\u0440\u044c \u044d\u0444\u0444\u0435\u043a\u0442 \u0437\u0430\u0442\u0443\u0445\u0430\u043d\u0438\u044f \u0440\u0435\u0430\u043b\u0435\u043d \u0438 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0444\u043e\u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043d\u0435 \u043d\u0430\u0440\u0443\u0448\u0438\u0442\u0441\u044f.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/nn\/tp\/af\/nntpafof0gvulj0y3k55_cdlrw0.png\" data-src=\"https:\/\/habrastorage.org\/webt\/nn\/tp\/af\/nntpafof0gvulj0y3k55_cdlrw0.png\"\/><\/p>\n<p>  <a name=\"anchorid6\"><\/a><\/p>\n<h3><font color=\"#3AC1EF\">\u258d \u041c\u0430\u0441\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0442\u0435\u043a\u0441\u0442\u0430: \u043f\u0440\u0438\u043c\u0435\u0440 1<\/font><\/h3>\n<p>  \u041a\u043e\u0433\u0434\u0430 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u0434\u043b\u0438\u043d\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442, \u043d\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 \u043f\u043e\u0434 \u043d\u0435\u0433\u043e \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442, \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0435\u0433\u043e \u0437\u0430\u0442\u0443\u0445\u0430\u043d\u0438\u0435 \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u0438 \u043a\u043e\u043d\u0446\u0435. \u0412 \u0438\u0442\u043e\u0433\u0435 \u043d\u0435\u0432\u0438\u0434\u0438\u043c\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u0442\u0435\u043a\u0441\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e\u043c \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u043e\u0431\u043e\u0438\u0445 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f\u0445.<\/p>\n<p>  \u0412\u043e\u0437\u044c\u043c\u0451\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0440\u0438\u0441\u0443\u043d\u043e\u043a:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/1_\/dn\/ea\/1_dneaa3xhsic9dy179hcil20_w.png\" data-src=\"https:\/\/habrastorage.org\/webt\/1_\/dn\/ea\/1_dneaa3xhsic9dy179hcil20_w.png\"\/><\/p>\n<p>  \u041e\u043f\u044f\u0442\u044c \u0436\u0435, \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0430 \u0437\u0434\u0435\u0441\u044c \u043d\u0435 \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0444\u043e\u043d\u043e\u0432\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0441\u043f\u043b\u043e\u0448\u043d\u043e\u0439 \u0446\u0432\u0435\u0442 \u0438\u043b\u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/lu\/_t\/ep\/lu_tepqofd89wasijvgkifvut5g.png\" data-src=\"https:\/\/habrastorage.org\/webt\/lu\/_t\/ep\/lu_tepqofd89wasijvgkifvut5g.png\"\/><\/p>\n<p>  \u0427\u0442\u043e\u0431\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u043c\u0430\u043a\u0435\u0442 \u0432 CSS, \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043d\u0443\u044e \u043c\u0430\u0441\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0438\u0432\u0435\u0434\u0451\u0442 \u043a \u0437\u0430\u0442\u0443\u0445\u0430\u043d\u0438\u044e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u0438 \u043a\u043e\u043d\u0446\u0435.<\/p>\n<p>  \u041c\u043d\u0435 \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0441\u0430\u043c \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442 \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0439 \u043e\u0446\u0435\u043d\u043a\u0438 \u0438 \u0443\u0436\u0435 \u043f\u043e\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0435\u0433\u043e \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043c\u0430\u0441\u043a\u0438.<\/p>\n<pre><code class=\"css\">.c-card__footer {     background-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent 100%); }<\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/bg\/yc\/il\/bgycilqjt1fztcnzgybxo_jzpho.png\" data-src=\"https:\/\/habrastorage.org\/webt\/bg\/yc\/il\/bgycilqjt1fztcnzgybxo_jzpho.png\"\/><\/p>\n<p>  \u0413\u0440\u0430\u0434\u0438\u0435\u043d\u0442 \u0433\u043e\u0442\u043e\u0432. \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043c\u0430\u0441\u043a\u0438:<\/p>\n<pre><code class=\"css\">.c-card__footer {     mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent 100%); }<\/code><\/pre>\n<p>  \u041f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u043d\u0435 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e? \u041c\u043e\u0436\u043d\u043e \u043f\u043e\u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0430, \u043f\u043e\u043a\u0430 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0438\u0433\u043d\u0443\u0442 \u0436\u0435\u043b\u0430\u0435\u043c\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442.<\/p>\n<p>  <a name=\"anchorid7\"><\/a><\/p>\n<h3><font color=\"#3AC1EF\">\u258d \u041c\u0430\u0441\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0442\u0435\u043a\u0441\u0442\u0430: \u043f\u0440\u0438\u043c\u0435\u0440 2<\/font><\/h3>\n<p>  \u042d\u0442\u043e \u0442\u043e\u0442 \u0436\u0435 \u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u043c. \u042f \u0432\u0438\u0434\u0435\u043b \u0442\u0430\u043a\u043e\u0435 \u0432 \u0440\u043e\u043b\u0438\u043a\u0430\u0445 \u043d\u0430 Instagram.<\/p>\n<p>  \u0412\u0437\u0433\u043b\u044f\u043d\u0438\u0442\u0435 \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/7b\/1q\/3h\/7b1q3hneird1t0pe4npeqan_h54.png\" data-src=\"https:\/\/habrastorage.org\/webt\/7b\/1q\/3h\/7b1q3hneird1t0pe4npeqan_h54.png\"\/><\/p>\n<p>  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0432\u0435\u0440\u0445\u043d\u044f\u044f \u0447\u0430\u0441\u0442\u044c \u0442\u0435\u043a\u0441\u0442\u0430 \u0440\u0430\u0437\u043c\u044b\u0432\u0430\u0435\u0442\u0441\u044f. \u0412 \u044d\u0442\u043e\u0439 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043c\u043e\u0433\u0443\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438 \u043a \u043b\u0435\u043d\u0442\u0435, \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0438 \u043f\u0440\u043e\u0447\u0435\u0435. \u041c\u0430\u0441\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u0434\u043e\u0439\u0434\u0451\u0442.<\/p>\n<p>  \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0441\u0430\u043c \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/ek\/zx\/sc\/ekzxscc52fi8abi4tywv60mdvqk.png\" data-src=\"https:\/\/habrastorage.org\/webt\/ek\/zx\/sc\/ekzxscc52fi8abi4tywv60mdvqk.png\"\/><\/p>\n<p>  \u0412 CSS \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<\/p>\n<pre><code class=\"css\">.whatever-the-class-name {     mask-image: linear-gradient(to bottom, transparent, #000); }<\/code><\/pre>\n<p>  <a name=\"anchorid8\"><\/a><\/p>\n<h3><font color=\"#3AC1EF\">\u258d \u041c\u0430\u0441\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u043f\u0438\u0441\u043a\u043e\u0432<\/font><\/h3>\n<p>  \u0418\u0437\u0443\u0447\u0430\u044f \u0442\u0435\u043c\u0443 \u043c\u0430\u0441\u043e\u043a \u0432 CSS, \u044f \u043d\u0430\u0442\u043a\u043d\u0443\u043b\u0441\u044f \u043d\u0430 \u044d\u0442\u043e\u0442 <a href=\"https:\/\/www.youtube.com\/watch?v=UPJeMtYFMn8\">\u043a\u0440\u0443\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440<\/a> \u043e\u0442 \u0421\u043a\u043e\u0442\u0442\u0430 \u0422\u043e\u043b\u0438\u043d\u0441\u043a\u0438. \u0421\u043c\u044b\u0441\u043b \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u0443\u0440\u043e\u043a\u043e\u0432 \u0438\u043b\u0438 \u0447\u0435\u0433\u043e-\u0443\u0433\u043e\u0434\u043d\u043e \u0434\u0440\u0443\u0433\u043e\u0433\u043e, \u0438 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0437\u0430\u0442\u0435\u043d\u0438\u0442\u044c \u044d\u0442\u043e\u0442 \u0442\u0435\u043a\u0441\u0442, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438\u0432\u043b\u0435\u0447\u044c \u043a \u043d\u0435\u043c\u0443 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.<\/p>\n<p>  \u0412\u043e\u0442 \u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/q5\/wo\/nu\/q5wonunr46brwmzwieonaehf97s.png\" data-src=\"https:\/\/habrastorage.org\/webt\/q5\/wo\/nu\/q5wonunr46brwmzwieonaehf97s.png\"\/><\/p>\n<p>  \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0432\u0438\u0434\u0438\u043c \u0441\u043f\u0438\u0441\u043e\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043a \u043d\u0438\u0437\u0443 \u0437\u0430\u0442\u0443\u0445\u0430\u0435\u0442. \u0414\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u044d\u0442\u043e\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 CSS, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043c\u0435\u0448\u0438\u0432\u0430\u0442\u044c \u0442\u0435\u043a\u0441\u0442 \u0441 \u0444\u043e\u043d\u043e\u043c, \u0431\u0443\u0434\u044c \u0442\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u0442\u0451\u043c\u043d\u0430\u044f \u043f\u043e\u0434\u043b\u043e\u0436\u043a\u0430.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/w5\/_w\/bn\/w5_wbnzxufb3xxzqej73nwqkhso.png\" data-src=\"https:\/\/habrastorage.org\/webt\/w5\/_w\/bn\/w5_wbnzxufb3xxzqej73nwqkhso.png\"\/><\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043d\u0443\u044e \u043c\u0430\u0441\u043a\u0443, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a \u043e\u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/td\/if\/kj\/tdifkjbfamjc1vetdnxovqtpzny.png\" data-src=\"https:\/\/habrastorage.org\/webt\/td\/if\/kj\/tdifkjbfamjc1vetdnxovqtpzny.png\"\/><\/p>\n<p>  \u0412 CSS \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<\/p>\n<pre><code class=\"css\">.list {     mask-image: linear-gradient(to bottom, #000, transparent 95%); }<\/code><\/pre>\n<p>  <a name=\"anchorid9\"><\/a><\/p>\n<h3><font color=\"#3AC1EF\">\u258d \u0418\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0434\u043b\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f<\/font><\/h3>\n<p>  \u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u043c\u0430\u0441\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u0432 \u043d\u0430\u0448\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043f\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0431\u0435\u0437\u0433\u0440\u0430\u043d\u0438\u0447\u043d\u044b\u043c\u0438. \u041d\u0438\u0436\u0435 \u044f \u043f\u0440\u0438\u0432\u0435\u0434\u0443 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0434\u043b\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  \u0412\u043e\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0434\u0438\u0437\u0430\u0439\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f \u0441\u0434\u0435\u043b\u0430\u043b \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0434\u0435\u043c\u043e.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/at\/l9\/3b\/atl93beq3tu8ycsadsczhv4luj4.png\" data-src=\"https:\/\/habrastorage.org\/webt\/at\/l9\/3b\/atl93beq3tu8ycsadsczhv4luj4.png\"\/><\/p>\n<p>  \u041d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0439 \u044d\u0444\u0444\u0435\u043a\u0442 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 5 \u043b\u0438\u043d\u0435\u0439\u043d\u044b\u0445 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u0432. \u041f\u043e\u0434\u043e\u0431\u043d\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044f \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u0438\u0437 \u043d\u0438\u0445 \u0440\u0430\u0437\u043d\u044b\u0435 \u043f\u043e\u0437\u0438\u0446\u0438\u0438.<\/p>\n<p>  \u0412\u0437\u0433\u043b\u044f\u043d\u0435\u043c \u043d\u0430 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u044b \u0431\u043e\u043b\u0435\u0435 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e:<\/p>\n<pre><code class=\"css\">.thumb {     mask-image: linear-gradient(to bottom, #000, #000),     linear-gradient(to bottom, #000, #000),     linear-gradient(to bottom, #000, #000),     linear-gradient(to bottom, #000, #000),     linear-gradient(to bottom, #000, #000);     mask-size: 18% 70%;     mask-position: 0 100%, 25% 25%, 50% 50%, 75% 0, 100% 50%;     mask-repeat: no-repeat; }<\/code><\/pre>\n<p>  \u0412\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u043c\u0430\u0441\u043a\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/ng\/5d\/76\/ng5d767s1rpoyc26ol_loyd3if8.png\" data-src=\"https:\/\/habrastorage.org\/webt\/ng\/5d\/76\/ng5d767s1rpoyc26ol_loyd3if8.png\"\/><\/p>\n<p>  \u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0437\u0430\u0442\u0443\u0445\u0430\u043d\u0438\u044f \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0435 \u043c\u0430\u0441\u043a\u0438 \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442 \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u0441\u043b\u043e\u0432\u043e <code>transparent<\/code>.<\/p>\n<pre><code class=\"css\">.thumb {     mask-image: linear-gradient(to bottom, transparent, #000),     linear-gradient(to bottom, #000, transparent),     linear-gradient(to bottom, transparent, #000),     linear-gradient(to bottom, #000, transparent),     linear-gradient(to bottom, transparent, #000);     mask-size: 18% 70%;     mask-position: 0 100%, 25% 25%, 50% 50%, 75% 0, 100% 50%;     mask-repeat: no-repeat; }<\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/wt\/ds\/i3\/wtdsi3tgag6q-pqaihmzwwbvd4e.png\" data-src=\"https:\/\/habrastorage.org\/webt\/wt\/ds\/i3\/wtdsi3tgag6q-pqaihmzwwbvd4e.png\"\/><\/p>\n<p>  <a name=\"anchorid10\"><\/a><\/p>\n<h3><font color=\"#3AC1EF\">\u258d \u0421\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u0435 \u0432\u043a\u043b\u0430\u0434\u043e\u043a<\/font><\/h3>\n<p>  \u042f \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0434\u0443\u043c\u0430\u043b \u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043c\u0430\u0441\u043e\u043a \u043a \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0443 UI \u043f\u043e\u0434 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c \u00ab\u0441\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u0435 \u0443\u0433\u043b\u043e\u0432\u00bb (<a href=\"https:\/\/css-tricks.com\/tabs-with-round-out-borders\/\">round out corners<\/a>).<\/p>\n<p>  \u041d\u0430\u0448\u0430 \u0437\u0430\u0434\u0430\u0447\u0430 \u2014 \u0441\u043a\u0440\u0443\u0433\u043b\u0438\u0442\u044c \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u0441\u043c\u0435\u0448\u0430\u043b\u0438\u0441\u044c \u0441 \u0435\u0433\u043e <code>border-radius<\/code>.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/sp\/q_\/_c\/spq__cc2d5ibb_zihkjp9msjcny.png\" data-src=\"https:\/\/habrastorage.org\/webt\/sp\/q_\/_c\/spq__cc2d5ibb_zihkjp9msjcny.png\"\/><\/p>\n<p>  \u0412 \u0441\u0432\u043e\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u041a\u0440\u0438\u0441 \u041a\u043e\u0439\u0435\u0440 \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u043b, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0441\u0442\u0438\u0447\u044c \u044d\u0442\u043e\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0430 \u043f\u0441\u0435\u0432\u0434\u043e-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u0411\u043e\u043b\u0435\u0435 \u0436\u0435 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u043d\u044b\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043c\u0430\u0441\u043a\u0438 CSS.<\/p>\n<p>  \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u043e\u0432\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u0435\u0435 \u0432\u0437\u0433\u043b\u044f\u043d\u0435\u043c \u043d\u0430 \u0444\u0438\u0433\u0443\u0440\u0443, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/xv\/g0\/nt\/xvg0ntnzo1ivfeb3rj11-pg8exu.png\" data-src=\"https:\/\/habrastorage.org\/webt\/xv\/g0\/nt\/xvg0ntnzo1ivfeb3rj11-pg8exu.png\"\/><\/p>\n<p>  \u041e\u043d\u0430 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u0430 \u0438 \u043a\u0440\u0443\u0433\u0430, \u0438 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0438\u0445 \u043f\u0435\u0440\u0435\u0441\u0435\u0447\u0435\u043d\u0438\u0435.<\/p>\n<p>  \u041a\u0430\u043a \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u0441\u0442\u0438\u0447\u044c? \u041c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u043d\u043e\u0433\u043e\u0441\u043b\u043e\u0439\u043d\u044b\u0435 \u043c\u0430\u0441\u043a\u0438, \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u0432 \u0438\u0445 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>mask-composite<\/code>.<\/p>\n<p>  \u041f\u0435\u0440\u0432\u044b\u043c \u0434\u0435\u043b\u043e\u043c \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0441\u0430\u043c\u043e\u0439 \u043c\u0430\u0441\u043a\u0438.<\/p>\n<pre><code class=\"css\">.nav-item.active:before {     content: \"\";     position: absolute;     left: 100%;     bottom: 0;     width: 24px;     height: 24px;     background-color: var(--active-bg); }<\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/eo\/70\/fj\/eo70fju5hvcap7dbf_3h587irdc.png\" data-src=\"https:\/\/habrastorage.org\/webt\/eo\/70\/fj\/eo70fju5hvcap7dbf_3h587irdc.png\"\/><\/p>\n<p>  \u0412\u043d\u0443\u0442\u0440\u0438 \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043a\u0440\u0443\u0433 \u0438 \u043a\u0432\u0430\u0434\u0440\u0430\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0441\u043e\u0432\u043c\u0435\u0449\u0430\u0442\u044c\u0441\u044f. \u0423\u0434\u043e\u0431\u043d\u043e \u0442\u043e, \u0447\u0442\u043e \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0443\u0442\u0451\u043c \u0441\u043c\u0435\u0448\u0435\u043d\u0438\u044f \u043b\u0438\u043d\u0435\u0439\u043d\u043e\u0433\u043e \u0438 \u0440\u0430\u0434\u0438\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u0432.<\/p>\n<pre><code class=\"css\">.nav-item.active:before {     content: \"\";     position: absolute;     left: 100%;     bottom: 0;     width: 24px;     height: 24px;     background-color: var(--active-bg);     background-image: linear-gradient(to top, #000, #000),     radial-gradient(circle 15px at center, #000 80%, transparent 81%);     background-size: 12px 12px, 100%;     background-position: bottom left, center;     background-repeat: no-repeat, repeat; }<\/code><\/pre>\n<p>  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:  <\/p>\n<ul>\n<li>\u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u0430 \u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b 12px 12px;<\/li>\n<li>\u043a\u0432\u0430\u0434\u0440\u0430\u0442 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d \u0432 \u043b\u0435\u0432\u043e\u043c \u043d\u0438\u0436\u043d\u0435\u043c \u0443\u0433\u043b\u0443 (bottom left);<\/li>\n<li>\u0434\u043b\u044f \u0444\u0438\u0433\u0443\u0440\u044b \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u0430 <code>background-repeat<\/code> \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f.<\/li>\n<\/ul>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/ri\/fy\/c2\/rifyc2spkzvonomb728lrrk_phu.png\" data-src=\"https:\/\/habrastorage.org\/webt\/ri\/fy\/c2\/rifyc2spkzvonomb728lrrk_phu.png\"\/><\/p>\n<p>  \u041a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 \u0432\u044b\u0448\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u043a\u0430\u043a \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0434\u0432\u0430 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0430. \u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0448\u0430\u0433\u043e\u043c \u0438\u0434\u0451\u0442 \u0438\u0445 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435. \u0412 CSS \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u0442\u044c \u0434\u0432\u0435 \u0444\u0438\u0433\u0443\u0440\u044b \u043c\u043e\u0436\u043d\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>mask-composite<\/code>.<\/p>\n<pre><code class=\"css\">.nav-item.active:before {     content: \"\";     position: absolute;     left: 100%;     bottom: 0;     width: 24px;     height: 24px;     background-color: var(--active-bg);     mask-image: linear-gradient(to top, red, red),     radial-gradient(circle 15px at center, green 80%, transparent 81%);     mask-size: 12px 12px, 100%;     mask-position: bottom left, center;     mask-repeat: no-repeat, repeat;     mask-composite: subtract; }<\/code><\/pre>\n<p>  \u0412 \u0438\u0442\u043e\u0433\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/pm\/vn\/9l\/pmvn9lrqyh4u38sz4mful0e_wwc.png\" data-src=\"https:\/\/habrastorage.org\/webt\/pm\/vn\/9l\/pmvn9lrqyh4u38sz4mful0e_wwc.png\"\/><\/p>\n<p>  \u041a\u043e\u0434 \u0432\u044b\u0448\u0435 \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d \u0434\u043b\u044f \u0444\u0438\u0433\u0443\u0440\u044b \u0441\u043f\u0440\u0430\u0432\u0430. \u0414\u043b\u044f \u0432\u0442\u043e\u0440\u043e\u0439 \u0436\u0435 \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c <code>mask-position<\/code>.<\/p>\n<pre><code class=\"css\">.nav-item.active:after {     \/* \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u0442\u0438\u043b\u0438 *\/     mask-position: bottom right, center; }<\/code><\/pre>\n<p>  <a href=\"https:\/\/codepen.io\/shadeed\/pen\/YzObqbw\/f8ac9db5ddde52a6214f1a8c2859e4f8?editors=0100\">\u0414\u0435\u043c\u043e<\/a><\/p>\n<p>  <a name=\"anchorid11\"><\/a><\/p>\n<h3><font color=\"#3AC1EF\">\u258d \u0412\u044b\u0440\u0435\u0437\u0430\u043d\u0438\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0430\u0432\u0430\u0442\u0430\u0440\u043e\u043a<\/font><\/h3>\n<p>  \u0412 \u0441\u0432\u043e\u0435\u0439 <a href=\"https:\/\/ishadeed.com\/article\/thinking-about-the-cut-out-effect\/\">\u0441\u0442\u0430\u0442\u044c\u0435 (\u0430\u043d\u0433\u043b.)<\/a>, \u043f\u043e\u0441\u0432\u044f\u0449\u0451\u043d\u043d\u043e\u0439 \u044d\u0444\u0444\u0435\u043a\u0442\u0443 \u0432\u044b\u0440\u0435\u0437\u0430\u043d\u0438\u044f, \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u043b \u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u0445 \u0435\u0433\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 CSS.<\/p>\n<p>  \u041e\u0434\u0438\u043d \u0438\u0437 \u043f\u0440\u0438\u0432\u0435\u0434\u0451\u043d\u043d\u044b\u0445 \u0442\u0430\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u0445\u043e\u0440\u043e\u0448\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u043c\u0430\u0441\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/rc\/kz\/qx\/rckzqx3sius3ozpks1nigxgdyco.png\" data-src=\"https:\/\/habrastorage.org\/webt\/rc\/kz\/qx\/rckzqx3sius3ozpks1nigxgdyco.png\"\/><\/p>\n<p>  \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u044d\u0444\u0444\u0435\u043a\u0442 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \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\">.avatar {     -webkit-mask-image: radial-gradient(ellipse 54px 135px at 11px center, #0000 30px, #000 0); }<\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/mq\/7f\/ss\/mq7fssweycexjyf8enbwldkjkk0.png\" data-src=\"https:\/\/habrastorage.org\/webt\/mq\/7f\/ss\/mq7fssweycexjyf8enbwldkjkk0.png\"\/><\/p>\n<p>  \u041e\u0447\u0435\u043d\u044c \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0442\u0443 \u0441\u0442\u0430\u0442\u044c\u044e, \u0442\u0430\u043a \u043a\u0430\u043a \u0432 \u043d\u0435\u0439 \u0435\u0441\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u044b\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u0432\u0440\u043e\u0434\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0451\u043d\u043d\u043e\u0433\u043e \u0432\u044b\u0448\u0435.<\/p>\n<p>  <a name=\"anchorid12\"><\/a><\/p>\n<h2><font color=\"#3AC1EF\">\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/font><\/h2>\n<p>  \u041a\u043e\u0433\u0434\u0430 \u044f \u043d\u0430\u0447\u0430\u043b \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043f\u043e \u043c\u0430\u0441\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u0432 CSS, \u0442\u043e \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u043f\u043e \u044d\u0442\u043e\u0439 \u0442\u0435\u043c\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u043d\u0435 \u0442\u0430\u043a \u043c\u043d\u043e\u0433\u043e \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432. \u041f\u0440\u0438\u0447\u0451\u043c \u0441\u0440\u0435\u0434\u0438 \u043d\u0438\u0445 \u044f\u0432\u043d\u043e \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0451\u0442 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u0432 \u043f\u043e\u0432\u0441\u0435\u0434\u043d\u0435\u0432\u043d\u043e\u043c \u0440\u0430\u0431\u043e\u0447\u0435\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435. \u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u0447\u0442\u043e \u043a \u043a\u043e\u043d\u0446\u0443 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u0432\u044b \u0443\u0436\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043b\u0438 \u0441\u0435\u0431\u0435, \u0433\u0434\u0435 \u0432 \u0441\u0432\u043e\u0451\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u0437\u0430\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u043c\u0430\u0441\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435.<\/p>\n<p>  <a name=\"anchorid13\"><\/a><\/p>\n<h2><font color=\"#3AC1EF\">\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b<\/font><\/h2>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u043e\u0442\u0442\u043e\u0447\u0438\u0442\u044c \u043d\u0430\u0432\u044b\u043a\u0438 \u043d\u0430 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445, \u0442\u043e \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044b:<\/p>\n<ul>\n<li><a href=\"https:\/\/css-tricks.com\/a-fancy-hover-effect-for-your-avatar\/\">A Fancy Hover Effect For Your Avatar<\/a> \u043e\u0442 Temani Afif<\/li>\n<li><a href=\"https:\/\/css-tricks.com\/mask-compositing-the-crash-course\/\">Mask Compositing: The Crash Course<\/a> Ana Tudor<\/li>\n<li><a href=\"https:\/\/codepen.io\/t_afif\/pen\/eYMbrJN?editors=0100\">CSS only Speech Bubble<\/a> Temani Afif<\/li>\n<li><a href=\"https:\/\/codepen.io\/t_afif\/pen\/qBpRbWr?editors=0100\">Fancy gradient border on hover<\/a> \u043e\u0442 Temani Afif<\/li>\n<\/ul>\n<p>  \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044e \u0437\u0430 \u0447\u0442\u0435\u043d\u0438\u0435!<\/p>\n<blockquote><p><b><font color=\"#3AC1EF\"><a href=\"https:\/\/t.me\/ruvds_community\">Telegram-\u043a\u0430\u043d\u0430\u043b \u0441 \u0440\u043e\u0437\u044b\u0433\u0440\u044b\u0448\u0430\u043c\u0438 \u043f\u0440\u0438\u0437\u043e\u0432, \u043d\u043e\u0432\u043e\u0441\u0442\u044f\u043c\u0438 IT \u0438 \u043f\u043e\u0441\u0442\u0430\u043c\u0438 \u043e \u0440\u0435\u0442\u0440\u043e\u0438\u0433\u0440\u0430\u0445 ?\ufe0f<\/a><\/font><\/b><\/p><\/blockquote>\n<p><a href=\"http:\/\/ruvds.com\/ru-rub?utm_source=habr&amp;utm_medium=article&amp;utm_campaign=Bright_Translate&amp;utm_content=osnovnye_principy_maskirovaniya_v_css\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/_p\/_h\/lv\/_p_hlvd2tv0cv9tny8tdytzfhje.png\" data-src=\"https:\/\/habrastorage.org\/webt\/_p\/_h\/lv\/_p_hlvd2tv0cv9tny8tdytzfhje.png\"\/><\/a><\/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\/729974\/\"> https:\/\/habr.com\/ru\/articles\/729974\/<\/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-1\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\"><a href=\"https:\/\/habr.com\/ru\/companies\/ruvds\/articles\/729974\/\"><\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/nn\/tp\/af\/nntpafof0gvulj0y3k55_cdlrw0.png\" data-src=\"https:\/\/habrastorage.org\/webt\/nn\/tp\/af\/nntpafof0gvulj0y3k55_cdlrw0.png\"\/><\/div>\n<p><\/a><br \/>  \u0412 \u043c\u0438\u0440\u0435 \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u043c\u0430\u0441\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0439 \u0442\u0435\u0445\u043d\u0438\u043a\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432. \u0411\u0443\u0434\u0443\u0447\u0438 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u043e\u043c, \u044f \u0441\u0430\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u044d\u0442\u0443 \u0442\u0435\u0445\u043d\u0438\u043a\u0443 \u043c\u043d\u043e\u0433\u043e \u0440\u0430\u0437, \u043d\u043e \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0447\u0430\u0441\u0442\u043e \u0432 \u0432\u0435\u0431-\u0441\u0440\u0435\u0434\u0435. \u0414\u0443\u043c\u0430\u044e, \u0447\u0442\u043e \u043e\u0442 \u0435\u0451 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043d\u0430 \u0441\u0430\u0439\u0442\u0430\u0445 \u043c\u0435\u043d\u044f \u0443\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u043b\u0430 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438. \u041f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e \u044d\u0442\u043e\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 Safari \u0438 Firefox, \u0430 \u0432\u043e\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u043d\u0430 \u0434\u0432\u0438\u0436\u043a\u0435 Blink (Chrome \u0438 Edge) \u2014 \u043b\u0438\u0448\u044c \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e.<\/p>\n<p>  \u0420\u0430\u0434\u0443\u0435\u0442 \u0442\u043e, \u0447\u0442\u043e \u0442\u0435\u043c\u0430 CSS \u043c\u0430\u0441\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0447\u0430\u0441\u0442\u044c\u044e <a href=\"https:\/\/web.dev\/interop-2023\/\">Interop 2023<\/a>, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442, \u0432\u0441\u043a\u043e\u0440\u0435 \u043c\u043e\u0436\u043d\u043e \u043e\u0436\u0438\u0434\u0430\u0442\u044c \u043a\u0440\u043e\u0441\u0441-\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u0443\u044e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u044d\u0442\u043e\u0439 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 (\u0412\u0430\u0443!).<\/p>\n<p>  \u0412 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u043f\u0440\u043e\u0433\u043e\u0432\u043e\u0440\u044e, \u0447\u0442\u043e \u0432\u043e\u043e\u0431\u0449\u0435 \u0442\u0430\u043a\u043e\u0435 CSS \u043c\u0430\u0441\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u043e\u0431\u044a\u044f\u0441\u043d\u044e, \u043a\u0430\u043a \u043e\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0443 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<p>  \u041f\u043e\u0435\u0445\u0430\u043b\u0438!<\/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-397583","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/397583","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=397583"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/397583\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=397583"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=397583"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=397583"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}