{"id":181746,"date":"2013-06-02T20:06:03","date_gmt":"2013-06-02T16:06:03","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=181746"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=181746","title":{"rendered":"<span class=\"post_title\">\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u0442\u0438\u043b\u0435\u0439 \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u044f \u0432 LESS \u0447\u0435\u0440\u0435\u0437 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044e png \u0432 data-URI<\/span>"},"content":{"rendered":"<div class=\"content html_format\">   \t\u0420\u0435\u0448\u0438\u043b \u044f \u043e\u0434\u043d\u0430\u0436\u0434\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0433\u0438\u0431\u043a\u0438\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u044f \u0441\u0441\u044b\u043b\u043e\u043a \u2014 \u043e\u0447\u0435\u043d\u044c \u0443\u0436 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0434\u0435\u043b\u0430\u0442\u044c \u043c\u043e\u0434\u043d\u044b\u0435 \u043d\u044b\u043d\u0447\u0435 \u043f\u043e\u043b\u0443\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u0435 \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u044f, \u0440\u0435\u0433\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0430\u0442\u0442\u0435\u0440\u043d \u0432 dashed\/dotted-border, \u0434\u0435\u043b\u0430\u0442\u044c \u0432\u043e\u043b\u043d\u0438\u0441\u0442\u044b\u0435 \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u044f \u0438 \u0432\u043e\u043e\u0431\u0449\u0435 \u0438\u043c\u0435\u0442\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 <a href=\"http:\/\/dev.w3.org\/csswg\/css-text-decor-3\/#text-decoration-style-property\">CSS3 text-decoration<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u0430\u043a \u0435\u0449\u0435 \u043d\u0438\u043e\u0434\u0438\u043d \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0438 \u043d\u0435 \u0443\u043c\u0435\u0435\u0442.<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/cdd\/5f7\/884\/cdd5f788419966496948cce1d6ab6093.png\"\/><\/p>\n<h3>\u0418 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b, <strong><a href=\"http:\/\/dfcreative.github.io\/projects\/data-uri-painter\/underlines.html\">\u0434\u0435\u043c\u043e<\/a><\/strong>.<\/h3>\n<p>  <a name=\"habracut\"><\/a><\/p>\n<h2>\u0412\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438<\/h2>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/fbf\/8cd\/e85\/fbf8cde850a38a2bdedcb79f3e79ef70.png\" align=\"right\"\/>\u041f\u043e\u043b\u0443\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0435, \u043f\u0443\u043d\u043a\u0442\u0438\u0440\u043d\u043e\u0435 \u0438 \u0442\u043e\u0447\u0435\u0447\u043d\u043e\u0435 \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u044f \u0432\u0435\u0441\u044c\u043c\u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u0435\u043b\u0430\u044e\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 <code>border-bottom<\/code> \u261e.<\/p>\n<p>  \u0418\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0441\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u043b\u0438\u043d\u0438\u044e \u0431\u043b\u0438\u0436\u0435 \u043a \u0442\u0435\u043a\u0441\u0442\u0443.<br \/>   \u041c\u043e\u0436\u043d\u043e \u0441\u043e\u043e\u0440\u0443\u0434\u0438\u0442\u044c \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e \u0432\u0438\u0434\u0430   <\/p>\n<pre><code class=\"html\">&lt;a class=&quot;link&quot;&gt;&lt;span&gt;Some link text here&lt;\/span&gt;&lt;\/a&gt; <\/code><\/pre>\n<p> \u0438 \u0440\u0435\u0433\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c <code>line-height<\/code> \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>span<\/code> (\u0438\u043b\u0438 <code>a<\/code>), \u0437\u0430\u0434\u0430\u0432 \u0435\u043c\u0443 <code>display:inline-block<\/code>, \u043d\u043e \u0442\u043e\u0433\u0434\u0430 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043d\u0430 \u043c\u043d\u043e\u0433\u043e\u0441\u0442\u0440\u043e\u0447\u043d\u043e\u043c \u0442\u0435\u043a\u0441\u0442\u0435: <code>inline-block<\/code> \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u043c block&#8217;\u043e\u043c \u0432 \u043f\u043b\u0430\u043d\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0431\u043e\u0440\u0434\u0435\u0440\u0430 (\u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0441\u043f\u0440\u0430\u0432\u0430).<\/p>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u0440\u0430\u0437\u043c\u044b\u0448\u043b\u0435\u043d\u0438\u0439 \u0438 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u043e\u0432, \u044f \u043f\u0440\u0438\u0448\u0435\u043b \u043a \u0432\u044b\u0432\u043e\u0434\u0443, \u0447\u0442\u043e \u0441\u0430\u043c\u044b\u043c \u00ab\u0447\u0438\u0441\u0442\u044b\u043c\u00bb \u0438 \u0443\u0434\u043e\u0431\u043d\u044b\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u0431\u044b\u043b\u043e-\u0431\u044b \u043a\u043b\u0430\u0441\u0442\u044c \u043f\u0430\u0442\u0442\u0435\u0440\u043d \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u044f \u0432 <code>background<\/code> \u0441 \u0432\u044b\u0441\u043e\u0442\u043e\u0439, \u0440\u0430\u0432\u043d\u043e\u0439 <code>line-height<\/code>. \u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u043d\u044f\u0442\u044c, \u043e\u0442\u043a\u0443\u0434\u0430 \u0431\u0440\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u043f\u0430\u0442\u0442\u0435\u0440\u043d.  <\/p>\n<ul>\n<li>\u0413\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u0433\u0434\u0435-\u0442\u043e \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0435\u0451 \u043a\u0430\u043a \u0444\u0430\u0439\u043b \u2014 \u043d\u0435\u0433\u0438\u0431\u043a\u043e \u0438 \u043d\u0435\u0443\u0434\u043e\u0431\u043d\u043e \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u043a\u0430\u0436\u0434\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0443\u0431\u0438\u0432\u0430\u0442\u044c \u043d\u0435\u0440\u0432\u044b.<\/li>\n<li>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 PNG \u0447\u0435\u0440\u0435\u0437 canvas (<a href=\"http:\/\/dfcreative.github.io\/projects\/data-uri-painter\/font-based.html\">\u0442\u0430\u043a\u043e\u0439, \u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0443<\/a>), \u043d\u043e \u044d\u0442\u043e \u0442\u0430\u043a\u0436\u0435 \u043d\u0435\u0443\u0434\u043e\u0431\u043d\u043e \u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435: \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c data-URI \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435.<\/li>\n<li>\u0413\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/repeating-linear-gradient\">Repeating-gradient<\/a>, \u043d\u043e \u044d\u0442\u043e \u0432\u0435\u0441\u044c\u043c\u0430 \u043d\u0435\u043d\u0430\u0434\u0435\u0436\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431, \u0442\u0430\u043a \u043a\u0430\u043a \u0435\u0441\u0442\u044c \u0440\u0438\u0441\u043a \u043d\u0435 \u043f\u043e\u043f\u0430\u0441\u0442\u044c \u0442\u043e\u0447\u043d\u043e \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044c \u043b\u0438\u043d\u0438\u0438 \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u044f, \u0434\u0430 \u0438 \u043f\u0443\u043d\u043a\u0442\u0438\u0440\u043d\u044b\u0435 \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u044f \u043d\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c.<\/li>\n<\/ul>\n<p>  \u0421\u0430\u043c\u044b\u043c \u043b\u043e\u0433\u0438\u0447\u043d\u044b\u043c \u043e\u0441\u0442\u0430\u0432\u0430\u043b\u043e\u0441\u044c \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c PNG \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0438 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0432 data-URI. \u0418\u0437 <a href=\"http:\/\/stackoverflow.com\/questions\/16076713\/less-data-uri-painter-mixin\">\u0432\u043e\u043f\u0440\u043e\u0441\u0430 \u043d\u0430 stackoverflow<\/a> \u0432\u044b\u044f\u0441\u043d\u0438\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u043e\u0434\u0438\u043d \u0447\u0435\u043b\u043e\u0432\u0435\u043a \u0443\u0436\u0435 \u0441\u0443\u043c\u0435\u043b \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c GIF-\u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u0432 \u043e\u0434\u0438\u043d \u043f\u0438\u043a\u0441\u0435\u043b\u044c (<a href=\"http:\/\/micheljansen.org\/blog\/entry\/1238\">\u0442\u0443\u0442<\/a>), \u043d\u043e, \u043d\u0430\u0434\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0432\u0435\u0441\u044c\u043c\u0430 \u043f\u0440\u044f\u043c\u043e\u043b\u0438\u043d\u0435\u0439\u043d\u043e \u0438 \u043d\u0435\u0433\u0438\u0431\u043a\u043e: \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u044d\u0442\u043e\u0439 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0431\u044b\u043b\u043e-\u0431\u044b \u0437\u0430\u0434\u0430\u0447\u0435\u0439, \u0440\u0430\u0432\u043d\u043e\u0441\u0438\u043b\u044c\u043d\u043e\u0439 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u043d\u0438\u044e \u0432\u0441\u0435\u0433\u043e \u043a\u043e\u0434\u0430.<\/p>\n<p>  \u0413\u0440\u044f\u043b\u0438 \u0432\u044b\u0445\u043e\u0434\u043d\u044b\u0435, \u0438 \u044f \u0440\u0435\u0448\u0438\u043b \u043d\u0430\u043a\u043e\u043d\u0435\u0446 \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u0442\u044c \u0444\u0440\u0443\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0433\u0440\u044f\u0437\u043d\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u044f \u0441\u0441\u044b\u043b\u043e\u043a \u0438 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0441 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0435\u0439 PNG.<\/p>\n<h2>PNG.js<\/h2>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0447\u0430\u0441\u043e\u0432 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044f \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0439 <a href=\"http:\/\/www.w3.org\/TR\/2003\/REC-PNG-20031110\/#11tRNS\">PNG<\/a>, <a href=\"http:\/\/tools.ietf.org\/html\/rfc1950#page-4\">ZLIB Data Format<\/a> \u0438 <a href=\"https:\/\/tools.ietf.org\/html\/rfc1951#section-3\">DEFLATE Data Format<\/a>, \u0430 \u0442\u0430\u043a\u0436\u0435 <a href=\"https:\/\/code.google.com\/p\/todataurl-png-js\/\">\u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0441\u0435\u0440\u0438\u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 png<\/a> \u0438 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u0440\u0435\u0432\u0435\u0440\u0441-\u0438\u043d\u0436\u0438\u043d\u0438\u0440\u0438\u043d\u0433\u0430 (<a href=\"http:\/\/dfcreative.github.io\/projects\/data-uri-painter\/raw-png-based.html\">\u0442\u0443\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0441\u044b\u0440\u043e\u0433\u043e png<\/a>), \u0431\u044b\u043b \u0441\u043e\u0437\u0434\u0430\u043d <a href=\"https:\/\/github.com\/dfcreative\/graphics\/blob\/master\/src\/PNG.js\">js-\u043a\u043b\u0430\u0441\u0441 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 PNG<\/a>, \u043f\u0440\u0438\u0433\u043e\u0434\u043d\u044b\u0439 \u0434\u043b\u044f \u0440\u0430\u0441\u043f\u0438\u043b\u0430 \u043d\u0430 \u043a\u0443\u0441\u043a\u0438 \u0432 LESS.<\/p>\n<p>  \u041a\u043b\u0430\u0441\u0441 PNG \u0443\u043c\u0435\u0435\u0442 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0435\u0441\u0436\u0430\u0442\u044b\u0439 PNG \u0441 \u0438\u043d\u0434\u0435\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u0446\u0432\u0435\u0442\u043e\u043c (indexed-color) \u0438\u043b\u0438 \u0431\u0438\u0442\u043c\u0430\u043f\u0430 (truecolor with alpha). \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">PNG.js usecase<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"html\">&lt;script src=&quot;png.js&quot;&gt;&lt;\/script&gt; &lt;script&gt; var png = new PNG(); png.set({ width: w, height: h, chunks: { \tPLTE: plte, \/\/palette string (sequence of colors, 3 bytes per color), e.g. &quot;000000ffffff&quot; \u21d2 black, white \ttRNS: trns \/\/transparency string (alpha-values according to the palette colors, 1 byte per value), e.g. &quot;00ff&quot; \u21d2 0, 1 }, data: data \/\/string of color indexes (or bitmap), 1 byte per color index, e.g. &quot;00010100&quot; \u21d2 black, white, white, black }) result = png.toDataURL() \/\/\u21d2 data:image\/png;base64,iV... &lt;\/script&gt; <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<h2>\u0417\u0430\u043f\u0443\u0441\u043a JS \u0432 LESS<\/h2>\n<p>  \u041a\u0430\u043a \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, LESS \u0432\u0435\u0441\u044c\u043c\u0430 \u0433\u0438\u0431\u043e\u043a \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 JS. \u041a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0430\u0437\u043e\u043c:  <\/p>\n<pre><code>\t@test: `function(a){ \t\treturn a \t}`; \ttest: `(@{test})(3)`; \/\/test: 3 <\/code><\/pre>\n<p>  \u041f\u0435\u0440\u0435\u043c\u0435\u0441\u0442\u0438\u0432 png.js \u0432 \u043f\u0440\u0438\u043c\u0435\u0441\u044c \u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u0432 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043a \u043d\u0435\u043c\u0443, \u0432 \u0438\u0442\u043e\u0433\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">painter.less<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code>\/\/Painting functions @text: black; @red: red; @green: green;  .underline(@height: 20, @color: @text, @thickness: 1){ \t@patternGen: `function(h, thick){ \t\tvar space = &quot;&quot;, line = &quot;&quot;; \t\t\/\/make line \t\tfor (var i = 0; i &lt; thick; i++){ \t\t\tline += &quot;01&quot; \t\t} \t\t\/\/make space \t\tfor (var i = 0; i &lt; h - thick; i++){ \t\t\tspace += &quot;00&quot; \t\t} \t\treturn space + line; \t}`; \t@pattern: `(@{patternGen})(@{height}, @{thickness})`;\t \t.png(@stream: @pattern, @w: 1, @h: unit(@height), @color: @color); } .underline{ \t.underline(); \t } .underline.thick{ \t.underline(@thickness: 2); } .underline.offset{ \t } .underline.transparent{ \t.underline(@color: fade(@text, 30%), @thickness: 1); }  .waved(@height: 20, @color: @red, @thickness: 2, @width: 4){ \t@patternGen: `function(h, w, thick){ \t\tvar space = &quot;&quot;, wave = &quot;&quot;; \t\t\/\/make wave \t\tfor (var y = 0; y &lt; thick; y++){ \t\t\tfor (var x = 0; x &lt; w; x++){ \t\t\t\tif (x &lt; w\/2){ \t\t\t\t\tif (y &lt; thick\/2) { \t\t\t\t\t\twave += &quot;00&quot; \t\t\t\t\t} else{ \t\t\t\t\t\twave += &quot;01&quot; \t\t\t\t\t} \t\t\t\t} else { \t\t\t\t\tif (y &lt; thick\/2) { \t\t\t\t\t\twave += &quot;01&quot; \t\t\t\t\t} else{ \t\t\t\t\t\twave += &quot;00&quot; \t\t\t\t\t} \t\t\t\t} \t\t\t} \t\t} \t\t\/\/make space \t\tfor (var i = 0; i &lt; (h - thick)*w; i++){ \t\t\tspace += &quot;00&quot; \t\t} \t\treturn space + wave; \t}`; \t@pattern: `(@{patternGen})(@{height}, @{width}, @{thickness})`; \tptrn: @pattern; \t.png(@stream: @pattern, @w: unit(@width), @h: unit(@height), @color: @color); } .waved{ \t.waved(); \t } .waved.alt{ \t.waved(@color: @green, @thickness: 2, @width: 6); }  .dotted(@height: 20, @color: @text, @width: 3, @thickness: 1){ \t@patternGen: `function(h, thick, w){ \t\tvar space = &quot;&quot;, line = &quot;&quot;; \t\t\/\/make line \t\tfor (var i = 0; i &lt; thick; i++){ \t\t\tfor(var x = 0; x &lt; thick; x++){ \t\t\t\tline += &quot;01&quot;; \t\t\t} \t\t\tfor(var x = thick; x &lt; w; x++){ \t\t\t\tline += &quot;00&quot;; \t\t\t} \t\t} \t\t\/\/make space \t\tfor (var i = 0; i &lt; (h - thick)*w; i++){ \t\t\tspace += &quot;00&quot; \t\t} \t\treturn space + line; \t}`; \t@pattern: `(@{patternGen})(@{height}, @{thickness}, @{width})`;\t \t.png(@stream: @pattern, @w: unit(@width), @h: unit(@height), @color: @color); } .dotted{ \t.dotted; \t } .dotted.rare{ \t.dotted(@width: 6); } .dotted.thick{ \t.dotted(@width: 6, @thickness: 2); } .dashed(@height: 20, @color: @text, @width: 8, @thickness: 1, @length: 4){ \t@patternGen: `function(h, thick, w, l){ \t\tvar space = &quot;&quot;, line = &quot;&quot;; \t\t\/\/make line \t\tfor (var i = 0; i &lt; thick; i++){ \t\t\tfor(var x = 0; x &lt; l; x++){ \t\t\t\tline += &quot;01&quot;; \t\t\t} \t\t\tfor(var x = l; x &lt; w; x++){ \t\t\t\tline += &quot;00&quot;; \t\t\t} \t\t} \t\t\/\/make space \t\tfor (var i = 0; i &lt; (h - thick)*w; i++){ \t\t\tspace += &quot;00&quot; \t\t} \t\treturn space + line; \t}`; \t@pattern: `(@{patternGen})(@{height}, @{thickness}, @{width}, @{length})`;\t \t.png(@stream: @pattern, @w: unit(@width), @h: unit(@height), @color: @color); } .dashed{ \t.dashed; \t } .dashed.rare{ \t.dashed(@width: 6); } .dashed.thick{ \t.dashed(@width: 10, @thickness: 2, @length: 6); } .dot-dashed(@height: 20, @color: @text, @width: 10, @thickness: 1){ \t@patternGen: `function(h, thick, w){ \t\tvar space = &quot;&quot;, line = &quot;&quot;; \t\t\/\/make line \t\tfor (var i = 0; i &lt; thick; i++){ \t\t\tfor(var x = 0; x &lt; w; x++){ \t\t\t\tswitch (true){ \t\t\t\t\tcase (x &gt; w*.75): \t\t\t\t\t\tline += &quot;00&quot;; \t\t\t\t\t\tbreak; \t\t\t\t\tcase (x &gt; w*.375): \t\t\t\t\t\tline += &quot;01&quot;; \t\t\t\t\t\tbreak; \t\t\t\t\tcase (x &gt; w*.125): \t\t\t\t\t\tline += &quot;00&quot;; \t\t\t\t\t\tbreak; \t\t\t\t\tdefault: \t\t\t\t\t\tline += &quot;01&quot;; \t\t\t\t} \t\t\t} \t\t} \t\t\/\/make space \t\tfor (var i = 0; i &lt; (h - thick)*w; i++){ \t\t\tspace += &quot;00&quot; \t\t} \t\treturn space + line; \t}`; \t@pattern: `(@{patternGen})(@{height}, @{thickness}, @{width})`; \t.png(@stream: @pattern, @w: unit(@width), @h: unit(@height), @color: @color); } .dot-dashed{ \t.dot-dashed; \t } .dot-dashed.thick{ \t.dot-dashed(@width: 10, @thickness: 2); }  .pattern(@height: 20, @color: @text, @width: 8, @thickness: 1, @length: 4, @pattern: &quot;. -&quot;){ \t }    \/\/Mixin that generates PNG to background .png(@stream: &quot;0001&quot;, @w: 2, @h: 2, @color: black){  \t@r: red(@color); \t@g: green(@color); \t@b: blue(@color); \t@hexColor: rgb(red(@color),green(@color),blue(@color)); \t@PLTE: `&quot;ffffff&quot; + (&quot;@{hexColor}&quot;).substr(1)`; \/\/Make bytes palette: first-white, rest-passed color;  \t@a: alpha(@color); \t@tRNS: `&quot;ff&quot; + (function(){ var a = Math.round(@{a} * 255).toString(16); return (a.length == 1 ? &quot;0&quot; + a : a) })()`;  \t\/\/png.js: https:\/\/github.com\/dfcreative\/graphics\/blob\/master\/src\/PNG.js \t@initPNG: `(function(){ \/*...copy-pasted png.js: https:\/\/github.com\/dfcreative\/graphics\/blob\/master\/src\/PNG.js *\/)()`;  \t@background: `(function(){ \t\tvar png = new PNG(); \t\t \t\tpng.set({ \t\t\twidth: @{w}, \t\t\theight: @{h}, \t\t\tchunks:{ \t\t\t\tPLTE: @{PLTE}, \t\t\t\ttRNS: @{tRNS} \t\t\t}, \t\t\tdata: @{stream} \t\t})  \t\treturn &quot;url(&quot; + png.toDataURL() + &quot;)&quot;; \t})()`;  \tbackground-image: ~&quot;@{background}&quot;; }  .png{ \t.png(); } <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<h2>\u041a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c?<\/h2>\n<p>  <\/p>\n<h5>1. \u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c <code>painter.less<\/code> \u0438 <code>less.js<\/code>, \u043a\u0430\u043a \u0432 <a href=\"https:\/\/github.com\/dfcreative\/dfcreative.github.com\/blob\/master\/projects\/data-uri-painter\/underlines.html\">\u0434\u0435\u043c\u043e<\/a><\/h5>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;link rel=&quot;stylesheet\/less&quot; type=&quot;text\/css&quot; href=&quot;painter.less&quot; \/&gt; &lt;script src=&quot;less.js&quot; type=&quot;text\/javascript&quot;&gt;&lt;\/script&gt; <\/code><\/pre>\n<h5>2. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u044b \u0434\u043b\u044f span-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432: <\/h5>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;span class=&quot;underline&quot;&gt;\u041f\u0440\u043e\u0441\u0442\u043e\u0435 \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u0435&lt;\/span&gt; &lt;span class=&quot;underline thick&quot;&gt;\u0422\u043e\u043bc\u0442\u043e\u0435 \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u0435&lt;\/span&gt; &lt;span class=&quot;underline offset&quot;&gt;\u0421\u043c\u0435\u0449\u0435\u043d\u043d\u043e\u0435 \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u0435&lt;\/span&gt; &lt;span class=&quot;underline transparent&quot;&gt;\u041f\u043e\u043b\u0443\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0435 \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u0435&lt;\/span&gt; &lt;span class=&quot;waved&quot;&gt;\u0412\u043e\u043b\u043d\u0438\u0441\u0442\u043e\u0435 \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u0435&lt;\/span&gt; &lt;span class=&quot;waved alt&quot;&gt;\u0412\u043e\u043b\u043d\u0438\u0441\u0442\u043e\u0435 \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u0435 2&lt;\/span&gt; &lt;span class=&quot;dotted&quot;&gt;\u0422\u043e\u0447\u0435\u0447\u043d\u043e\u0435 \u0447\u0430\u0441\u0442\u043e\u0435 \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u0435&lt;\/span&gt; &lt;span class=&quot;dotted rare&quot;&gt;\u0422\u043e\u0447\u0435\u0447\u043d\u043e\u0435 \u0440\u0435\u0434\u043a\u043e\u0435 \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u0435&lt;\/span&gt; &lt;span class=&quot;dotted thick&quot;&gt;\u0422\u043e\u0447\u0435\u0447\u043d\u043e\u0435 \u0442\u043e\u043b\u0441\u0442\u043e\u0435 \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u0435&lt;\/span&gt; &lt;span class=&quot;dashed&quot;&gt;\u041f\u0443\u043d\u043a\u0442\u0438\u0440\u043d\u043e\u0435 \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u0435&lt;\/span&gt; &lt;span class=&quot;dashed thick&quot;&gt;\u041f\u0443\u043d\u043a\u0442\u0438\u0440\u043d\u043e\u0435 \u0442\u043e\u043b\u0441\u0442\u043e\u0435 \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u0435&lt;\/span&gt; &lt;span class=&quot;dot-dashed&quot;&gt;\u0428\u0442\u0440\u0438\u0445-\u043f\u0443\u043d\u043a\u0442\u0438\u0440\u043d\u043e\u0435 \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u0435&lt;\/span&gt; <\/code><\/pre>\n<p>  \u0418 \u043e\u0442\u0440\u0435\u0433\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0437\u0438\u0446\u0438\u044e background:<br \/>  <code>span { background-posiion: 0 -5px; }<\/code><\/p>\n<h5>3. \u0414\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435 \u043c\u0438\u043a\u0441\u0438\u043d\u044b:<\/h5>\n<p>  <\/p>\n<ul>\n<li><code>.underline(@height: 20, @color: @text, @thickness: 1)<\/code><\/li>\n<li><code>.waved(@height: 20, @color: @red, @thickness: 2, @width: 4)<\/code><\/li>\n<li><code>.dotted(@height: 20, @color: @text, @width: 3, @thickness: 1)<\/code><\/li>\n<li><code>.dashed(@height: 20, @color: @text, @width: 8, @thickness: 1, @length: 4)<\/code><\/li>\n<li><code>.dot-dashed(@height: 20, @color: @text, @width: 10, @thickness: 1)<\/code><\/li>\n<\/ul>\n<p>  \u041c\u043e\u0436\u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0438\u043a\u0441\u0438\u043d <code>.png(@stream: &quot;0001&quot;, @w: 2, @h: 2, @color: black)<\/code>, \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u044f \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u043f\u043e\u0442\u043e\u043a \u0431\u0438\u0442\u043e\u0432 \u0438\u043d\u0434\u0435\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0446\u0432\u0435\u0442\u043e\u0432.<\/p>\n<p>  \u0418\u0442\u043e\u0433: <a href=\"http:\/\/dfcreative.github.io\/projects\/data-uri-painter\/underlines.html\">\u0434\u0435\u043c\u043e<\/a>, <a href=\"https:\/\/github.com\/dfcreative\/ui-kit\/blob\/master\/toolkit\/painter.less\">painter.less<\/a>, <a href=\"https:\/\/github.com\/dfcreative\/graphics\/blob\/master\/src\/PNG.js\">png.js<\/a>.    \t<\/p>\n<div class=\"clear\"><\/div>\n<\/p><\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"http:\/\/habrahabr.ru\/post\/181746\/\"> http:\/\/habrahabr.ru\/post\/181746\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div class=\"content html_format\">   \t\u0420\u0435\u0448\u0438\u043b \u044f \u043e\u0434\u043d\u0430\u0436\u0434\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0433\u0438\u0431\u043a\u0438\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u044f \u0441\u0441\u044b\u043b\u043e\u043a \u2014 \u043e\u0447\u0435\u043d\u044c \u0443\u0436 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0434\u0435\u043b\u0430\u0442\u044c \u043c\u043e\u0434\u043d\u044b\u0435 \u043d\u044b\u043d\u0447\u0435 \u043f\u043e\u043b\u0443\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u0435 \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u044f, \u0440\u0435\u0433\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0430\u0442\u0442\u0435\u0440\u043d \u0432 dashed\/dotted-border, \u0434\u0435\u043b\u0430\u0442\u044c \u0432\u043e\u043b\u043d\u0438\u0441\u0442\u044b\u0435 \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u044f \u0438 \u0432\u043e\u043e\u0431\u0449\u0435 \u0438\u043c\u0435\u0442\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 <a href=\"http:\/\/dev.w3.org\/csswg\/css-text-decor-3\/#text-decoration-style-property\">CSS3 text-decoration<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u0430\u043a \u0435\u0449\u0435 \u043d\u0438\u043e\u0434\u0438\u043d \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0438 \u043d\u0435 \u0443\u043c\u0435\u0435\u0442.<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/cdd\/5f7\/884\/cdd5f788419966496948cce1d6ab6093.png\"\/><\/p>\n<h3>\u0418 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b, <strong><a href=\"http:\/\/dfcreative.github.io\/projects\/data-uri-painter\/underlines.html\">\u0434\u0435\u043c\u043e<\/a><\/strong>.<\/h3>\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-181746","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/181746","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=181746"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/181746\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=181746"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=181746"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=181746"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}