{"id":209462,"date":"2014-01-18T13:30:03","date_gmt":"2014-01-18T09:30:03","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=209462"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=209462","title":{"rendered":"<span class=\"post_title\">\u0422\u0440\u044e\u043a\u0438 \u0441 CSS-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f\u043c\u0438: \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u044b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f, \u043e\u0442\u0440\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0438, \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f transform-origin \u0438 \u0434\u0440\u0443\u0433\u043e\u0435<\/span>"},"content":{"rendered":"<div class=\"content html_format\">       \u041f\u0440\u0438\u043c\u0435\u043d\u044f\u044f CSS-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432 \u043f\u043e\u0432\u0441\u0435\u0434\u043d\u0435\u0432\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u0435, \u044f \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e \u0432\u044b\u0440\u0430\u0431\u043e\u0442\u0430\u043b \u043f\u0440\u0438\u0432\u044b\u0447\u043a\u0443 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441 \u043d\u0438\u043c\u0438 \u0432 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f. \u041f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u043f\u044b\u0442\u0430\u044f\u0441\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u0443\u044e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0443\u044e \u0437\u0430\u0434\u0443\u043c\u043a\u0443 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u043c\u0435\u043d\u044c\u0448\u0435\u0433\u043e \u0447\u0438\u0441\u043b\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 HTML, \u044f \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043b \u043d\u0435\u043c\u0430\u043b\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043d\u0435\u043e\u0447\u0435\u0432\u0438\u0434\u043d\u044b\u0435 \u0432\u0435\u0449\u0438. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0445\u043e\u0447\u0443 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0438\u0437 \u043d\u0438\u0445. <\/p>\n<h5>\u0411\u044b\u0441\u0442\u0440\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043f\u043e\u0441\u0440\u0435\u0434\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438<\/h5>\n<p>  \u041e\u0431\u044b\u0447\u043d\u043e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043b\u0430\u0432\u043d\u043e \u043c\u0435\u043d\u044f\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c. \u041e\u0434\u043d\u0430\u043a\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043c\u043e\u0433\u0443\u0442 \u0442\u0430\u043a\u0436\u0435 \u0431\u044b\u0442\u044c \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u044b\u043c\u0438. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u0434\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0434\u0432\u0430 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0445 \u043a\u0430\u0434\u0440\u0430 \u0441 \u043e\u0447\u0435\u043d\u044c \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u043c \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b\u043e\u043c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0432 0.001%:<\/p>\n<pre><code class=\"css\">@keyframes toggleOpacity {   50% { opacity: 1; } \/* Turn off *\/   50.001% { opacity: 0.4; }    \/* Keep off state for a short period *\/    52.999% { opacity: 0.4; } \/* Turn back on *\/   53% { opacity: 1; } } <\/code><\/pre>\n<p>  \u0412\u043e\u0442 \u043a\u0430\u043a \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u044d\u0442\u043e\u0442 \u043f\u0440\u0438\u0451\u043c \u0434\u043b\u044f \u0438\u043c\u0438\u0442\u0430\u0446\u0438\u0438 \u043c\u0438\u0433\u0430\u044e\u0449\u0435\u0439 \u043d\u0435\u043e\u043d\u043e\u0432\u043e\u0439 \u0432\u044b\u0432\u0435\u0441\u043a\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u0438 \u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>text-shadow<\/code>:<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/b87\/95c\/c37\/b8795cc37897ac88caeab94ffe6e80ba.gif\"\/><br \/>  <a name=\"habracut\"><\/a>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u041a\u043e\u0434 \u043f\u0440\u0438\u043c\u0435\u0440\u0430:<\/b><\/p>\n<div class=\"spoiler_text\">HTML:<\/p>\n<pre><code class=\"html\">&lt;link href='http:\/\/fonts.googleapis.com\/css?family=Monoton' rel='stylesheet' type='text\/css'&gt; &lt;div&gt;   &lt;p id=&quot;error&quot;&gt;E&lt;span&gt;r&lt;\/span&gt;ror&lt;\/p&gt;   &lt;p id=&quot;code&quot;&gt;4&lt;span&gt;0&lt;\/span&gt;&lt;span&gt;4&lt;\/span&gt;&lt;\/p&gt; &lt;\/div&gt; <\/code><\/pre>\n<p>  CSS:<\/p>\n<pre><code class=\"css\">body { background-color: #111111; } div {   padding: 40px;   font-size: 75px;   font-family: 'Monoton', cursive;   text-align: center;   text-transform: uppercase;   text-shadow: 0 0 80px red,0 0 30px FireBrick,0 0 6px DarkRed;   color: red; } div p { margin:0; } #error:hover { text-shadow: 0 0 200px #ffffff,0 0 80px #008000,0 0 6px #0000ff; } #code:hover { text-shadow: 0 0 100px red,0 0 40px FireBrick,0 0 8px DarkRed; } #error {   color: #fff;   text-shadow: 0 0 80px #ffffff,0 0 30px #008000,0 0 6px #0000ff; } #error span {   animation: upper 11s linear infinite; } #code span:nth-of-type(2) {   animation: lower 10s linear infinite; } #code span:nth-of-type(1) {   text-shadow: none;   opacity:.4; } @keyframes upper {   0%,19.999%,22%,62.999%,64%, 64.999%,70%,100% {     opacity:.99; text-shadow: 0 0 80px #ffffff,0 0 30px #008000,0 0 6px #0000ff;   }   20%,21.999%,63%,63.999%,65%,69.999% {     opacity:0.4; text-shadow: none;    } } @keyframes lower {   0%,12%,18.999%,23%,31.999%,37%,44.999%,46%,49.999%,51%,58.999%,61%,68.999%,71%,85.999%,96%,100% {     opacity:0.99; text-shadow: 0 0 80px red,0 0 30px FireBrick,0 0 6px DarkRed;   }   19%,22.99%,32%,36.999%,45%,45.999%,50%,50.99%,59%,60.999%,69%,70.999%,86%,95.999% {      opacity:0.4; text-shadow: none;    } } <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  <a href=\"http:\/\/codepen.io\/chriscoyier\/pen\/FmnGj\">\u0414\u0435\u043c\u043e \u043d\u0430 Codepen<\/a><\/p>\n<h5>\u041e\u0442\u0440\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438<\/h5>\n<p>  \u041f\u043e\u043b\u043e\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0430 \u043e\u0442\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u0442 \u043d\u0430\u0447\u0430\u043b\u043e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043d\u0430 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u0440\u0435\u043c\u044f. \u0410 \u043e\u0442\u0440\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u2014 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043d\u0435\u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e, \u043d\u043e \u043d\u0435 \u0441 \u0441\u0430\u043c\u043e\u0433\u043e \u0441\u043d\u0430\u0447\u0430\u043b\u0430, \u0430 \u0441\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0433\u043e \u0432 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0435. \u0414\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0441 \u043a\u0430\u043a\u043e\u0433\u043e-\u0442\u043e \u043c\u043e\u043c\u0435\u043d\u0442\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u0435\u0451 \u0446\u0438\u043a\u043b\u0430. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043a \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u0441\u043e \u0441\u0434\u0432\u0438\u0433\u043e\u043c \u0444\u0430\u0437\u044b, \u0438\u0437\u043c\u0435\u043d\u044f\u044f \u043b\u0438\u0448\u044c \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0438. \u0412\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0442\u0430\u043a\u043e\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438:<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/3ad\/eb7\/312\/3adeb73124495f1a4368063055f207f0.gif\"\/><\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u041a\u043e\u0434 \u043f\u0440\u0438\u043c\u0435\u0440\u0430:<\/b><\/p>\n<div class=\"spoiler_text\">HTML:<\/p>\n<pre><code class=\"html\">&lt;div&gt;&lt;\/div&gt; &lt;div&gt;&lt;\/div&gt; &lt;div&gt;&lt;\/div&gt; &lt;div&gt;&lt;\/div&gt; &lt;div&gt;&lt;\/div&gt; &lt;div&gt;&lt;\/div&gt; &lt;div&gt;&lt;\/div&gt; &lt;div&gt;&lt;\/div&gt; &lt;div&gt;&lt;\/div&gt; &lt;div&gt;&lt;\/div&gt; &lt;div&gt;&lt;\/div&gt; <\/code><\/pre>\n<p>  CSS:<\/p>\n<pre><code class=\"css\">div {   border-radius:50%;   position:absolute;   top:50%; left:75%; } div:nth-of-type(odd) { background:black; } div:nth-of-type(even) { background:white; border:2px solid black; } div:nth-of-type(11) {   height:10px; width:10px;   margin-top:-5px; margin-left:-5px;   -webkit-animation:slide 3s ease-in-out infinite;   animation:slide 3s ease-in-out infinite; } div:nth-of-type(10) {   height:20px; width:20px;   margin-top:-12px; margin-left:-12px;   -webkit-animation:slide 3s -2.7s ease-in-out infinite;   animation:slide 3s -2.7s ease-in-out infinite; } div:nth-of-type(9) {   height:40px; width:40px;   margin-top:-20px; margin-left:-20px;   -webkit-animation:slide 3s -2.4s ease-in-out infinite;   animation:slide 3s -2.4s ease-in-out infinite; } div:nth-of-type(8) {   height:60px; width:60px;   margin-top:-32px; margin-left:-32px;   -webkit-animation:slide 3s -2.1s ease-in-out infinite;   animation:slide 3s -2.1s ease-in-out infinite; } div:nth-of-type(7) {   height:80px; width:80px;   margin-top:-40px; margin-left:-40px;   -webkit-animation:slide 3s -1.8s ease-in-out infinite;   animation:slide 3s -1.8s ease-in-out infinite; } div:nth-of-type(6) {   height:100px; width:100px;   margin-top:-52px; margin-left:-52px;   -webkit-animation:slide 3s -1.5s ease-in-out infinite;   animation:slide 3s -1.5s ease-in-out infinite; } div:nth-of-type(5) {   height:120px; width:120px;   margin-top:-60px; margin-left:-60px;   -webkit-animation:slide 3s -1.2s ease-in-out infinite;   animation:slide 3s -1.2s ease-in-out infinite; } div:nth-of-type(4) {   height:140px; width:140px;   margin-top:-72px; margin-left:-72px;   -webkit-animation:slide 3s -0.9s ease-in-out infinite;   animation:slide 3s -0.9s ease-in-out infinite; } div:nth-of-type(3) {   height:160px; width:160px;   margin-top:-80px; margin-left:-80px;   -webkit-animation:slide 3s -0.6s ease-in-out infinite;   animation:slide 3s -0.6s ease-in-out infinite; } div:nth-of-type(2) {   height:180px; width:180px;   margin-top:-92px; margin-left:-92px;   -webkit-animation:slide 3s -0.3s ease-in-out infinite;   animation:slide 3s -0.3s ease-in-out infinite; } div:nth-of-type(1) {   height:200px; width:200px;   margin-top:-100px; margin-left:-100px;   -webkit-animation:slide 3s ease-in-out infinite;   animation:slide 3s ease-in-out infinite; } @keyframes slide {   0% { left:75% }   50% { left:25%; }   100% { left:75%; } } @-webkit-keyframes slide {   0% { left:75% }   50% { left:25%; }   100% { left:75%; } } <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  <a href=\"http:\/\/codepen.io\/Zeaklous\/pen\/dirzc\">\u0414\u0435\u043c\u043e \u043d\u0430 Codepen<\/a><\/p>\n<h5>\u041f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438<\/h5>\n<p>  \u042f \u0441\u0442\u0430\u0440\u0430\u044e\u0441\u044c \u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u043c\u0438, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e. \u042d\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u0438 CSS-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439. \u0425\u043e\u0442\u044f \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u0432\u0441\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u043c\u0438 \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0438\u043d\u043e\u0433\u0434\u0430 \u0432\u0441\u0451 \u0436\u0435 \u0443\u0434\u0430\u0451\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u043c\u0435\u0441\u0442\u043e \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u044b\u0445 \u0435\u0434\u0438\u043d\u0438\u0446 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u044b \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0435\u0434\u0438\u043d\u0438\u0446\u044b. <\/p>\n<p>  \u0412\u043e \u043c\u043d\u043e\u0433\u0438\u0445 \u0441\u0432\u043e\u0438\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f\u0445 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0432\u044b \u0434\u0443\u043c\u0430\u0435\u0442\u0435, \u0447\u0442\u043e \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u0448\u0438\u0440\u0438\u043d\u0443 \u0438 \u0432\u044b\u0441\u043e\u0442\u0443. \u043d\u043e \u044d\u0442\u043e \u043d\u0435 \u0442\u0430\u043a. \u041c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0448\u0438\u0440\u0438\u043d\u0443 \u0432 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0430\u0445, \u043d\u0443\u043b\u0435\u0432\u0443\u044e \u0432\u044b\u0441\u043e\u0442\u0443 \u0438 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u044f <code>padding<\/code>. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>padding-bottom<\/code> \u0432\u044b\u0441\u043e\u0442\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u0435:<\/p>\n<pre><code class=\"css\">.container {   position: relative;   display: block;   width: 100%;   height: 0;   padding-bottom: 100%; } <\/code><\/pre>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u044b \u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u043d\u0430 Codepen \u0438 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043e\u043a\u043d\u0430, \u0432\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u043a\u0430\u043a \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0442\u0430\u043a\u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u044b \u043e\u0442\u0440\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438.<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/e54\/b9f\/553\/e54b9f55345a3bdfc78100971193cdc0.gif\"\/><\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u041a\u043e\u0434 \u043f\u0440\u0438\u043c\u0435\u0440\u0430:<\/b><\/p>\n<div class=\"spoiler_text\">HTML:<\/p>\n<pre><code class=\"html\">&lt;span&gt; &lt;!-- Square container --&gt;   &lt;div&gt;&lt;\/div&gt; &lt;!-- Bars --&gt;   &lt;div&gt;&lt;\/div&gt;   &lt;div&gt;&lt;\/div&gt;   &lt;div&gt;&lt;\/div&gt;   &lt;div&gt;&lt;\/div&gt;   &lt;div&gt;&lt;\/div&gt;   &lt;div&gt;&lt;\/div&gt;   &lt;div&gt;&lt;\/div&gt;   &lt;div&gt;&lt;\/div&gt;   &lt;div&gt;&lt;\/div&gt;   &lt;div&gt;&lt;\/div&gt;   &lt;div&gt;&lt;\/div&gt;   &lt;div&gt;&lt;\/div&gt;   &lt;div&gt;&lt;\/div&gt;   &lt;div&gt;&lt;\/div&gt;   &lt;div&gt;&lt;\/div&gt;   &lt;div&gt;&lt;\/div&gt;   &lt;div&gt;&lt;\/div&gt;   &lt;div&gt;&lt;\/div&gt;   &lt;div&gt;&lt;\/div&gt;   &lt;div&gt;&lt;\/div&gt;   &lt;div&gt;&lt;\/div&gt; &lt;\/span&gt; <\/code><\/pre>\n<p>  CSS:<\/p>\n<pre><code class=\"css\">body {    background: rgb(20, 20, 20);   overflow: hidden; } span {   position: relative;   display: block;   width: 100%;   height: 0;   padding-top: 100%;   overflow: hidden; } div {   margin-top: -17%;   height: 34%;    width: 2%;   top: 30%;   border-radius: 20px;   position: absolute; } div:nth-of-type(1)  { animation: wave 17s   0.000s linear infinite; } div:nth-of-type(2)  { animation: wave 17s -16.227s linear infinite; } div:nth-of-type(3)  { animation: wave 17s -15.455s linear infinite; } div:nth-of-type(4)  { animation: wave 17s -14.682s linear infinite; } div:nth-of-type(5)  { animation: wave 17s -13.909s linear infinite; } div:nth-of-type(6)  { animation: wave 17s -13.136s linear infinite; } div:nth-of-type(7)  { animation: wave 17s -12.364s linear infinite; } div:nth-of-type(8)  { animation: wave 17s -11.591s linear infinite; } div:nth-of-type(9)  { animation: wave 17s -10.818s linear infinite; } div:nth-of-type(10) { animation: wave 17s -10.045s linear infinite; } div:nth-of-type(11) { animation: wave 17s  -9.273s linear infinite; } div:nth-of-type(12) { animation: wave 17s  -8.500s linear infinite; } div:nth-of-type(13) { animation: wave 17s  -7.727s linear infinite; } div:nth-of-type(14) { animation: wave 17s  -6.955s linear infinite; } div:nth-of-type(15) { animation: wave 17s  -6.182s linear infinite; } div:nth-of-type(16) { animation: wave 17s  -5.409s linear infinite; } div:nth-of-type(17) { animation: wave 17s  -4.636s linear infinite; } div:nth-of-type(18) { animation: wave 17s  -3.864s linear infinite; } div:nth-of-type(19) { animation: wave 17s  -3.091s linear infinite; } div:nth-of-type(20) { animation: wave 17s  -2.318s linear infinite; } div:nth-of-type(21) { animation: wave 17s  -1.545s linear infinite; } div:nth-of-type(22) { animation: wave 17s  -0.773s linear infinite; }  @keyframes wave {   0%   { left:-2%; background: #3B44D1; }   5%   { background: #9337FE; }   10%  { height:10%; margin-top: -5%; background: #C532FC; }   15%  { background: #F639F8; }   20%  { height:34%; margin-top:-17%; background: #F236C8; }   25%  { background: #FF2F8D; }   30%  { height:10%; margin-top: -5%; background: #EE3860; }   35%  { background: #DC5245; }   40%  { height:34%; margin-top:-17%; background: #F38643; }   45%  { background: #F8B435; }   50%  { height:10%; margin-top: -5%; background: #FAF444; }   55%  { background: #E0FF3B; }   60%  { height:34%; margin-top:-17%; background: #E1FF3C; }   65%  { background: #46F443; }   70%  { height:10%; margin-top: -5%; background: #54E67B; }   75%  { background: #4DF3A9; }   80%  { height:34%; margin-top:-17%; background: #3AF9DA; }   85%  { background: #36EBF4; }   90%  { height:10%; margin-top: -5%; background: #3DB3F3; }   95%  { background: #3C82F1; }   100% { height:34%; margin-top:-17%; left:100%; background: #5B38EE; } } <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  <a href=\"http:\/\/codepen.io\/chriscoyier\/pen\/CFmps\">\u0414\u0435\u043c\u043e \u043d\u0430 Codepen<\/a><\/p>\n<h5>\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 transform-origin \u043f\u043e\u0441\u0440\u0435\u0434\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438<\/h5>\n<p>  \u0420\u0430\u0431\u043e\u0442\u0430\u044f \u043d\u0430\u0434 \u043e\u0434\u043d\u043e\u0439 \u0438\u0437 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439, \u044f \u0441 \u0443\u0434\u0438\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043b, \u0447\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>transform-origin<\/code> \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043c\u043e\u0436\u0435\u0442 \u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u043f\u043e\u0441\u0440\u0435\u0434\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043d\u043e \u0438 \u0441\u0430\u043c\u043e \u043f\u043e \u0441\u0435\u0431\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043e. \u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u044d\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0432 \u043e\u0434\u043d\u043e\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0434\u0435\u043b\u0430\u0442\u044c \u0447\u0435\u0442\u044b\u0440\u0435 \u0440\u0430\u0437\u043d\u044b\u0445 \u043f\u043e\u0432\u043e\u0440\u043e\u0442\u0430 \u0432\u043c\u0435\u0441\u0442\u043e \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0447\u0435\u0442\u044b\u0440\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438:<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/7e6\/c7a\/6e1\/7e6c7a6e1efbd2bc8f9473bb18f3d457.gif\"\/><\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u041a\u043e\u0434 \u043f\u0440\u0438\u043c\u0435\u0440\u0430:<\/b><\/p>\n<div class=\"spoiler_text\">HTML:<\/p>\n<pre><code class=\"html\">&lt;div&gt;&lt;\/div&gt;  <\/code><\/pre>\n<p>  CSS:<\/p>\n<pre><code class=\"css\">div {   width:200px; height:200px;   background:rgba(0,0,255,.5);   animation:flipAround 8s infinite; } @keyframes flipAround {   25% { animation-mode:forwards; transform-origin:right; transform:rotateY(-180deg); }   25.001% { transform:translateX(200px); }   50% { transform-origin:bottom; transform:translateX(200px) rotateX(-180deg); }   50.001% { transform:translateX(200px) translateY(200px); }   75% { transform-origin:left; transform:translateX(200px) translateY(200px) rotateY(180deg); }   75.001% { transform:translateY(200px); }   100% { transform-origin:top; transform:translateY(200px) rotateX(180deg); } } body { background:rgb(20,20,20); } <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  <a href=\"http:\/\/codepen.io\/Zeaklous\/pen\/jiDHL\">\u0414\u0435\u043c\u043e \u043d\u0430 Codepen<\/a><\/p>\n<p>  \u0423 \u044d\u0442\u043e\u0433\u043e \u0442\u0440\u044e\u043a\u0430 \u0435\u0441\u0442\u044c \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u043a: \u0432\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>animation-mode: forwards<\/code>; \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0447\u0430\u0441\u0442\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u042d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u043d\u0430\u043c \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u0434\u0432\u0438\u0433\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 <code>transform-origin<\/code>. \u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 <code>translate<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0438\u043c\u0438\u0442\u0430\u0446\u0438\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u043f\u043e\u0432\u043e\u0440\u043e\u0442\u0430. \u0412 \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445 \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f <a href=\"http:\/\/codepen.io\/Zeaklous\/pen\/fsGvH\">\u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0443\u0442\u043e\u043c\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c<\/a>. <\/p>\n<h5>\u041e\u0442\u0440\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 transform-origin<\/h5>\n<p>  \u041c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u043e\u0442\u0440\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 transform-origin, \u0447\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0432\u0440\u0430\u0449\u0430\u044e\u0449\u0438\u0445\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u0412\u043c\u0435\u0441\u0442\u043e \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u0438 \u0443\u0433\u043e\u043b \u043f\u043e\u0432\u043e\u0440\u043e\u0442\u0430 \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, <a href=\"http:\/\/lea.verou.me\/2012\/02\/moving-an-element-along-a-circle\/\">\u043a\u0430\u043a \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u041b\u0438 \u0412\u0435\u0440\u0443<\/a>, \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u043f\u0440\u043e\u0449\u0435, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043e\u0442\u0440\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f <code>transform-origin<\/code> \u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438\u043b\u0438 \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442 (\u0438\u043b\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u0435\u0441\u043b\u0438 \u043e\u043d \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u043d \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u044b\u0439 \u0443\u0433\u043e\u043b \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430). \u0421 \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 <code>transform-origin<\/code> \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0434\u043d\u0443 \u0438 \u0442\u0443 \u0436\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432:<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/6df\/d54\/c93\/6dfd54c939e6023ef242c813e6e59496.gif\"\/><\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u041a\u043e\u0434 \u043f\u0440\u0438\u043c\u0435\u0440\u0430:<\/b><\/p>\n<div class=\"spoiler_text\">HTML:<\/p>\n<pre><code class=\"html\">&lt;div&gt;&lt;\/div&gt; <\/code><\/pre>\n<p>  CSS:<\/p>\n<pre><code class=\"css\">div { width:100px; height:100px; margin-top:180px; transform-origin:200% center; position:relative; animation:rotate 3s linear infinite; } div:before { content:''; position:absolute; height:100%; width:100%; background:blue; animation:rotate 3s linear reverse infinite; } @keyframes rotate { 100% { transform:rotate(-360deg); } }  body { background:rgb(20,20,20); } \/* The best color ever *\/ <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  <a href=\"http:\/\/codepen.io\/Zeaklous\/pen\/rsvgK\">\u0414\u0435\u043c\u043e \u043d\u0430 Codepen<\/a><\/p>\n<h5>\u041c\u0430\u0433\u0438\u044f box-shadow<\/h5>\n<p>  \u0414\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0444\u043e\u0440\u043c \u0431\u0435\u0437 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>box-shadow.<\/code> \u0421 \u0435\u0433\u043e \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c <a href=\"http:\/\/css-tricks.com\/snippets\/css\/multiple-borders\/\">\u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0433\u0440\u0430\u043d\u0438\u0446 \u0432\u043e\u043a\u0440\u0443\u0433 \u043e\u0434\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430<\/a>. \u041d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u044d\u0442\u043e\u0439 \u0438\u0434\u0435\u0438, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0440\u0430\u0437\u043d\u044b\u0435 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0442\u0435\u043d\u0435\u0439, \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0446\u0435\u043b\u044b\u0435 \u043d\u0430\u0431\u043e\u0440\u044b \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0444\u0438\u0433\u0443\u0440 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 HTML. \u0412\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442, \u043a\u0430\u043a \u0448\u0435\u0441\u0442\u044c \u0432\u0440\u0430\u0449\u0430\u044e\u0449\u0438\u0445\u0441\u044f \u043a\u0440\u0443\u0436\u043a\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0446\u0435\u043b\u0438\u043a\u043e\u043c \u0441\u0434\u0435\u043b\u0430\u043d\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>box-shadow<\/code>:<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/6c7\/980\/f1f\/6c7980f1f97fcb9cba56f46b0e9622b5.gif\"\/><\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u041a\u043e\u0434 \u043f\u0440\u0438\u043c\u0435\u0440\u0430:<\/b><\/p>\n<div class=\"spoiler_text\">HTML:<\/p>\n<pre><code class=\"html\">&lt;div&gt;&lt;\/div&gt; <\/code><\/pre>\n<p>  CSS:<\/p>\n<pre><code class=\"css\">div {   border-radius:50%;   height:2px; width:2px; \/* To allow border-radius to work *\/   position:absolute;   top:50%; left:50%;   margin-top:-1px; margin-left:-1px;   box-shadow:     -75px -125px 0 40px #6cce74,      75px -125px 0 40px #c18d46,     150px    0px 0 40px #c14745,      75px  125px 0 40px #2e1e5b,     -75px  125px 0 40px #9c37a6,    -150px    0px 0 40px #76bdd1;   -webkit-animation:rotate 12s infinite linear;   animation:rotate 12s infinite linear; } @keyframes rotate {   16.67% {     box-shadow:       -75px -125px 0 40px #76bdd1,        75px -125px 0 40px #6cce74,       150px    0px 0 40px #c18d46,        75px  125px 0 40px #c14745,       -75px  125px 0 40px #2e1e5b,      -150px    0px 0 40px #9c37a6;   }   33.33%   {      box-shadow:       -75px -125px 0 40px #9c37a6,        75px -125px 0 40px #76bdd1,       150px    0px 0 40px #6cce74,        75px  125px 0 40px #c18d46,       -75px  125px 0 40px #c14745,      -150px    0px 0 40px #2e1e5b;   }   50%      {      box-shadow:       -75px -125px 0 40px #2e1e5b,        75px -125px 0 40px #9c37a6,       150px    0px 0 40px #76bdd1,        75px  125px 0 40px #6cce74,       -75px  125px 0 40px #c18d46,      -150px    0px 0 40px #c14745;   }   66.67%   {      box-shadow:       -75px -125px 0 40px #c14745,        75px -125px 0 40px #2e1e5b,       150px    0px 0 40px #9c37a6,        75px  125px 0 40px #76bdd1,       -75px  125px 0 40px #6cce74,      -150px    0px 0 40px #c18d46;   }   88.88%   {      box-shadow:       -75px -125px 0 40px #c18d46,        75px -125px 0 40px #c14745,       150px    0px 0 40px #2e1e5b,        75px  125px 0 40px #9c37a6,       -75px  125px 0 40px #76bdd1,      -150px    0px 0 40px #6cce74;   }   100% {     transform:rotate(-360deg);     box-shadow:       -75px -125px 0 40px #6cce74,        75px -125px 0 40px #c18d46,       150px    0px 0 40px #c14745,        75px  125px 0 40px #2e1e5b,       -75px  125px 0 40px #9c37a6,      -150px    0px 0 40px #76bdd1;   } } @-webkit-keyframes rotate {   16.67% {     box-shadow:       -75px -125px 0 40px #76bdd1,        75px -125px 0 40px #6cce74,       150px    0px 0 40px #c18d46,        75px  125px 0 40px #c14745,       -75px  125px 0 40px #2e1e5b,      -150px    0px 0 40px #9c37a6;   }   33.33%   {      box-shadow:       -75px -125px 0 40px #9c37a6,        75px -125px 0 40px #76bdd1,       150px    0px 0 40px #6cce74,        75px  125px 0 40px #c18d46,       -75px  125px 0 40px #c14745,      -150px    0px 0 40px #2e1e5b;   }   50%      {      box-shadow:       -75px -125px 0 40px #2e1e5b,        75px -125px 0 40px #9c37a6,       150px    0px 0 40px #76bdd1,        75px  125px 0 40px #6cce74,       -75px  125px 0 40px #c18d46,      -150px    0px 0 40px #c14745;   }   66.67%   {      box-shadow:       -75px -125px 0 40px #c14745,        75px -125px 0 40px #2e1e5b,       150px    0px 0 40px #9c37a6,        75px  125px 0 40px #76bdd1,       -75px  125px 0 40px #6cce74,      -150px    0px 0 40px #c18d46;   }   88.88%   {      box-shadow:       -75px -125px 0 40px #c18d46,        75px -125px 0 40px #c14745,       150px    0px 0 40px #2e1e5b,        75px  125px 0 40px #9c37a6,       -75px  125px 0 40px #76bdd1,      -150px    0px 0 40px #6cce74;   }   100% {     -webkit-transform:rotate(-360deg);     box-shadow:       -75px -125px 0 40px #6cce74,        75px -125px 0 40px #c18d46,       150px    0px 0 40px #c14745,        75px  125px 0 40px #2e1e5b,       -75px  125px 0 40px #9c37a6,      -150px    0px 0 40px #76bdd1;   } } <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  <a href=\"http:\/\/codepen.io\/Zeaklous\/pen\/lmbJy\">\u0414\u0435\u043c\u043e \u043d\u0430 Codepen<\/a><\/p>\n<p>  \u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, <code>box-shadow<\/code> \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0432 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0430\u0445, \u0442\u0430\u043a \u0447\u0442\u043e \u0438\u0445 \u0442\u0440\u0443\u0434\u043d\u0435\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u043c\u0438, \u0447\u0435\u043c \u043e\u0431\u044b\u0447\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b. \u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u0438\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043c\u043e\u0436\u043d\u043e \u043c\u0435\u043d\u044f\u0442\u044c \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0438\u043b\u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044f <code>transform:scale(n)<\/code> \u0434\u043b\u044f \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.<\/p>\n<h5>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/h5>\n<p>  \u0422\u0430\u043a \u0436\u0435 \u043a\u0430\u043a \u0438 <code>box-shadow<\/code>, \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u043e\u0431\u043e\u0433\u0430\u0449\u0435\u043d\u0438\u044f \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u0432\u0438\u0434\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 HTML. \u0414\u043b\u044f \u043d\u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u043e\u0442 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043e\u043d\u0438 \u043c\u043e\u0433\u0443\u0442 \u0438\u043c\u0435\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0442\u0435\u043d\u0438 \u2014 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043a\u0430\u043a \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u0443\u0434\u0438\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0432\u0435\u0449\u0438:<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/e23\/96c\/dea\/e2396cdea68ce5d11e21b84fe22fb957.gif\"\/><\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u041a\u043e\u0434 \u043f\u0440\u0438\u043c\u0435\u0440\u0430:<\/b><\/p>\n<div class=\"spoiler_text\">HTML:<\/p>\n<pre><code class=\"html\">&lt;div id='gif'&gt;&lt;\/div&gt; <\/code><\/pre>\n<p>  CSS:<\/p>\n<pre><code class=\"css\">body { background:black; overflow:hidden; } #gif {   background:black;   padding:10px;   height:80px;   width:80px;   border-radius:50%;   position:absolute;   top:calc(50% - 40px);   left:calc(50% - 40px);   box-shadow:     178px 0 0 -25px black,     178px 0 0 -20px white,     -178px 0 0 -25px black,     -178px 0 0 -20px white,      0 0 0 20px black,     0 0 0 30px white,     0 0 0 130px black,     0 0 0 135px white;   -webkit-animation: rotate 3s linear infinite;   animation: rotate 3s linear infinite; } #gif:before {   content: &quot; &quot;;   position: absolute;   height:50px;   width:50px;   border-radius:50%;   top: -155px;   left: 20px;   background:black;   border: 5px solid white;   box-shadow:     0 355px 0 -5px black,     0 355px 0 0px white;   -webkit-animation: reverseRotate 3s linear infinite;   animation: reverseRotate 3s linear infinite; } #gif:after {   \/* Segmented circle code goes here *\/   content: &quot; &quot;;   position: absolute;   height:280px;   width:280px;   left:-90px;   top:-90px;   background-image: url(&quot;data:image\/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSAiaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMCAwIDEwMCAxMDAiID4NCiAgICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgc3Ryb2tlLWRhc2hhcnJheT0iMC45NTIiIHN0cm9rZS13aWR0aD0iOCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIvPg0KPC9zdmc+&quot;);   background-repeat: no-repeat;   z-index:2;   -webkit-animation: segmentRotate 300s linear infinite;   animation: segmentRotate 300s linear infinite; } @keyframes rotate {   0%   { transform: rotate(  0deg); }     10%, 15%, 35%, 40%, 60%, 65%, 85%, 90%  {      background: black;      box-shadow:       178px 0 0 -25px black,       178px 0 0 -20px white,       -178px 0 0 -25px black,       -178px 0 0 -20px white,        0 0 0 20px black,       0 0 0 30px white,       0 0 0 130px black,       0 0 0 135px white;   }   12.5%, 37.5%, 62.5%, 87.5% {      background: white;      box-shadow:       178px 0 0 -25px white,       178px 0 0 -20px white,       -178px 0 0 -25px white,       -178px 0 0 -20px white,        0 0 0 20px black,       0 0 0 30px white,       0 0 0 130px black,       0 0 0 135px white;   }       100% { transform: rotate(360deg); } } @keyframes reverseRotate {   0%   { transform: translateY(178px) rotate(0deg) translateY(-178px) rotate(0deg); }     10%, 15%, 35%, 40%, 60%, 65%, 85%, 90%  {      background: black; box-shadow: 0 355px 0 -5px black, 0 355px 0 0px white;    }   12.5%, 37.5%, 62.5%, 87.5% {      background: white; box-shadow: 0 355px 0 -5px white, 0 355px 0 0px white;    }       100% { transform: translateY(178px) rotate(-720deg) translateY(-178px) rotate(0deg); } } @keyframes segmentRotate {   0%   { transform: rotate(0deg); }   100% { transform: rotate(-32000deg); } }   @-webkit-keyframes rotate {   0%   { -webkit-transform: rotate(  0deg); }     10%, 15%, 35%, 40%, 60%, 65%, 85%, 90%  {      background: black;      box-shadow:       178px 0 0 -25px black,       178px 0 0 -20px white,       -178px 0 0 -25px black,       -178px 0 0 -20px white,        0 0 0 20px black,       0 0 0 30px white,       0 0 0 130px black,       0 0 0 135px white;   }   12.5%, 37.5%, 62.5%, 87.5% {      background: white;      box-shadow:       178px 0 0 -25px white,       178px 0 0 -20px white,       -178px 0 0 -25px white,       -178px 0 0 -20px white,        0 0 0 20px black,       0 0 0 30px white,       0 0 0 130px black,       0 0 0 135px white;   }       100% { -webkit-transform: rotate(360deg); } } @-webkit-keyframes reverseRotate {   0%   { -webkit-transform: translateY(178px) rotate(0deg) translateY(-178px) rotate(0deg); }     10%, 15%, 35%, 40%, 60%, 65%, 85%, 90%  {      background: black; box-shadow: 0 355px 0 -5px black, 0 355px 0 0px white;    }   12.5%, 37.5%, 62.5%, 87.5% {      background: white; box-shadow: 0 355px 0 -5px white, 0 355px 0 0px white;    }       100% { -webkit-transform: translateY(178px) rotate(-720deg) translateY(-178px) rotate(0deg); } } @-webkit-keyframes segmentRotate {   0%   { -webkit-transform: rotate(0deg); }   100% { -webkit-transform: rotate(-32000deg); } } <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  <a href=\"http:\/\/codepen.io\/Zeaklous\/pen\/akxqt\">\u0414\u0435\u043c\u043e \u043d\u0430 Codepen<\/a><\/p>\n<p>  \u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u0441\u0435 \u043a\u043e\u043d\u0446\u0435\u043d\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u0438 \u0432\u043e\u043a\u0440\u0443\u0433 \u0446\u0435\u043d\u0442\u0440\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043c\u0438\u0433\u0430\u044e\u0449\u0435\u0433\u043e \u043a\u0440\u0443\u0433\u0430, \u0442\u0430\u043a \u0436\u0435 \u043a\u0430\u043a \u0438 \u0434\u0432\u0430 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 \u043a\u0440\u0443\u0436\u043a\u0430 \u043d\u0430 \u0432\u043d\u0435\u0448\u043d\u0435\u043c \u043a\u043e\u043b\u044c\u0446\u0435 \u0441\u0434\u0435\u043b\u0430\u043d\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>box-shadow<\/code>. \u0414\u0440\u0443\u0433\u0438\u0435 \u0434\u0432\u0430 \u043a\u0440\u0443\u0436\u043a\u0430 \u2014 \u044d\u0442\u043e \u0442\u0435\u043d\u0438 \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0430 \u043a\u043e\u043b\u044c\u0446\u043e \u0438\u0437 \u0448\u0442\u0440\u0438\u0445\u043e\u0432 \u2014 \u044d\u0442\u043e \u0444\u043e\u043d \u0435\u0449\u0451 \u043e\u0434\u043d\u043e\u0433\u043e \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0439 \u0432 \u0432\u0438\u0434\u0435 inline SVG.<\/p>\n<h4>\u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043e\u0432\u0435\u0442\u043e\u0432 \u043d\u0430\u043f\u043e\u0441\u043b\u0435\u0434\u043e\u043a<\/h4>\n<p>  <\/p>\n<h5>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0432\u0435\u0437\u0434\u0435, \u0433\u0434\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043c\u043e\u0436\u043d\u043e<\/h5>\n<p>  \u041a\u0430\u043a <a href=\"http:\/\/www.paulirish.com\/2012\/why-moving-elements-with-translate-is-better-than-posabs-topleft\/\">\u043f\u043e\u043a\u0430\u0437\u0430\u043b \u041f\u043e\u043b \u0410\u0439\u0440\u0438\u0448<\/a> \u0438 <a href=\"http:\/\/css-tricks.com\/tale-of-animation-performance\/\">\u0434\u0440\u0443\u0433\u0438\u0435<\/a>, \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0431\u044b\u0441\u0442\u0440\u0435\u0435, \u0447\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0438 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0432\u043e\u0439\u0441\u0442 <code>top<\/code>, <code>left<\/code>, <code>width<\/code> \u0438 <code>height<\/code>. <\/p>\n<p>  \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0439 \u043b\u0435\u0433\u0447\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d, \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044f \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u043b\u044f <code>scale<\/code> (<a href=\"http:\/\/codepen.io\/amos\/pen\/Bypur\">\u043f\u0440\u0438\u043c\u0435\u0440<\/a>).<\/p>\n<p>  \u041e\u0442\u043a\u0430\u0437 \u043e\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0439 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044e \u043e\u0448\u0438\u0431\u043e\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u0440\u0443\u0434\u043d\u043e \u043e\u0442\u043b\u043e\u0432\u0438\u0442\u044c. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <a href=\"http:\/\/jsfiddle.net\/cL5bW\/\">\u0432\u043e\u0442 \u044d\u0442\u0430<\/a> \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 Chrome \u0441 \u043d\u0435\u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u044b\u043c\u0438 \u0446\u0432\u0435\u0442\u0430\u043c\u0438, \u0445\u043e\u0442\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432 \u043a\u043e\u0434\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0435. \u041f\u043e\u0441\u043b\u0435 <a href=\"http:\/\/jsfiddle.net\/qA4V9\/\">\u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430<\/a> \u043d\u0430 CSS-\u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0440\u0435\u0448\u0438\u043b\u0430\u0441\u044c \u0441\u0430\u043c\u0430 \u0441\u043e\u0431\u043e\u0439. <\/p>\n<h5>z-index \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b<\/h5>\n<p>  \u041f\u043e\u0436\u0430\u043b\u0443\u0439, \u043d\u0430 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0441 <code>z-index<\/code> \u044f \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u043b \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0447\u0435\u043c \u043d\u0430 \u043b\u044e\u0431\u044b\u0435 \u0434\u0440\u0443\u0433\u0438\u0435. \u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f <code>z-index<\/code> \u0440\u0430\u0437\u043d\u0438\u0442\u0441\u044f \u043e\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043a \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443. \u0413\u043b\u0430\u0432\u043d\u043e\u0435 \u0440\u0430\u0437\u043b\u0438\u0447\u0438\u0435 \u2014 Mozilla \u043d\u0435 \u0430\u043d\u0438\u043c\u0438\u0440\u0443\u0435\u0442 <code>z-index<\/code>, \u0438 \u0435\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0441\u043a\u0430\u0447\u043a\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u043e, \u0442\u043e\u0433\u0434\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 Webkit \u0443\u043c\u0435\u044e\u0442 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0435\u0433\u043e \u043f\u043b\u0430\u0432\u043d\u043e. <\/p>\n<p>  \u0422\u0430\u043a\u0436\u0435 \u0441\u0442\u043e\u0438\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043e\u043a\u0430\u0437\u0430\u043b\u0438\u0441\u044c \u0437\u0430 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c, \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0434\u043e\u043b\u0436\u0435\u043d \u0438\u043c\u0435\u0442\u044c \u043e\u0442\u0440\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 <code>z-index<\/code>, \u0430 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043e\u0431\u044f\u0437\u0430\u043d \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c\u0441\u044f \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u043d\u0430\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u043c\u0435\u0441\u0442\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0442\u043e \u0435\u0441\u0442\u044c \u043a \u043d\u0435\u043c\u0443 \u043d\u0435\u043b\u044c\u0437\u044f \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c <code>z-index<\/code> \u0438\u043b\u0438 \u043b\u044e\u0431\u044b\u0435 \u0434\u0440\u0443\u0433\u0438\u0435 \u043f\u0440\u0438\u0451\u043c\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b\u0440\u044b\u0432\u0430\u044e\u0442 \u0435\u0433\u043e \u0438\u0437 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435. <\/p>\n<p>  \u0418 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435. \u041b\u044e\u0431\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0437\u0430\u0434\u0430\u043d\u0430 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c, \u043e\u0442\u043b\u0438\u0447\u043d\u0430\u044f \u043e\u0442 \u00ab1\u00bb, \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u043d\u0430\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e\u0431 \u044d\u0442\u043e\u043c \u2014 \u0432 <a href=\"http:\/\/habrahabr.ru\/post\/166435\/\">\u0441\u0442\u0430\u0442\u044c\u0435 \u0424\u0438\u043b\u0438\u043f\u0430 \u0423\u043e\u043b\u0442\u043e\u043d\u0430<\/a>.<\/p>\n<h5>\u0418\u0449\u0438\u0442\u0435 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438 \u0432\u0434\u043e\u0445\u043d\u043e\u0432\u0435\u043d\u0438\u044f<\/h5>\n<p>  \u0427\u0442\u043e-\u0442\u043e \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u043c\u0438\u0440\u0435, \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0430\u044f \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430, \u043d\u0435\u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u0432\u0438\u0434\u0435\u043e\u044d\u0444\u0444\u0435\u043a\u0442, \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 gif \u0438\u043b\u0438 \u0447\u0442\u043e \u0443\u0433\u043e\u0434\u043d\u043e \u0435\u0449\u0451 \u2014 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u0438\u0449\u0438\u0442\u0435 \u0432\u0435\u0449\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0442\u043e\u0438\u0442 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c. <\/p>\n<p>  \u042f \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043b, \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u043d\u0435 \u043f\u043e\u0434\u0433\u043b\u044f\u0434\u044b\u0432\u0430\u0442\u044c \u0441\u0440\u0430\u0437\u0443, \u043a\u0430\u043a \u0438\u043c\u0435\u043d\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u043d \u0442\u043e\u0442 \u0438\u043b\u0438 \u0438\u043d\u043e\u0439 \u044d\u0444\u0444\u0435\u043a\u0442, \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0438 \u0434\u0430\u0436\u0435 \u043f\u0440\u0435\u0432\u0437\u043e\u0439\u0442\u0438 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b. \u0414\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u044f \u0442\u0435\u0440\u043f\u043b\u044e \u043d\u0435\u0443\u0434\u0430\u0447\u0443, \u044f \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u043e \u043a\u0440\u0430\u0439\u043d\u0435\u0439 \u043c\u0435\u0440\u0435 \u0443\u0437\u043d\u0430\u044e \u0447\u0442\u043e-\u0442\u043e \u043d\u043e\u0432\u043e\u0435 \u043e \u044f\u0437\u044b\u043a\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e. \u0427\u0430\u0441\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0442\u0430\u043a, \u0447\u0442\u043e \u0434\u0430\u0436\u0435 \u043d\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0437\u0430\u0434\u0443\u043c\u043a\u0430 \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u043d\u043e\u0439. \u0418\u043d\u043e\u0433\u0434\u0430 \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442 \u2014 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u043b\u0443\u0447\u0448\u0435, \u0447\u0435\u043c \u044f \u043c\u043e\u0433 \u043c\u0435\u0447\u0442\u0430\u0442\u044c.<\/p>\n<p>  \u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u0447\u0442\u043e \u044d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0438 \u0432\u0430\u043c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u043d\u043e\u0432\u043e\u0435 \u0438 \u043f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u043e\u0435, \u0434\u0430\u0436\u0435 \u043c\u043d\u043e\u0433\u0438\u0435 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0435 \u0442\u0435\u0445\u043d\u0438\u043a\u0438, \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 \u0432 \u043d\u0435\u0439, \u0432\u0430\u043c \u0443\u0436\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u044b. <\/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\/company\/nordavind\/blog\/209462\/\"> http:\/\/habrahabr.ru\/company\/nordavind\/blog\/209462\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div class=\"content html_format\">       \u041f\u0440\u0438\u043c\u0435\u043d\u044f\u044f CSS-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432 \u043f\u043e\u0432\u0441\u0435\u0434\u043d\u0435\u0432\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u0435, \u044f \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e \u0432\u044b\u0440\u0430\u0431\u043e\u0442\u0430\u043b \u043f\u0440\u0438\u0432\u044b\u0447\u043a\u0443 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441 \u043d\u0438\u043c\u0438 \u0432 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f. \u041f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u043f\u044b\u0442\u0430\u044f\u0441\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u0443\u044e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0443\u044e \u0437\u0430\u0434\u0443\u043c\u043a\u0443 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u043c\u0435\u043d\u044c\u0448\u0435\u0433\u043e \u0447\u0438\u0441\u043b\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 HTML, \u044f \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043b \u043d\u0435\u043c\u0430\u043b\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043d\u0435\u043e\u0447\u0435\u0432\u0438\u0434\u043d\u044b\u0435 \u0432\u0435\u0449\u0438. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0445\u043e\u0447\u0443 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0438\u0437 \u043d\u0438\u0445. <\/p>\n<h5>\u0411\u044b\u0441\u0442\u0440\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043f\u043e\u0441\u0440\u0435\u0434\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438<\/h5>\n<p>  \u041e\u0431\u044b\u0447\u043d\u043e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043b\u0430\u0432\u043d\u043e \u043c\u0435\u043d\u044f\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c. \u041e\u0434\u043d\u0430\u043a\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043c\u043e\u0433\u0443\u0442 \u0442\u0430\u043a\u0436\u0435 \u0431\u044b\u0442\u044c \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u044b\u043c\u0438. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u0434\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0434\u0432\u0430 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0445 \u043a\u0430\u0434\u0440\u0430 \u0441 \u043e\u0447\u0435\u043d\u044c \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u043c \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b\u043e\u043c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0432 0.001%:<\/p>\n<pre><code class=\"css\">@keyframes toggleOpacity {   50% { opacity: 1; } \/* Turn off *\/   50.001% { opacity: 0.4; }    \/* Keep off state for a short period *\/    52.999% { opacity: 0.4; } \/* Turn back on *\/   53% { opacity: 1; } } <\/code><\/pre>\n<p>  \u0412\u043e\u0442 \u043a\u0430\u043a \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u044d\u0442\u043e\u0442 \u043f\u0440\u0438\u0451\u043c \u0434\u043b\u044f \u0438\u043c\u0438\u0442\u0430\u0446\u0438\u0438 \u043c\u0438\u0433\u0430\u044e\u0449\u0435\u0439 \u043d\u0435\u043e\u043d\u043e\u0432\u043e\u0439 \u0432\u044b\u0432\u0435\u0441\u043a\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u0438 \u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>text-shadow<\/code>:<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/b87\/95c\/c37\/b8795cc37897ac88caeab94ffe6e80ba.gif\"\/>  <\/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-209462","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/209462","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=209462"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/209462\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=209462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=209462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=209462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}