{"id":279165,"date":"2016-04-27T11:40:03","date_gmt":"2016-04-27T07:40:02","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=279165"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=279165","title":{"rendered":"\u0411\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u0430\u044f \u043f\u043e\u0434\u0431\u043e\u0440\u043a\u0430 \u0438\u0437 40 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 CSS"},"content":{"rendered":"<p>       \u0412 \u043f\u043e\u0441\u0442\u0435 \u0441\u043e\u0431\u0440\u0430\u043d\u0430 \u043f\u043e\u0434\u0431\u043e\u0440\u043a\u0430 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 CSS, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0432 \u0440\u0430\u0431\u043e\u0442\u0435, \u0430 \u043a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e \u0438\u0437\u0431\u0430\u0432\u044f\u0442 \u043e\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u043f\u0440\u0438\u0431\u0435\u0433\u0430\u0442\u044c \u043a JavaScript. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u043d\u0435 \u0441\u0430\u043c\u044b\u0435 \u043d\u043e\u0432\u044b\u0435 \u0438 \u043d\u0435\u043e\u0431\u044b\u0447\u043d\u044b\u0435, \u043d\u043e \u043d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0435. <\/p>\n<h4><a href=\"https:\/\/css-tricks.com\/examples\/CSS3Clock\/\">1. \u0427\u0430\u0441\u044b CSS3 \u0441 jQuery<\/a><\/h4>\n<p>  \u042d\u0442\u0438 \u0447\u0430\u0441\u044b \u0441\u043e\u0437\u0434\u0430\u043d\u044b \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 CSS3 \u2013 rotate \u0438 \u0441 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 JQuery.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/5ea\/b92\/1bd\/5eab921bd90d423a81e730f652219f63.png\"\/><\/p>\n<p>  <a name=\"habracut\"><\/a><\/p>\n<h4><a href=\"http:\/\/paulrhayes.com\/experiments\/clock\/#clock\">2. \u0410\u043d\u0430\u043b\u043e\u0433\u043e\u0432\u044b\u0435 \u0447\u0430\u0441\u044b CSS<\/a><\/h4>\n<p>  \u0411\u043e\u043b\u0435\u0435 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0435, \u0430\u043d\u0430\u043b\u043e\u0433\u043e\u0432\u044b\u0435 \u0447\u0430\u0441\u044b. \u041e\u043d\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e webkit transition \u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 transform CSS. \u0410 \u0432\u043e\u0442 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0432\u0440\u0435\u043c\u044f \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u043b\u043e \u0442\u0435\u043a\u0443\u0449\u0435\u043c\u0443, \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f JavaScript.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/4df\/5de\/a01\/4df5dea012124046b4e8a416a8ae7ac6.png\"\/><\/p>\n<h4><a href=\"http:\/\/paulrhayes.com\/experiments\/cube-3d\/\">3. \u0412\u0440\u0430\u0449\u0430\u044e\u0449\u0438\u0439\u0441\u044f 3D-\u043a\u0443\u0431<\/a><\/h4>\n<p>  \u0412\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u043f\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u0430\u043c \u043a\u0443\u0431\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u043c\u0438 \u043a\u043b\u0430\u0432\u0438\u0448\u0430\u043c\u0438 \u00ab\u0432\u0432\u0435\u0440\u0445\u00bb, \u00ab\u0432\u043d\u0438\u0437\u00bb, \u00ab\u0432\u043b\u0435\u0432\u043e\u00bb \u0438 \u00ab\u0432\u043f\u0440\u0430\u0432\u043e\u00bb. \u0421\u0430\u043c\u0430 3D-\u0444\u0438\u0433\u0443\u0440\u0430 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0430 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c webkit-perspective, -webkit-transform \u0438 -webkit-transition.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/b86\/379\/632\/b8637963258946049b669800e3aba16a.png\"\/><\/p>\n<h4><a href=\"http:\/\/paulrhayes.com\/experiments\/cube\/multiCubes.html\">4. \u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u044b\u0434\u0432\u0438\u0433\u0430\u044e\u0449\u0438\u0445\u0441\u044f 3D-\u043a\u0443\u0431\u043e\u0432<\/a><\/h4>\n<p>  \u0417\u0434\u0435\u0441\u044c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043e \u0443\u0436\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e 3D-\u043a\u0443\u0431\u043e\u0432, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0445 CSS3 \u0438 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 transform \u0438 transition. \u041d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u043d\u0430 \u043a\u0443\u0431 \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0435\u0433\u043e \u043e\u0442\u044a\u0435\u0445\u0430\u0442\u044c \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0443, \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u044f \u0442\u0435\u043a\u0441\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0444\u0438\u0433\u0443\u0440\u044b. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/dd5\/f5d\/93c\/dd5f5d93c336458ea52a95e13173dcd6.png\"\/><\/p>\n<h4><a href=\"http:\/\/paulrhayes.com\/experiments\/accordion\/#three\">5. Accordion \u043c\u0435\u043d\u044e<\/a><\/h4>\n<p>  \u042d\u0444\u0444\u0435\u043a\u0442 \u00ab\u043c\u0435\u043d\u044e-\u0433\u0430\u0440\u043c\u043e\u0448\u043a\u0438\u00bb \u043d\u0430 \u0447\u0438\u0441\u0442\u043e\u043c CSS, \u0433\u0434\u0435 \u043a\u043b\u0438\u043a \u043f\u043e \u043a\u0430\u0436\u0434\u043e\u0439 \u0438\u0437 \u0441\u0442\u0440\u043e\u043a \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u043e\u043a\u043d\u043e \u0432 \u0442\u0435\u043b\u0435 \u0441\u0430\u043c\u043e\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430. \u0421\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0430\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u043d\u0430 \u0431\u0430\u0437\u0435 WebKit. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/f6c\/0a8\/839\/f6c0a883996546919864d185762860f0.png\"\/><\/p>\n<h4><a href=\"http:\/\/paulrhayes.com\/experiments\/parallax\/\">6. \u041f\u0430\u0440\u0430\u043b\u043b\u0430\u043a\u0441-\u0441\u043a\u0440\u043e\u043b\u043b\u0438\u043d\u0433 \u043d\u0430 CSS<\/a><\/h4>\n<p>  \u042d\u0442\u043e \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043f\u0430\u0440\u0430\u043b\u043b\u0430\u043a\u0441-\u0441\u043a\u0440\u043e\u043b\u043b\u0438\u043d\u0433 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c CSS \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u0432 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 WebKit. \u041f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043d\u0430 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0435 \u043e\u043a\u043d\u043e, \u0437\u0432\u0435\u0437\u0434\u044b \u043d\u0430 \u0444\u043e\u043d\u0435 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442 \u043f\u043b\u0430\u0432\u043d\u043e \u0434\u0432\u0438\u0433\u0430\u0442\u044c\u0441\u044f \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0443. \u0421\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u044d\u0444\u0444\u0435\u043a\u0442 \u043f\u043e\u043b\u0435\u0442\u0430. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/064\/dac\/df6\/064dacdf6ec34d6f8aeccb8c9dde41c2.png\"\/><\/p>\n<h4><a href=\"http:\/\/www.girliemac.com\/blog\/2009\/05\/03\/matrix-animation-with-webkit-css3\/\">7. \u041c\u0430\u0442\u0440\u0438\u0446\u0430<\/a><\/h4>\n<p>  \u041a\u0443\u043b\u044c\u0442\u043e\u0432\u044b\u0439 \u0444\u0438\u043b\u044c\u043c \u00ab\u041c\u0430\u0442\u0440\u0438\u0446\u0430\u00bb \u2014 \u043e\u0434\u043d\u0430 \u0438\u0437 \u043b\u0443\u0447\u0448\u0438\u0445 \u0444\u0430\u043d\u0442\u0430\u0441\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043a\u0438\u043d\u043e\u043a\u0430\u0440\u0442\u0438\u043d. \u041d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e, \u043a\u0430\u043a \u0432\u043e\u0441\u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a\u0443\u044e \u0436\u0435 \u0443\u0434\u0438\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e (\u0447\u0435\u0440\u043d\u044b\u0439 \u044d\u043a\u0440\u0430\u043d \u0441 \u0431\u0435\u0433\u0443\u0449\u0438\u043c\u0438 \u0446\u0438\u0444\u0440\u0430\u043c\u0438) \u0432 CSS3.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/81c\/d7d\/e66\/81cd7de66ef64e89a9d728ea2edb95cd.jpg\"\/><\/p>\n<h4><a href=\"https:\/\/24ways.org\/2009\/going-nuts-with-css-transitions\">8. \u0414\u0438\u043d\u0430\u043c\u0438\u0447\u043d\u044b\u0435 \u041f\u0430\u043b\u0430\u0440\u043e\u0438\u0434\u044b<\/a><\/h4>\n<p>  \u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043f\u0440\u043e\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u0439, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u043d\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u0430\u0445 CSS3. \u041f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435, \u043e\u043d\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0438 \u0432\u044b\u0434\u0432\u0438\u0433\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043f\u0435\u0440\u0435\u0434\u043d\u0438\u0439 \u043f\u043b\u0430\u043d.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/d4e\/b7b\/fbd\/d4eb7bfbd26c42e7ad60cb09c3177ef5.png\"\/><\/p>\n<h4><a href=\"http:\/\/zurb.com\/playground\/css3-polaroids\">9. \u041c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439<\/a><\/h4>\n<p>  \u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438. \u041d\u0435\u0437\u0430\u043c\u044b\u0441\u043b\u043e\u0432\u0430\u0442\u044b\u0439, \u043d\u043e \u043f\u043e\u0440\u043e\u0439 \u0432\u0435\u0441\u044c\u043c\u0430 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0439 \u044d\u0444\u0444\u0435\u043a\u0442.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/cb5\/273\/b5f\/cb5273b5f9fd4e1faeee6d6757896c44.png\"\/><\/p>\n<h4><a href=\"http:\/\/www.webdeveloperjuice.com\/2010\/01\/18\/7-javascript-effect-alternatives-using-css3-for-webkit-browsers\/\">10. \u042d\u0444\u0444\u0435\u043a\u0442\u044b JavaScript \u043d\u0430 CSS3<\/a><\/h4>\n<p>  \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u044b JavaScript, \u0432 \u043f\u043e\u0441\u0442\u0435 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u043e \u0441\u0435\u043c\u044c \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u043d\u0430 CSS3: \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0431\u043b\u043e\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0440\u0430\u0449\u0430\u044e\u0442\u0441\u044f, \u0438\u0441\u0447\u0435\u0437\u0430\u044e\u0442, \u0432\u044b\u0435\u0437\u0436\u0430\u044e\u0442, \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0438 \u0442.\u0434.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/91f\/73c\/d64\/91f73cd6467145ca90a087d6df74bceb.png\"\/><\/p>\n<h4><a href=\"http:\/\/www.marcofolio.net\/webdesign\/jquery_dj_hero_css3_and_jquery_fun.html\">11. \u0412\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u043b\u0430\u0441\u0442\u0438\u043d\u043a\u0438 DJ Hero<\/a><\/h4>\n<p>  \u0412 \u043f\u043e\u0441\u0442\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u0440\u0443\u0442\u044f\u0449\u0438\u0435\u0441\u044f \u043f\u043b\u0430\u0441\u0442\u0438\u043d\u043a\u0438. \u0421\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0433\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u044f\u043c\u043e \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/437\/0db\/7b7\/4370db7b78744dcc9ff8daae763f54cd.png\"\/><\/p>\n<h4><a href=\"http:\/\/zurb.com\/playground\/sliding-vinyl\">12. \u0421\u043a\u043e\u043b\u044c\u0437\u044f\u0449\u0438\u0439 \u0432\u0438\u043d\u0438\u043b<\/a><\/h4>\n<p>  \u042d\u0444\u0444\u0435\u043a\u0442 \u0441\u043a\u043e\u043b\u044c\u0436\u0435\u043d\u0438\u044f \u0432\u0438\u043d\u0438\u043b\u043e\u0432\u044b\u0445 \u043f\u043b\u0430\u0441\u0442\u0438\u043d\u043e\u043a \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u0432 CSS3 \u0438 HTML. \u041f\u043e\u0434\u043e\u0431\u043d\u0430\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043e\u0436\u0438\u0432\u043b\u044f\u0435\u0442 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0439 \u043e\u0431\u043b\u043e\u0436\u043a\u0435 \u0430\u043b\u044c\u0431\u043e\u043c\u0430 \u0438 \u0442.\u0434.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/6c2\/2d3\/fc6\/6c22d3fc61c94a8b80c660a77558c458.png\"\/><\/p>\n<h4><a href=\"https:\/\/designshack.net\/?p=36895\">13. \u042d\u0444\u0444\u0435\u043a\u0442\u044b \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043d\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443<\/a><\/h4>\n<p>  \u041f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u043d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435, \u043e\u043d\u043e \u043c\u043e\u0436\u0435\u0442 \u0441\u043c\u0435\u0441\u0442\u0438\u0442\u044c\u0441\u044f \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0443, \u0437\u0430\u0432\u0435\u0440\u0442\u0435\u0442\u044c\u0441\u044f, \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c\u0441\u044f, \u0438\u0437 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043a\u0440\u0443\u0433\u043b\u043e\u0435, \u0441\u0442\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u044b\u0442\u044b\u043c\u2026 \u0421\u043b\u043e\u0432\u043e\u043c, \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0431\u0443\u0434\u0443\u0442 \u0432\u0441\u044f\u0447\u0435\u0441\u043a\u0438 \u043c\u0435\u043d\u044f\u0442\u044c \u0441\u0432\u043e\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/c49\/59d\/e7a\/c4959de7aac74e1b965f90eda0268c3b.png\"\/><\/p>\n<h4><a href=\"https:\/\/github.com\/fofr\/paulrhayes.com-experiments\/blob\/master\/pyramid\/css\/experiment.css\">14. \u0412\u0440\u0430\u0449\u0430\u044e\u0449\u0438\u0439\u0441\u044f \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a<\/a><\/h4>\n<p>  \u041f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a, \u043e\u043d \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0432\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/f8e\/824\/a61\/f8e824a6169e43f8acbfab3a2ce8b6ae.png\"\/><\/p>\n<h4><a href=\"http:\/\/media.24ways.org\/2009\/15\/space.html\">15. \u041a\u043e\u0441\u043c\u043e\u0441<\/a><\/h4>\n<p>  \u0426\u0435\u043b\u043e\u0435 \u043a\u043e\u0441\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e, \u0443\u043c\u0435\u0449\u0435\u043d\u043d\u043e\u0435 \u0432 CSS. \u0412\u044b\u0441\u0442\u0443\u043f\u0430\u0435\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u043c \u043d\u0430\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432\u0440\u0430\u0449\u0430\u044e\u0449\u0438\u0445\u0441\u044f \u0441\u043b\u043e\u0435\u0432 (\u0431\u043e\u043b\u0435\u0435 \u0437\u0430\u043c\u0435\u0442\u043d\u043e \u043f\u0440\u0438 \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435).<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/137\/987\/c23\/137987c2354045d19082af673030ccf5.png\"\/><\/p>\n<h4><a href=\"http:\/\/www.romancortes.com\/blog\/css-3d-meninas\/\">16. \u00ab\u041c\u0435\u043d\u0438\u043d\u044b\u00bb \u0432 3D<\/a><\/h4>\n<p>  \u0418\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0439 \u044d\u0444\u0444\u0435\u043a\u0442 CSS, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u0430\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u0430 \u0414\u0438\u0435\u0433\u043e \u0412\u0435\u043b\u0430\u0441\u043a\u0435\u0441\u0430 \u00ab\u041c\u0435\u043d\u0438\u043d\u044b\u00bb \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u0442\u0440\u0435\u0445\u043c\u0435\u0440\u043d\u043e\u0439. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/a9d\/75d\/0d1\/a9d75d0d18a54d32a1671669af4884ff.png\"\/><\/p>\n<h4><a href=\"http:\/\/zurb.com\/playground\/osx-dock\">17. CSS \u0434\u043b\u044f Mac OS \u0425<\/a><\/h4>\n<p>  \u0412 \u043d\u0438\u0436\u043d\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u044d\u043a\u0440\u0430\u043d\u0430 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u043d\u0430\u0431\u043e\u0440 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0438\u043a\u043e\u043d\u043e\u043a Mac OS \u0425, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u044e\u0442\u0441\u044f. \u042d\u0444\u0444\u0435\u043a\u0442 \u043f\u0440\u0438\u0434\u0430\u0435\u0442 \u0434\u0438\u043d\u0430\u043c\u0438\u043a\u0438 \u0441\u0430\u0439\u0442\u0443.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/db7\/c9e\/314\/db7c9e314c3b46d69dbdd1cc88f6dca3.png\"\/><\/p>\n<h4><a href=\"http:\/\/zurb.com\/playground\/drop-in-modals\">18. Drop-In Modals<\/a><\/h4>\n<p>  CSS3 \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 Drop-In Modals \u043f\u043e\u043c\u043e\u0433\u0443\u0442 \u0432 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e, \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0438 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u044b\u0445 \u043e\u043a\u043e\u043d. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/a3b\/b08\/720\/a3bb087206974ddcbb702feca9894ea1.png\"\/><\/p>\n<h4><a href=\"http:\/\/www.the-art-of-web.com\/css\/css-animation\/\">19. \u0410\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432<\/a><\/h4>\n<p>  \u0422\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u041f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0440\u0430\u043a\u0435\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u00ab\u043b\u0435\u0442\u0438\u0442\u00bb \u0438\u0437 \u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0446\u0430 \u044d\u043a\u0440\u0430\u043d\u0430 \u0432 \u0434\u0440\u0443\u0433\u043e\u0439. \u041c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u044f, \u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u0438 \u0442.\u0434. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/fde\/b8e\/a10\/fdeb8ea100e0444ca3ea945d47a1d62c.png\"\/><\/p>\n<h4><a href=\"http:\/\/tutorialzine.com\/2009\/12\/colorful-clock-jquery-css\/\">20. \u0426\u0432\u0435\u0442\u043d\u044b\u0435 \u0447\u0430\u0441\u044b<\/a><\/h4>\n<p>  \u0426\u0432\u0435\u0442\u043d\u044b\u0435 \u0447\u0430\u0441\u044b \u0441\u043e\u0437\u0434\u0430\u043d\u044b \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 jQuery \u0438 CSS3. \u041f\u043e\u0434\u043e\u0431\u043d\u044b\u0439 \u044d\u0444\u0444\u0435\u043a\u0442 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043a\u0441\u0442\u0430\u0442\u0438 \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u044f \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u043a\u0430\u043a\u043e\u0433\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u043a\u043e\u043d\u043a\u0443\u0440\u0441\u0430, \u0433\u043e\u043b\u043e\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0442\u043e\u043c\u0443 \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0433\u043e. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/a44\/948\/fc3\/a44948fc334d4caea1b75d2eec088e15.png\"\/><\/p>\n<h4><a href=\"http:\/\/tutorialzine.com\/2009\/11\/hovering-gallery-css3-jquery\/\">21. \u0413\u0435\u043b\u0435\u0440\u0435\u044f Lightbox \u043d\u0430 jQuery \u0438 CSS3<\/a><\/h4>\n<p>  \u042d\u0442\u043e \u0437\u0430\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0433\u0430\u043b\u0435\u0440\u0435\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0440\u0430\u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u0432\u044b\u0431\u043e\u0440\u043e\u0447\u043d\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435. \u0414\u043b\u044f \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0433\u0430\u043b\u0435\u0440\u0435\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 JQuery, JQuery UI \u0438 JQuery \u043f\u043b\u0430\u0433\u0438\u043d FancyBox. Lightbox \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a, \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u0443\u0435\u0442 \u0438\u0445 \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u044b\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442 \u0441\u043b\u0430\u0439\u0434\u044b \u0432 \u0440\u044f\u0434.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/4df\/96a\/fe1\/4df96afe189040429da9f8ad04e97365.png\"\/><\/p>\n<h4><a href=\"http:\/\/buildinternet.com\/2009\/09\/sproing-make-an-elastic-thumbnail-menu\/\">22. \u00ab\u042d\u043b\u0430\u0441\u0442\u0438\u0447\u043d\u044b\u0435\u00bb \u043f\u0440\u0435\u0432\u044c\u044e<\/a><\/h4>\n<p>  \u0423\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0435 \u043f\u0440\u0435\u0432\u044c\u044e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043c\u0435\u043d\u044e \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/716\/517\/bf1\/716517bf1c3a46199b481dc6ef0aaa25.png\"\/><\/p>\n<h4><a href=\"http:\/\/designlovr.com\/use-css3-to-create-a-dynamic-stack-of-index-cards\/\">23. \u0414\u0438\u043d\u0430\u043c\u0438\u0447\u043d\u044b\u0435 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438<\/a><\/h4>\n<p>  \u042d\u0442\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043d\u0430\u0431\u043e\u0440 \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u0439 HTML \u0438 CSS3.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/1e2\/e09\/3ae\/1e2e093ae1114819a9f6bfb1b26914f1.png\"\/><\/p>\n<h4><a href=\"http:\/\/demo.marcofolio.net\/slick_jquery_css3_menu\/default.html\">24. \u0412\u044b\u0434\u0432\u0438\u0436\u043d\u043e\u0435 JQuery \u043c\u0435\u043d\u044e<\/a><\/h4>\n<p>  \u0412\u044b\u0434\u0432\u0438\u0436\u043d\u043e\u0435 \u043c\u0435\u043d\u044e \u0438\u0437 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u043e \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0446\u0438\u0435\u0439 CSS3 \u0438 JQuery. \u041f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043d\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0435 \u043e\u043a\u043d\u043e \u0441 \u0442\u0435\u043a\u0441\u0442\u043e\u043c. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/ef5\/87b\/a4e\/ef587ba4e05e44b1b8c10659b9274127.png\"\/><\/p>\n<h4><a href=\"http:\/\/kamikazemusic.com\/quick-tips\/css3-hover-tabs-without-javascript\/\">25. \u0422\u0430\u0431\u043b\u0438\u0446\u044b CSS<\/a><\/h4>\n<p>  \u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u043c\u044b\u0448\u0438 \u043d\u0430 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u043e\u043f\u0440\u043e\u0432\u043e\u0436\u0434\u0430\u0435\u0442\u0441\u044f \u0441\u043c\u0435\u043d\u043e\u0439 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u0433\u043e \u043d\u0438\u0436\u0435 \u0441\u043f\u0438\u0441\u043a\u0430. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/67f\/6ed\/4b7\/67f6ed4b73e34f6fbc596f9c06be42ac.png\"\/><\/p>\n<h4><a href=\"http:\/\/www.newmediacampaigns.com\/blog\/nicer-navigation-with-css-transitions\">26. Fisheye \u043c\u0435\u043d\u044e<\/a><\/h4>\n<p>  \u041d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043e, \u043a\u0430\u043a \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 CSS \u0438 SVG \u0441\u043e\u0437\u0434\u0430\u0442\u044c Fisheye \u043c\u0435\u043d\u044e. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0431\u043e\u043d\u0443\u0441\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u0435\u043c\u043e-SVG \u0432 \u0442\u044d\u0433\u0435 IMG.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/f20\/c90\/d7c\/f20c90d7c9b84d8099680fd5660053d4.png\"\/><\/p>\n<h4><a href=\"http:\/\/www.newmediacampaigns.com\/blog\/nicer-navigation-with-css-transitions\">27. \u0412\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0435\u0435 \u043c\u0435\u043d\u044e<\/a><\/h4>\n<p>  \u0422\u0430\u043a\u043e\u0439 \u0442\u0438\u043f \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u043e\u0447\u0435\u043d\u044c \u0443\u0434\u043e\u0431\u043d\u0443\u044e \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044e \u043f\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c\u0443 \u043c\u0435\u043d\u044e, \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u0432 CSS3. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/bd6\/a1a\/1a9\/bd6a1a1a9416471eb0c47d3a5d20d534.png\"\/><\/p>\n<h4><a href=\"http:\/\/jonathanmoore.com\/post\/345151793\/star-wars-episode-iv-opening-crawl-html-css\">28. \u0422\u0438\u0442\u0440\u044b \u0438\u0437 \u00ab\u0417\u0432\u0435\u0437\u0434\u043d\u044b\u0445 \u0432\u043e\u0439\u043d\u00bb<\/a><\/h4>\n<p>  \u0417\u043d\u0430\u043c\u0435\u043d\u0438\u0442\u044b\u0435 \u0442\u0438\u0442\u0440\u044b \u0438\u0437 \u00ab\u0417\u0432\u0435\u0437\u0434\u043d\u044b\u0445 \u0432\u043e\u0439\u043d\u00bb. \u0414\u043b\u044f \u0438\u0445 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e HTML \u0438 CSS.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/64e\/074\/91c\/64e07491cc61448abea91351b93c7c0c.png\"\/><\/p>\n<h4><a href=\"http:\/\/www.niquelao.net\/wp-content\/uploads\/2009\/12\/example1.html\">29. \u0415\u0449\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b Fisheye \u043d\u0430 CSS<\/a><\/h4>\n<p>  \u041e\u043f\u044f\u0442\u044c \u0442\u0430\u043a\u0438, \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u044e\u0449\u0438\u0435\u0441\u044f \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u0437\u043d\u0430\u0447\u043a\u0438.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/6cd\/fb0\/2ab\/6cdfb02abb324a9794d7bd7c75f450c0.png\"\/><\/p>\n<h4><a href=\"http:\/\/www.cssplay.co.uk\/menu\/css3-animation.html\">30. \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043f\u043e \u0442\u0438\u043f\u0443 \u00ab\u043a\u0430\u0434\u0440 \u0437\u0430 \u043a\u0430\u0434\u0440\u043e\u043c\u00bb<\/a><\/h4>\n<p>  \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u044b \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0438. <br \/>  \u0412 \u043f\u0435\u0440\u0432\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0434\u043b\u044f \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u044f \u0441\u043c\u0435\u043d\u044b \u043a\u0430\u0434\u0440\u043e\u0432 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043a\u043b\u0438\u043a\u0430\u0442\u044c \u043d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435. \u041a\u0430\u0436\u0434\u044b\u0439 \u043a\u043b\u0438\u043a \u2014 \u043e\u0434\u043d\u043e \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435. \u041a\u0430\u0434\u0440\u044b \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0442\u0441\u044f, \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u0430\u044f \u0437\u0430\u0446\u0438\u043a\u043b\u0435\u043d\u043d\u043e\u0441\u0442\u044c.<br \/>  \u0412\u043e \u0432\u0442\u043e\u0440\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0434\u043b\u044f \u0441\u043c\u0435\u043d\u044b \u043a\u0430\u0434\u0440\u043e\u0432 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0441\u0442\u0438 \u043a\u0443\u0440\u0441\u043e\u0440\u043e\u043c \u043f\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044e. \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0438 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0432\u0438\u0441\u0435\u0442\u044c \u043e\u0442 \u0431\u044b\u0441\u0442\u0440\u043e\u0442\u044b \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u043c\u044b\u0448\u0438. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/60b\/33b\/fa9\/60b33bfa98cf418a8043e8886c0a53df.png\"\/><\/p>\n<h4><a href=\"http:\/\/anthonycalzadilla.com\/css3-ATAT\/index-bones.html\">31. \u0418\u043c\u043f\u0435\u0440\u0441\u043a\u0438\u0439 \u0448\u0430\u0433\u043e\u0445\u043e\u0434 AT-AT<\/a><\/h4>\n<p>  \u0418 \u0441\u043d\u043e\u0432\u0430 \u00ab\u0417\u0432\u0435\u0437\u0434\u043d\u044b\u0435 \u0432\u043e\u0439\u043d\u044b\u00bb \u2014 \u044d\u0442\u043e\u0442 \u0434\u0432\u0438\u0436\u0443\u0449\u0438\u0439\u0441\u044f \u0448\u0430\u0433\u043e\u0445\u043e\u0434 AT-AT \u0441\u0434\u0435\u043b\u0430\u043d \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS3.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/4c6\/071\/32f\/4c607132f7f0498a8d66d30d857f6b9e.png\"\/><\/p>\n<h4><a href=\"http:\/\/www.thecssninja.com\/demo\/css_accordion\/#Section2\">32. \u0415\u0449\u0435 \u043e\u0434\u043d\u0430 \u00ab\u0433\u0430\u0440\u043c\u043e\u0448\u043a\u0430\u00bb CSS<\/a><\/h4>\n<p>  \u041f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043d\u0430 \u0441\u0442\u0440\u043e\u043a\u0443, \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0440\u0430\u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u0442\u0441\u044f.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/222\/102\/c44\/222102c444c647489e44840d8df7b7a0.png\"\/><\/p>\n<h4><a href=\"http:\/\/cssdeck.com\/labs\/a6ywkn1b\">33. \u041f\u0440\u043e\u0441\u0442\u043e\u0435 \u0432\u044b\u0434\u0432\u0438\u0436\u043d\u043e\u0435 \u043c\u0435\u043d\u044e<\/a><\/h4>\n<p>  \u041f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u0441\u0435\u043a\u0446\u0438\u0438 \u043c\u0435\u043d\u044f\u044e\u0442 \u0446\u0432\u0435\u0442 \u0438 \u0432\u044b\u0434\u0432\u0438\u0433\u0430\u044e\u0442\u0441\u044f.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/2da\/951\/bdb\/2da951bdb14d4b108c4d6cf7f9b7399c.jpg\"\/><\/p>\n<h4><a href=\"http:\/\/www.minimamente.com\/example\/magic_animations\/\">34. \u041c\u0430\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0432 CSS<\/a><\/h4>\n<p>  \u041f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u043f\u043e\u0434\u0431\u043e\u0440\u043a\u0430 \u0440\u0430\u0437\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u044b\u0445 \u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0439 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432. \u0414\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043a\u043b\u0438\u043a\u043d\u0443\u0442\u044c \u043f\u043e \u043a\u043b\u0430\u0432\u0438\u0448\u0430\u043c \u00abmagic\u00bb, \u00abswap\u00bb \u0438 \u0442.\u0434. \u0434\u043b\u044f \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0430.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/8bd\/bda\/d8b\/8bdbdad8baf7443cb2e050ba00cf220a.png\"\/><\/p>\n<h4><a href=\"http:\/\/development.tobypitman.com\/css\/menu.html\">35. \u041c\u0435\u043d\u044e \u0438\u0437 \u0437\u0430\u043a\u043b\u0430\u0434\u043e\u043a<\/a><\/h4>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/805\/84e\/74a\/80584e74a85d4285a812b9b401d3bd8c.png\"\/><\/p>\n<h4><a href=\"http:\/\/cssdeck.com\/labs\/9xtajnxs\">36. \u041f\u0440\u043e\u0433\u0440\u0435\u0441\u0441 \u0431\u0430\u0440<\/a><\/h4>\n<p>  \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0439 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441 \u0431\u0430\u0440 \u043d\u0430 CSS.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/52e\/320\/ca7\/52e320ca73e84ecf82b16da4869b7366.png\"\/><\/p>\n<h4><a href=\"http:\/\/cssdeck.com\/labs\/circle-firework\">37. \u0421\u0430\u043b\u044e\u0442 CSS<\/a><\/h4>\n<p>  \u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e, \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0430\u043b\u044e\u0442 \u0438\u0437 \u043a\u0440\u0443\u0433\u043e\u0432 \u043d\u0430 JQuery \u0438 CSS.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/d67\/bdb\/781\/d67bdb7815d942048ff097b33d58b3b9.png\"\/><\/p>\n<h4><a href=\"http:\/\/cssdeck.com\/labs\/jquery-toggle\">38. \u0412\u043a\u043b\u044e\u0447\u0430\u0442\u0435\u043b\u044c\/\u0432\u044b\u043a\u043b\u044e\u0447\u0430\u0442\u0435\u043b\u044c<\/a><\/h4>\n<p>  \u041d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e, \u043a\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u043a\u043d\u043e\u043f\u043a\u0443 on\/off \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/9ed\/2f6\/e47\/9ed2f6e47b054ee682e96e39a6bdf9e3.png\"\/><\/p>\n<h4><a href=\"http:\/\/cssdeck.com\/labs\/ranbow-load\">39. \u0426\u0432\u0435\u0442\u043d\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430<\/a><\/h4>\n<p>  \u041f\u0440\u0438\u043c\u0435\u0440 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0439 \u0440\u0430\u0437\u043d\u043e\u0446\u0432\u0435\u0442\u043d\u043e\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043d\u0430 CSS.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/c47\/177\/fb5\/c47177fb5727447c9955fa89310abbaa.png\"\/><\/p>\n<p>  <a href=\"http:\/\/cssdeck.com\/labs\/another-simple-css3-dropdown-menu-materialized\">40. \u0412\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0435\u0435 \u043c\u0435\u043d\u044e<\/a><br \/>  \u0415\u0449\u0435 \u043e\u0434\u0438\u043d \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u0438 \u0441\u0438\u043c\u043f\u0430\u0442\u0438\u0447\u043d\u043e\u0433\u043e \u0432\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0435\u0433\u043e \u043c\u0435\u043d\u044e \u043d\u0430 CSS.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/6cf\/d1e\/5c5\/6cfd1e5c53bf4a25ab9076e4962ead53.png\"\/>               <\/p>\n<div class=\"clear\"><\/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=\"https:\/\/habrahabr.ru\/post\/282461\/\"> https:\/\/habrahabr.ru\/post\/282461\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>       \u0412 \u043f\u043e\u0441\u0442\u0435 \u0441\u043e\u0431\u0440\u0430\u043d\u0430 \u043f\u043e\u0434\u0431\u043e\u0440\u043a\u0430 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 CSS, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0432 \u0440\u0430\u0431\u043e\u0442\u0435, \u0430 \u043a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e \u0438\u0437\u0431\u0430\u0432\u044f\u0442 \u043e\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u043f\u0440\u0438\u0431\u0435\u0433\u0430\u0442\u044c \u043a JavaScript. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u043d\u0435 \u0441\u0430\u043c\u044b\u0435 \u043d\u043e\u0432\u044b\u0435 \u0438 \u043d\u0435\u043e\u0431\u044b\u0447\u043d\u044b\u0435, \u043d\u043e \u043d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0435. <\/p>\n<h4><a href=\"https:\/\/css-tricks.com\/examples\/CSS3Clock\/\">1. \u0427\u0430\u0441\u044b CSS3 \u0441 jQuery<\/a><\/h4>\n<p>  \u042d\u0442\u0438 \u0447\u0430\u0441\u044b \u0441\u043e\u0437\u0434\u0430\u043d\u044b \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 CSS3 \u2013 rotate \u0438 \u0441 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 JQuery.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/5ea\/b92\/1bd\/5eab921bd90d423a81e730f652219f63.png\"\/><\/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-279165","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/279165","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=279165"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/279165\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=279165"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=279165"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=279165"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}