{"id":162675,"date":"2012-12-18T19:45:03","date_gmt":"2012-12-18T15:45:03","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=162675"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=162675","title":{"rendered":"<span class=\"post_title\">\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043f\u043e\u0440\u0442\u0444\u043e\u043b\u0438\u043e \u0441 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u043c\u0438<\/span>"},"content":{"rendered":"<div class=\"content html_format\">   \t\u0414\u043e\u0431\u0440\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441\u0443\u0442\u043e\u043a \u0443\u0432\u0430\u0436\u0430\u0435\u043c\u044b\u0435 \u0445\u0430\u0431\u0440\u0430\u0436\u0438\u0442\u0435\u043b\u0438. \u041d\u0430 \u0441\u0435\u0433\u043e\u0434\u043d\u044f\u0448\u043d\u0438\u0439 \u0434\u0435\u043d\u044c \u0443\u0436\u0435 \u043c\u043d\u043e\u0433\u0438\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u044b \u0441 \u043f\u043e\u043d\u044f\u0442\u0438\u0435\u043c <a href=\"http:\/\/ru.wikipedia.org\/wiki\/%C0%E4%E0%EF%F2%E8%E2%ED%FB%E9_%E2%E5%E1-%E4%E8%E7%E0%E9%ED\">\u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d<\/a> \u0438 \u044f \u0445\u043e\u0447\u0443 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u043e\u0440\u0442\u0444\u043e\u043b\u0438\u043e \u0441 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u043c\u0438. <\/p>\n<p>  <a href=\"http:\/\/netcribe.com\/example\/responsive-portfolio\/index.php\"><img decoding=\"async\" src=\"http:\/\/img-fotki.yandex.ru\/get\/4126\/39503516.0\/0_aa0df_fa835f52_orig\" alt=\"Netcribe\"\/><\/a><br \/>  <a href=\"http:\/\/netcribe.com\/example\/responsive-portfolio\/index.php\">\u0414\u0415\u041c\u041e<\/a><\/p>\n<p>  <a name=\"habracut\"><\/a>  <\/p>\n<h4>HTML \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430<\/h4>\n<p>  \u0423\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 meta-\u0442\u0435\u0433\u0438, \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c <code>.css<\/code> \u0438 <code>.js<\/code> \u0444\u0430\u0439\u043b\u044b:  <\/p>\n<pre><code class=\"html\">&lt;!doctype html&gt; &lt;html&gt;     &lt;head&gt;         &lt;title&gt;Netcribe - \u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043f\u043e\u0440\u0442\u0444\u043e\u043b\u0438\u043e \u0441 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u043c\u0438&lt;\/title&gt;         &lt;meta charset=&quot;utf-8&quot;&gt;         &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge,chrome=1&quot;&gt;\t         &lt;meta http-equiv=&quot;keywords&quot; content=&quot;&quot;&gt;         &lt;meta http-equiv=&quot;description&quot; content=&quot;&quot;&gt;   \t         &lt;meta name=&quot;author&quot; content=&quot;&quot;&gt;  \t         &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;         &lt;link rel=&quot;shortcut icon&quot; href=&quot;&quot;&gt;         &lt;link rel=&quot;apple-touch-icon&quot; href=&quot;&quot;&gt;          &lt;link rel=&quot;stylesheet&quot; href=&quot;css\/index.css&quot; &gt;         &lt;link rel=&quot;stylesheet&quot; href=&quot;css\/media-queries.css&quot;&gt;                  &lt;script src=&quot;http:\/\/yandex.st\/jquery\/1.8.3\/jquery.min.js&quot;&gt;&lt;\/script&gt;         &lt;script src=&quot;js\/index.js&quot;&gt;&lt;\/script&gt;     &lt;\/head&gt; <\/code><\/pre>\n<p>  \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0442\u0435\u043b\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0412 \u0431\u043b\u043e\u043a\u0435 <code>&lt;nav&gt;&lt;ul&gt; ... &lt;\/ul&gt;&lt;\/nav&gt;<\/code> \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 <code>&lt;li&gt;<\/code> \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u043c \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u0431\u0443\u0434\u0435\u043c \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u0447\u0435\u0440\u0435\u0437 JavaSript:  <\/p>\n<pre><code class=\"html\">&lt;!doctype html&gt; &lt;body&gt;     &lt;div class=&quot;container&quot;&gt;         &lt;header&gt;             &lt;h1 class=&quot;title&quot;&gt;                 \u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043f\u043e\u0440\u0442\u0444\u043e\u043b\u0438\u043e \u0441 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u043c\u0438             &lt;\/h1&gt;         &lt;nav&gt;             &lt;ul&gt;                 &lt;li id=&quot;all&quot;&gt;\u0412\u0441\u0435&lt;\/li&gt;                 &lt;li id=&quot;web&quot;&gt;\u0421\u0430\u0439\u0442\u044b&lt;\/li&gt;                 &lt;li id=&quot;design&quot;&gt;\u0414\u0438\u0437\u0430\u0439\u043d&lt;\/li&gt;                 &lt;li id=&quot;infogrphic&quot;&gt;\u0418\u043d\u0444\u043e\u0433\u0440\u0430\u0444\u0438\u043a\u0430&lt;\/li&gt;                 &lt;li id=&quot;movie&quot;&gt;\u0420\u043e\u043b\u0438\u043a\u0438&lt;\/li&gt;             &lt;\/ul&gt;         &lt;\/nav&gt;        &lt;\/header&gt;         &lt;section class=&quot;work&quot;&gt;         ...         &lt;\/section&gt;         &lt;footer&gt;&lt;\/footer&gt;    &lt;\/div&gt; &lt;\/body&gt; <\/code><\/pre>\n<p>  \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u043e\u0440\u0442\u0444\u043e\u043b\u0438\u043e <code>&lt;figure&gt;<\/code>, \u043a\u043b\u0430\u0441\u0441\u044b \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0440\u0430\u0432\u043d\u044b \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0443 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438. \u0412\u043d\u0443\u0442\u0440\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u043e\u0440\u0442\u0444\u043e\u043b\u0438\u043e \u0431\u0443\u0434\u0435\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438 <a href=\"http:\/\/htmlbook.ru\/html\/dl\">\u0441\u043f\u0438\u0441\u043e\u043a \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0439<\/a> <code>&lt;dl&gt; &lt;dt&gt; &lt;dd&gt;<\/code>:   <\/p>\n<pre><code class=\"html\">&lt;figure class=&quot;web&quot;&gt;     &lt;a href=&quot;#&quot;&gt;         &lt;img src=&quot;images\/1.png&quot; alt=&quot;&quot; \/&gt;         &lt;dl&gt;             &lt;dt&gt;\u041a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f&lt;\/dt&gt;                 &lt;dd&gt;\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u044b&lt;\/dd&gt;         &lt;\/dl&gt;     &lt;\/a&gt; &lt;\/figure&gt; <\/code><\/pre>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u041a\u043e\u043d\u0435\u0447\u043d\u044b\u0439 HTML \u043a\u043e\u0434<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"html\">&lt;!doctype html&gt; &lt;html&gt;     &lt;head&gt;         &lt;title&gt;Netcribe - \u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043f\u043e\u0440\u0442\u0444\u043e\u043b\u0438\u043e \u0441 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u043c\u0438&lt;\/title&gt;         &lt;meta charset=&quot;utf-8&quot;&gt;         &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge,chrome=1&quot;&gt;\t         &lt;meta http-equiv=&quot;keywords&quot; content=&quot;&quot;&gt;         &lt;meta http-equiv=&quot;description&quot; content=&quot;&quot;&gt;   \t         &lt;meta name=&quot;author&quot; content=&quot;&quot;&gt;  \t         &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;         &lt;link rel=&quot;shortcut icon&quot; href=&quot;&quot;&gt;         &lt;link rel=&quot;apple-touch-icon&quot; href=&quot;&quot;&gt;          &lt;link rel=&quot;stylesheet&quot; href=&quot;css\/index.css&quot; &gt;         &lt;link rel=&quot;stylesheet&quot; href=&quot;css\/media-queries.css&quot;&gt;                  &lt;script src=&quot;http:\/\/yandex.st\/jquery\/1.8.3\/jquery.min.js&quot;&gt;&lt;\/script&gt;         &lt;script src=&quot;js\/index.js&quot;&gt;&lt;\/script&gt;     &lt;\/head&gt; &lt;body&gt;     &lt;div class=&quot;container&quot;&gt;         &lt;header&gt;             &lt;h1&gt;                 \u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043f\u043e\u0440\u0442\u0444\u043e\u043b\u0438\u043e \u0441 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u043c\u0438             &lt;\/h1&gt;         &lt;nav&gt;             &lt;ul&gt;                 &lt;li id=&quot;all&quot;&gt;\u0412\u0441\u0435&lt;\/li&gt;                 &lt;li id=&quot;web&quot;&gt;\u0421\u0430\u0439\u0442\u044b&lt;\/li&gt;                 &lt;li id=&quot;design&quot;&gt;\u0414\u0438\u0437\u0430\u0439\u043d&lt;\/li&gt;                 &lt;li id=&quot;infogrphic&quot;&gt;\u0418\u043d\u0444\u043e\u0433\u0440\u0430\u0444\u0438\u043a\u0430&lt;\/li&gt;                 &lt;li id=&quot;movie&quot;&gt;\u0420\u043e\u043b\u0438\u043a\u0438&lt;\/li&gt;             &lt;\/ul&gt;         &lt;\/nav&gt;        &lt;\/header&gt;         &lt;section class=&quot;work&quot;&gt; \t\t\t&lt;figure class=&quot;web&quot;&gt; \t\t\t\t&lt;a href=&quot;#&quot;&gt; \t\t\t\t\t&lt;img src=&quot;images\/1.png&quot; alt=&quot;&quot; \/&gt;                                         &lt;dl&gt;                                            &lt;dt&gt;\u041a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f&lt;\/dt&gt;                                               &lt;dd&gt;\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u044b&lt;\/dd&gt;                                         &lt;\/dl&gt; \t\t\t\t&lt;\/a&gt; \t\t\t&lt;\/figure&gt; \t\t\t&lt;figure class=&quot;design&quot;&gt; \t\t\t\t&lt;a href=&quot;#&quot;&gt; \t\t\t\t\t&lt;img src=&quot;images\/2.png&quot; alt=&quot;&quot; \/&gt;                                         &lt;dl&gt;                                              &lt;dt&gt;\u041a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f&lt;\/dt&gt;                                                 &lt;dd&gt;\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u044b&lt;\/dd&gt;                                         &lt;\/dl&gt; \t\t\t\t&lt;\/a&gt; \t\t\t&lt;\/figure&gt; \t\t\t&lt;figure class=&quot;infogrphic&quot;&gt; \t\t\t\t&lt;a href=&quot;#&quot;&gt; \t\t\t\t\t&lt;img src=&quot;images\/3.png&quot; alt=&quot;&quot; \/&gt;                                         &lt;dl&gt;                                            &lt;dt&gt;\u041a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f&lt;\/dt&gt;                                               &lt;dd&gt;\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u044b&lt;\/dd&gt;                                         &lt;\/dl&gt; \t\t\t\t&lt;\/a&gt; \t\t\t&lt;\/figure&gt; \t\t\t&lt;figure class=&quot;movie&quot;&gt; \t\t\t\t&lt;a href=&quot;#&quot;&gt; \t\t\t\t\t&lt;img src=&quot;images\/4.png&quot; alt=&quot;&quot; \/&gt;                                         &lt;dl&gt;                                              &lt;dt&gt;\u041a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f&lt;\/dt&gt;                                                 &lt;dd&gt;\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u044b&lt;\/dd&gt;                                         &lt;\/dl&gt; \t\t\t\t&lt;\/a&gt; \t\t\t&lt;\/figure&gt;         &lt;\/section&gt;         &lt;footer&gt;&lt;\/footer&gt;    &lt;\/div&gt; &lt;\/body&gt; &lt;\/html&gt; <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<h4>CSS<\/h4>\n<p>  \u0421\u0442\u0438\u043b\u0438\u0437\u0443\u0435\u043c \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u044b:  <\/p>\n<pre><code class=\"css\">body {     background: #dfdfdf url('http:\/\/www.netcribe.com\/images\/pattern.png');     padding: 0;     margin: 0; }  .container {     width: 960px;     margin: 10px auto;     oveflow: hidden; }  header {     text-align: center; }  h1 {     font-family: Ubuntu; \tfont-size: 30px;  \tfont-weight: 300;  } <\/code><\/pre>\n<p>  \u0417\u0430\u0434\u0430\u0435\u043c \u0441\u0442\u0438\u043b\u044c \u0434\u043b\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u043f\u0430\u043d\u0435\u043b\u0438:  <\/p>\n<pre><code class=\"css\">nav ul {     list-style: none;     padding: 0;     margin: 50px 0;     text-align: center; } nav ul li {     display: inline;     cursor: pointer;     margin-right: 10px;     color: #666;     font-size: 12px;     transition: 0.3s;     -webkit-transition: 0.3s;     -moz-transition: 0.3s;     -o-transition: 0.3s;     -ms-transition: 0.3s; } nav ul li:hover {     color: #000; } nav ul li:last-child { \/* \u0423\u0431\u0438\u0440\u0430\u0435\u043c margin \u0443 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441\u043f\u0438\u0441\u043a\u0430 \u0434\u043b\u044f \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0433\u043e \u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f *\/      margin-right: 0; } nav ul li:after {   \/* \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u0435\u043b\u044c '\/' *\/      margin-left: 10px;     content: '\/';     color: #bbb; } nav ul li:hover:after {     color: #bbb; } nav ul li:last-child:after {  \/* \u0423\u0431\u0438\u0440\u0430\u0435\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u0435\u043b\u044c '\/' \u043f\u043e\u0441\u043b\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441\u043f\u0438\u0441\u043a\u0430 *\/      content: ''; }  .current-li { \/* \u041f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u043c\u044b\u0439 \u043a\u043b\u0430\u0441\u0441 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438 *\/      color: #000; } <\/code><\/pre>\n<p>  \u0421\u0442\u0438\u043b\u0438\u0437\u0443\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u043e\u0440\u0442\u0444\u043e\u043b\u0438\u043e:   <\/p>\n<pre><code class=\"css\">.work {     margin: 20px 0; } .work figure {     float: left;     margin: 20px;     width: 200px;     height: 200px;     background: #0296BA;     \/*  \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c webkit \u0444\u0438\u043b\u044c\u0442\u0440 (\u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043d\u0430 http:\/\/habrahabr.ru\/post\/155353\/) *\/     -webkit-filter: sepia(0.4);       position: relative;  \/* \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043a &lt;dl&gt; \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e\u0435 \u043f\u043e\u0437\u0438\u0446\u0438\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 *\/     padding: 0 !important;     box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);     transition: 0.6s;     \/* \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438 \u0440\u0430\u0431\u043e\u0442 \u043f\u0440\u0438 \u0432\u044b\u0431\u043e\u0440\u0435 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438 *\/     -webkit-transition: 0.6s;     -moz-transition: 0.6s;     -o-transition: 0.6s;     -ms-transition: 0.6s; } .work figure a img {     height: 100%;     width: 100%; } <\/code><\/pre>\n<p>  \u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043a \u043a\u0430\u0436\u0434\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u0435 \u0432 \u043f\u043e\u0440\u0442\u0444\u043e\u043b\u0438\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u043f\u043e\u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043d\u0430 \u043d\u0435\u0435 (\u0442\u0435\u0433 <code>&lt;figure&gt;<\/code>). \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043d\u0443\u043b\u0435\u0432\u0443\u044e \u043d\u0435\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c \u0438 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e\u0435 \u043f\u043e\u0437\u0438\u0446\u0438\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0434\u043b\u044f <code>&lt;dl&gt;<\/code>:   <\/p>\n<pre><code class=\"css\">.work figure a {    text-decoration: none; }  .work figure a img {     height: 100%;     width: 100%; } .work figure dl {     opacity: 0;     position: absolute;     left: 0;     right: 0;     bottom: 0;     top: 0;     padding: 20px;     margin: 0;     background: rgba(0, 0, 0, 0.8);     color: white;     transition: 0.6s;     -webkit-transition: 0.6s;     -moz-transition: 0.6s;     -o-transition: 0.6s;     -ms-transition: 0.6s; } .work figure:hover dl {     opacity: 1; } .work figure dl dt {     text-transform: uppercase; \tmargin-bottom: 20px; } .work figure dl dd {     font-size: 12px; } <\/code><\/pre>\n<p>  \u0421\u0442\u0438\u043b\u0438\u0437\u0443\u0435\u043c \u043a\u043b\u0430\u0441\u0441\u044b <code>.selected \u0438 .not-selected<\/code>, \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 <code>&lt;figure&gt;<\/code> \u043f\u0440\u0438 \u0432\u044b\u0431\u043e\u0440\u0435 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438.  <\/p>\n<pre><code class=\"css\">.selected {     -webkit-filter: sepia(0) !important;     -webkit-transform: scale(1.05);     -moz-transform: scale(1.05);     -o-transform: scale(1.05);     -ms-transform: scale(1.05);     transform: scale(1.05); }  .not-selected {     -webkit-transform: scale(0.75);     -moz-transform: scale(0.75);     -o-transform: scale(0.75);     -ms-transform: scale(0.75);     transform: scale(0.75);     -webkit-filter: grayscale(1) !important; } <\/code><\/pre>\n<h5>Selection \u0438 Scrollbar<\/h5>\n<p>  \u041f\u0440\u043e\u0448\u043b\u0438 \u0442\u0435 \u0434\u043d\u0438, \u043a\u043e\u0433\u0434\u0430 \u0431\u044b\u043b\u043e \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e <a href=\"http:\/\/www.siteexperts.com\/ie5\/tips\/ts04\/page1.asp\">\u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c scrollbar \u0432 IE 5.5 \u0438 IE6 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0435 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 W3C \u0441\u0432\u043e\u0439\u0441\u0442\u0432<\/a> \u0432\u0438\u0434\u0430 <code>scrollbar-base-color<\/code>. \u0425\u043e\u0447\u0435\u0442\u0441\u044f \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u043e\u0434\u043d\u043e\u0439 <u>\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0439 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044c\u044e webkit:<\/u>  <\/p>\n<pre><code class=\"css\">::selection {     background: #333;     color: #FFF; } ::-webkit-scrollbar {     width: 9px; } ::-webkit-scrollbar-track {     background:#eee;     border: thin solid lightgray;     box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb {     background:#999;     border: thin solid gray; } <\/code><\/pre>\n<p>  C \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0441\u0435\u0432\u0434\u043e-\u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432 <code>::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;<\/code> \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u043b\u0438 scrollbar \u0432 webkit, \u0447\u0442\u043e \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 \u0441\u043a\u0440\u043e\u043b\u043b\u0438\u043d\u0433 \u0432 Gmail. \u0423\u0447\u0438\u0442\u044b\u0432\u0430\u044f \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 Google Chrome, Safari, Yandex Browser \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u043c\u0435\u043b\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u044d\u0442\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u0442\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u043e \u043d\u0435 \u043e\u0441\u0442\u0430\u043d\u0435\u0442\u0441\u044f \u043d\u0435\u0437\u0430\u043c\u0435\u0447\u0435\u043d\u043d\u044b\u043c \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0434\u043b\u044f \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u044b \u0430\u0443\u0434\u0438\u0442\u043e\u0440\u0438\u0438 \u0412\u0430\u0448\u0435\u0433\u043e \u0441\u0430\u0439\u0442\u0430. \u0415\u0441\u043b\u0438 \u044f \u043d\u0435 \u043e\u0448\u0438\u0431\u0430\u044e\u0441\u044c, \u0442\u043e \u043e\u0431 \u044d\u0442\u043e\u0439 \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0441\u0442\u0438 \u043d\u0430 \u0445\u0430\u0431\u0440\u0435 \u043d\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u043b\u043e\u0441\u044c, \u0445\u043e\u0442\u044f \u0434\u0430\u043d\u043d\u044b\u0435 <a href=\"https:\/\/www.webkit.org\/blog\/363\/styling-scrollbars\/\">\u043f\u0440\u0435\u0444\u0438\u043a\u0441\u044b \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0441 2009 \u0433\u043e\u0434\u0430<\/a>. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e\u0431 \u044d\u0442\u043e\u043c <a href=\"http:\/\/css-tricks.com\/custom-scrollbars-in-webkit\/\">\u043f\u0438\u0448\u0435\u0442 Cris Coyier \u043d\u0430 CSS Tricks<\/a>.<\/p>\n<h5>Media Queries<\/h5>\n<p>  <\/p>\n<h6>965px \u0438\u043b\u0438 \u043c\u0435\u043d\u044c\u0448\u0435<\/h6>\n<p>  840 = (170+40)*4. \u0428\u0438\u0440\u0438\u043d\u0430 <code>.conteiner<\/code> \u0440\u0430\u0432\u043d\u0430 \u0441\u0443\u043c\u043c\u0435 \u0448\u0438\u0440\u0438\u043d\u044b \u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 margin-left \u0438 margin-right \u043f\u043e\u043c\u043d\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u043d\u0430 4 (\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430).   <\/p>\n<pre><code class=\"css\">\/* \u0421\u0442\u0430\u0440\u044b\u0435 \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u044b, \u043d\u0435\u0442\u0431\u0443\u043a\u0438, \u043f\u043b\u0430\u043d\u0448\u0435\u0442\u044b (\u0432 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0438)  *\/ @media only screen and (max-width: 965px) {     .container {         width: 840px;       }     .work figure {         width: 170px;         height: 170px;     } } <\/code><\/pre>\n<h6>860px \u0438\u043b\u0438 \u043c\u0435\u043d\u044c\u0448\u0435<\/h6>\n<p>  \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0438 \u0432 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u0442\u0440\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u2014 720 = (200+40)*3.  <\/p>\n<pre><code class=\"css\">\/* \u041d\u0435\u0442\u0431\u0443\u043a\u0438, \u043f\u043b\u0430\u043d\u0448\u0435\u0442\u044b  *\/ @media only screen and (max-width: 860px) {     .container {         width: 720px;     }     .work figure {         width: 200px;         height: 200px;     } } <\/code><\/pre>\n<h6>740px \u0438\u043b\u0438 \u043c\u0435\u043d\u044c\u0448\u0435<\/h6>\n<p>  600 = (160+40)*3. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u0435\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c 0.5 \u0447\u0442\u043e \u0431\u044b \u043d\u0430 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 \u0441 \u0434\u0430\u043d\u043d\u044b\u043c \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u0437\u0430\u043c\u0435\u0442\u043d\u0435\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441 \u043a\u043b\u0430\u0441\u0441\u043e\u043c .not-selected:   <\/p>\n<pre><code class=\"css\">\/* \u041f\u043b\u0430\u043d\u0448\u0435\u0442\u044b \u0438 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u044b *\/ @media only screen and (max-width: 740px) {     .container {         width: 600px;     }     .work figure {         width: 160px;         height: 160px;     }     .not-current {         opacity: 0.5;     } } <\/code><\/pre>\n<h6>610px \u0438\u043b\u0438 \u043c\u0435\u043d\u044c\u0448\u0435<\/h6>\n<p>  460 = (160+70)*2  <\/p>\n<pre><code class=\"css\">\/* \u0422\u0435\u043b\u0435\u0444\u043e\u043d\u044b (\u0432 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0438) \u0438 \u041f\u043b\u0430\u043d\u0448\u0435\u0442\u044b (\u0432 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0438) *\/ @media only screen and (max-width: 610px) {     .container {         width: 460px;     }      .work figure {         margin: 20px 35px;     } } <\/code><\/pre>\n<h6>480px \u0438\u043b\u0438 \u043c\u0435\u043d\u044c\u0448\u0435<\/h6>\n<p>  320 = 200 + 120  <\/p>\n<pre><code class=\"css\">\/* \u0422\u0435\u043b\u0435\u0444\u043e\u043d\u044b (\u0432 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0438) *\/ @media only screen and (max-width: 480px) {     .container {         width: 320px;     }     .work figure {         width: 200px;         height: 200px;         margin: 20px 60px;     } } <\/code><\/pre>\n<h4>JavaScript \u2014 jQuery<\/h4>\n<p>  \u0412\u0441\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u2014 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u0438\u0440\u0443\u0435\u043c \u043a\u043b\u0430\u0441\u0441\u0430\u043c\u0438:<\/p>\n<ul>\n<li>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043d\u0430 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438 <code>nav &gt; li<\/code> <\/li>\n<li>\u0423 \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0433\u0434\u0435 \u043a\u043b\u0430\u0441\u0441 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0435\u0442 \u0441 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u043c \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0439 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438 \u0443\u0434\u0430\u043b\u044f\u0435\u043c \u043a\u043b\u0430\u0441\u0441 .not-selected \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c .selected.<\/li>\n<li>\u0423\u0434\u0430\u043b\u044f\u0435\u043c \u043a\u043b\u0430\u0441\u0441 .corrent-li \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c .current-li \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0439 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438.<\/li>\n<li>\u0414\u043b\u044f \u0432\u0441\u0435\u0445 \u0440\u0430\u0431\u043e\u0442 \u043d\u0435 \u0432\u0445\u043e\u0434\u044f\u0449\u0438\u0445 \u0432 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u0443\u044e \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044e \u0443\u0434\u0430\u043b\u044f\u0435\u043c \u043a\u043b\u0430\u0441\u0441 .selected \u0438 \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u043c .not-selected<\/li>\n<\/ul>\n<pre><code class=\"javascript\">function scaleDown() { \/\/ \u0417\u0430\u043c\u0435\u043d\u044f\u0435\u043c \u043a\u043b\u0430\u0441\u0441\u044b \u0443 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0438 \u0443\u0434\u0430\u043b\u044f\u0435\u043c \u043a\u043b\u0430\u0441\u0441 \u0443 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438     $('.work &gt; figure').removeClass('selected').addClass('not-selected');     $('nav &gt; ul &gt; li').removeClass('current-li'); }  function show(category) { \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043a\u043b\u0430\u0441\u0441 \u043a \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438,  \u043c\u0435\u043d\u044f\u0435\u043c \u043a\u043b\u0430\u0441\u0441\u044b \u0443 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0445 \u0440\u0430\u0431\u043e\u0442     scaleDown();     $('#' + category).addClass('current-li');     $('.' + category).removeClass('not-selected');     $('.' + category).addClass('selected');     if (category == &quot;all&quot;) { \/\/ \u0415\u0441\u043b\u0438 \u0432\u044b\u0431\u0440\u0430\u043d\u044b \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u044b         $('nav &gt; ul &gt; li').removeClass('current-li');         $('#all').addClass('current-li');         $('.work &gt; figure').removeClass('selected, not-selected');     } }  $(document).ready(function(){     $('#all').addClass('current-li');     $(&quot;nav &gt; ul &gt; li&quot;).click(function(){         show(this.id);     }); }); <\/code><\/pre>\n<p>  <a href=\"http:\/\/yadi.sk\/d\/hip99B901IuWR\">\u0421\u043a\u0430\u0447\u0430\u0442\u044c \u0430\u0440\u0445\u0438\u0432 \u0441 \u0434\u0435\u043c\u043e<\/a><\/p>\n<p>  \u0421\u043f\u0430\u0441\u0438\u0431\u043e \u0432\u0441\u0435\u043c \u0437\u0430 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435.      \t   \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\/162675\/\"> http:\/\/habrahabr.ru\/post\/162675\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div class=\"content html_format\">   \t\u0414\u043e\u0431\u0440\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441\u0443\u0442\u043e\u043a \u0443\u0432\u0430\u0436\u0430\u0435\u043c\u044b\u0435 \u0445\u0430\u0431\u0440\u0430\u0436\u0438\u0442\u0435\u043b\u0438. \u041d\u0430 \u0441\u0435\u0433\u043e\u0434\u043d\u044f\u0448\u043d\u0438\u0439 \u0434\u0435\u043d\u044c \u0443\u0436\u0435 \u043c\u043d\u043e\u0433\u0438\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u044b \u0441 \u043f\u043e\u043d\u044f\u0442\u0438\u0435\u043c <a href=\"http:\/\/ru.wikipedia.org\/wiki\/%C0%E4%E0%EF%F2%E8%E2%ED%FB%E9_%E2%E5%E1-%E4%E8%E7%E0%E9%ED\">\u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d<\/a> \u0438 \u044f \u0445\u043e\u0447\u0443 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u043e\u0440\u0442\u0444\u043e\u043b\u0438\u043e \u0441 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u043c\u0438. <\/p>\n<p>  <a href=\"http:\/\/netcribe.com\/example\/responsive-portfolio\/index.php\"><img decoding=\"async\" src=\"http:\/\/img-fotki.yandex.ru\/get\/4126\/39503516.0\/0_aa0df_fa835f52_orig\" alt=\"Netcribe\"\/><\/a><br \/>  <a href=\"http:\/\/netcribe.com\/example\/responsive-portfolio\/index.php\">\u0414\u0415\u041c\u041e<\/a><\/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-162675","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/162675","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=162675"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/162675\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=162675"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=162675"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=162675"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}