{"id":8122,"date":"2015-06-15T21:48:39","date_gmt":"2015-06-15T18:18:39","guid":{"rendered":"http:\/\/xn--mgbguh09aqiwi.com\/?p=8122"},"modified":"2016-07-19T23:54:50","modified_gmt":"2016-07-19T20:24:50","slug":"%d8%b3%d8%a7%d8%ae%d8%aa-%d8%a7%d8%b4%da%a9%d8%a7%d9%84-%d9%87%d9%86%d8%af%d8%b3%db%8c-%d9%85%d8%ae%d8%aa%d9%84%d9%81-%d8%a8%d8%a7-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d8%a7%d8%b2-css3","status":"publish","type":"post","link":"https:\/\/www.xn--mgbguh09aqiwi.com\/%d8%b3%d8%a7%d8%ae%d8%aa-%d8%a7%d8%b4%da%a9%d8%a7%d9%84-%d9%87%d9%86%d8%af%d8%b3%db%8c-%d9%85%d8%ae%d8%aa%d9%84%d9%81-%d8%a8%d8%a7-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d8%a7%d8%b2-css3.html","title":{"rendered":"\u0633\u0627\u062e\u062a \u0627\u0634\u06a9\u0627\u0644 \u0647\u0646\u062f\u0633\u06cc \u0645\u062e\u062a\u0644\u0641 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 css3"},"content":{"rendered":"

\u0642\u0637\u0639\u0627 \u0627\u06cc\u0646 \u06cc\u06a9 \u067e\u0633\u062a \u0641\u0648\u0642 \u0627\u0644\u0639\u0627\u062f\u0647 \u062c\u0627\u0644\u0628 \u0648 \u067e\u0631\u0628\u0627\u0632\u062f\u06cc\u062f \u0627\u0632 \u0646\u0638\u0631 \u0634\u0645\u0627 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0648\u0628 \u0633\u0627\u06cc\u062a \u062e\u0648\u0627\u0647\u062f \u0634\u062f .<\/p>\n

\u0627\u06af\u0631 \u0634\u0645\u0627 \u0647\u0645 \u0641\u06a9\u0631 \u0645\u06cc\u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0628\u0647 \u0648\u0633\u06cc\u0644\u0647 css \u0645\u06cc\u062a\u0648\u0627\u0646 \u0641\u0642\u0637 \u0686\u0646\u062f \u0634\u06a9\u0644 \u0627\u0632 \u062c\u0645\u0644\u0647 \u0645\u0631\u0628\u0639 , \u0645\u0633\u062a\u0637\u06cc\u0644 , \u062f\u0627\u06cc\u0631\u0647 \u0648 \u0628\u06cc\u0636\u06cc \u0631\u0627 \u0633\u0627\u062e\u062a , \u0633\u062e\u062a \u062f\u0631 \u0627\u0634\u062a\u0628\u0627\u0647\u06cc\u062f .<\/p>\n

\u062f\u0631 \u0627\u06cc\u0646 \u067e\u0633\u062a \u0627\u0632 \u0633\u0627\u06cc\u062a \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062f\u0627\u062a \u06a9\u0627\u0645<\/span> , \u0642\u0635\u062f \u062f\u0627\u0631\u0645 \u0622\u0645\u0648\u0632\u0634\u06cc \u0631\u0627 \u0642\u0631\u0627\u0631 \u062f\u0647\u0645 \u06a9\u0647 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062a\u0631\u0641\u0646\u062f \u0647\u0627\u06cc\u06cc \u062f\u0631 css3 , \u0627\u0634\u06a9\u0627\u0644 \u0628\u0633\u06cc\u0627\u0631 \u0632\u06cc\u0627\u062f\u062a\u0631\u06cc \u0631\u0627 \u062f\u0631 \u0635\u0641\u062d\u0627\u062a \u0648\u0628 \u0633\u0627\u06cc\u062a \u062e\u0648\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f .<\/p>\n

<\/p>\n

\"\u0633\u0627\u062e\u062a<\/a><\/p>\n

\u062f\u0627\u06cc\u0631\u0647 :<\/span><\/p>\n

#vms {\r\n    width: 140px;\r\n    height: 140px;\r\n    background: red;\r\n    border-radius: 70px;\r\n}\r\n<\/pre>\n

\u00a0\u0645\u0631\u0628\u0639\u00a0:\u00a0<\/span><\/p>\n

#vms {\r\n    width: 100px;\r\n    height: 100px; \r\n    background: red; \r\n}<\/pre>\n

\u0645\u0633\u062a\u0637\u06cc\u0644 :<\/span><\/p>\n

#vms {\r\n    width: 150px;\r\n    height: 75px; \r\n    background: red; \r\n}<\/pre>\n

\u0628\u06cc\u0636\u06cc\u00a0:<\/span><\/p>\n

#vms {\r\n    width: 200px;\r\n    height: 100px; \r\n    background: red;\r\n    border-radius: 100px \/ 50px;\r\n}\r\n<\/pre>\n

\u0645\u062b\u0644\u062b \u0631\u0648 \u0628\u0647 \u0628\u0627\u0644\u0627 :<\/span><\/p>\n

#vms {\r\n    width: 0;\r\n    height: 0;\r\n    border-bottom: 120px solid red;\r\n    border-left: 60px solid transparent;\r\n    border-right: 60px solid transparent; \r\n}<\/pre>\n

\u0645\u062b\u0644\u062b \u0631\u0648 \u0628\u0647 \u067e\u0627\u06cc\u06cc\u0646 :<\/span><\/p>\n

#vms { \r\n    width: 0;\r\n    height: 0;\r\n    border-top: 80px solid red;\r\n    border-left: 60px solid transparent;\r\n    border-right: 60px solid transparent;\r\n}<\/pre>\n

\u0645\u062b\u0644\u062b \u0631\u0648 \u0628\u0647 \u0686\u067e :<\/span><\/p>\n

#vms {\r\n    width: 0;\r\n    height: 0;\r\n    border-right: 100px solid red;\r\n    border-top: 50px solid transparent;\r\n    border-bottom: 50px solid transparent;\r\n}\r\n<\/pre>\n

\u0645\u062b\u0644\u062b \u0631\u0648 \u0628\u0647 \u0631\u0627\u0633\u062a :<\/span><\/p>\n

#vms {\r\n    width: 0;\r\n    height: 0;\r\n    border-left: 100px solid red;\r\n    border-top: 50px solid transparent;\r\n    border-bottom: 50px solid transparent;\r\n}<\/pre>\n

\u0686\u0647\u0627\u0631 \u0636\u0644\u0639\u06cc \u063a\u06cc\u0631 \u0645\u0646\u0638\u0645 :<\/span><\/p>\n

#vms {\r\n    height: 0; \r\n    width: 80px;\r\n    border-bottom: 80px solid red;\r\n    border-left: 40px solid transparent;\r\n    border-right: 40px solid transparent;\r\n}\r\n<\/pre>\n

\u00a0\u0627\u0644\u0645\u0627\u0633 :<\/span><\/p>\n

#vms{\r\n    width: 80px;\r\n    height: 80px;\r\n    background: red;\r\n    margin: 3px 0 0 30px;\r\n    \/* Rotate *\/\r\n    -webkit-transform: rotate(-45deg);\r\n    -moz-transform: rotate(-45deg);\r\n    -ms-transform: rotate(-45deg);\r\n    -o-transform: rotate(-45deg);\r\n    transform: rotate(-45deg);\r\n    \/* Rotate Origin *\/\r\n    -webkit-transform-origin: 0 100%;\r\n    -moz-transform-origin: 0 100%;\r\n    -ms-transform-origin: 0 100%;\r\n    -o-transform-origin: 0 100%;\r\n    transform-origin: 0 100%;\r\n}\r\n<\/pre>\n

\u0630\u0648\u0632\u0646\u0642\u0647 :<\/span><\/p>\n

#vms {\r\n    width: 130px; \r\n    height: 75px;\r\n    background: red;\r\n    \/* Skew *\/\r\n    -webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg);\r\n    transform: skew(20deg);\r\n}\r\n<\/pre>\n

\u062f\u0648\u0627\u0632\u062f\u0647 \u0646\u0642\u0637\u0647 \u0633\u062a\u0627\u0631\u0647\u00a0:<\/span><\/p>\n

#vms {\r\n    height: 100px;\r\n    width: 100px;\r\n    background: red;\r\n    position: absolute;\r\n}\r\n#vms:before {\r\n    height: 100px;\r\n    width: 100px;\r\n    background: red;\r\n    content:\"\";\r\n    position: absolute;\r\n    \/* Rotate *\/\r\n    -moz-transform: rotate(30deg);\r\n    -webkit-transform: rotate(30deg);\r\n    -ms-transform: rotate(30deg);\r\n    -o-transform: rotate(30deg);\r\n    transform: rotate(30deg);\r\n}\r\n#vms:after {\r\n    height: 100px;\r\n    width: 100px;\r\n    background: red;\r\n    content:\"\";\r\n    position: absolute;\r\n    \/* Rotate *\/\r\n    -moz-transform: rotate(-30deg);\r\n    -webkit-transform: rotate(-30deg);\r\n    -ms-transform: rotate(-30deg);\r\n    -o-transform: rotate(-30deg);\r\n    transform: rotate(-30deg);\r\n}<\/pre>\n

\u0634\u0634 \u0646\u0642\u0637\u0647 \u0633\u062a\u0627\u0631\u0647\u00a0:<\/span><\/p>\n

#vms {\r\n    position: absolute;\r\n    width: 0; \r\n    height: 0; \r\n    border-left: 50px solid transparent; \r\n    border-right: 50px solid transparent; \r\n    border-bottom: 80px solid red;\r\n}\r\n#vms:after {\r\n    content:\"\";\r\n    position: absolute;\r\n    width: 0; \r\n    height: 0; \r\n    border-left: 50px solid transparent;\r\n    border-right: 50px solid transparent; \r\n    border-top: 80px solid red;\r\n    margin: 30px 0 0 -50px;\r\n}<\/pre>\n

\u00a0\u0647\u0634\u062a \u0648\u062c\u0647\u06cc :<\/span><\/p>\n

#vms {\r\n    width: 100px; \r\n    height: 100px; \r\n    background: red;\r\n}\r\n#vms:before {\r\n    height: 0;\r\n    width: 40px;\r\n    content:\"\";\r\n    position: absolute;\r\n    border-bottom: 30px solid red;\r\n    border-left: 30px solid white;\r\n    border-right: 30px solid white;\r\n}\r\n#vms:after {\r\n    height: 0;\r\n    width: 40px;\r\n    content:\"\";\r\n    position: absolute; \r\n    border-top: 30px solid red;\r\n    border-left: 30px solid white; \r\n    border-right: 30px solid white;\r\n    margin: 70px 0 0 0;\r\n}<\/pre>\n

\u06a9\u0627\u062f\u0631 \u0633\u062e\u0646\u06af\u0648 :\u00a0<\/span><\/p>\n

#vms {\r\n    width: 120px; \r\n    height: 80px; \r\n    background: red;\r\n    position: absolute;\r\n    border-radius: 10px;\r\n}\r\n#vms:before {\r\n    content:\"\";\r\n    position: absolute;\r\n    width: 0;\r\n    height: 0;\r\n    border-top: 13px solid transparent;\r\n    border-right: 26px solid red;\r\n    border-bottom: 13px solid transparent;\r\n    margin: 13px 0 0 -25px;\r\n}<\/pre>\n

\u062a\u062e\u0645 \u0645\u0631\u063a :<\/span><\/p>\n

#vms {\r\n    display:block;\r\n    width:126px;\r\n    height:180px;\r\n    background-color:red;\r\n    -webkit-border-radius:63px 63px 63px 63px \/ 108px 108px 72px 72px;\r\n    border-radius:50% 50% 50% 50%\/60% 60% 40% 40%;\r\n}<\/pre>\n

\u0633\u0627\u062e\u062a \u06a9\u0627\u0631\u06a9\u062a\u0631 \u0628\u0627\u0632\u06cc pacman :<\/span><\/p>\n

#vms {\r\n    width: 0px;\r\n    height: 0px;\r\n    border-right: 60px solid transparent;\r\n    border-top: 60px solid red;\t\r\n    border-left: 60px solid red;\r\n    border-bottom: 60px solid red;\r\n    border-top-left-radius: 60px;\r\n    border-top-right-radius: 60px;\r\n    border-bottom-left-radius: 60px;\r\n    border-bottom-right-radius: 60px;\r\n}<\/pre>\n

\u062f\u0627\u06cc\u0631\u0647 2 \u0631\u0646\u06af :<\/span><\/p>\n

#vms {\r\n    width: 0;\r\n    height: 0;\r\n    border-bottom: 60px solid black;\r\n    border-top: 60px solid black;\r\n    border-left: 60px solid red;\r\n    border-right: 60px solid red;\r\n    border-radius: 60px;\r\n}<\/pre>\n

\u0633\u0627\u062e\u062a \u06cc\u06a9 \u0642\u0644\u0628 :<\/span><\/p>\n

#vms { \r\n    position: relative;\r\n}\r\n#vms:before, #vms:after {\r\n    position: absolute;\r\n    content: \"\";\r\n    left: 70px; top: 0;\r\n    width: 70px;\r\n    height: 115px;\r\n    background: red;\r\n    -moz-border-radius: 50px 50px 0 0;\r\n    border-radius: 50px 50px 0 0;\r\n    -webkit-transform: rotate(-45deg);\r\n    -moz-transform: rotate(-45deg);\r\n    -ms-transform: rotate(-45deg);\r\n    -o-transform: rotate(-45deg);\r\n    transform: rotate(-45deg);\r\n    -webkit-transform-origin: 0 100%;\r\n    -moz-transform-origin: 0 100%;\r\n    -ms-transform-origin: 0 100%;\r\n    -o-transform-origin: 0 100%;\r\n    transform-origin: 0 100%;\r\n}\r\n#vms:after { \r\n    left: 0; \r\n    -webkit-transform: rotate(45deg);\r\n    -moz-transform: rotate(45deg);\r\n    -ms-transform: rotate(45deg);\r\n    -o-transform: rotate(45deg);\r\n    transform: rotate(45deg);\r\n    -webkit-transform-origin: 100% 100%;\r\n    -moz-transform-origin: 100% 100%;\r\n    -ms-transform-origin: 100% 100%;\r\n    -o-transform-origin: 100% 100%;\r\n    transform-origin :100% 100%;\r\n}<\/pre>\n

\u062a\u0648\u062c\u0647 1 :<\/span> \u0627\u06cc\u0646 \u0627\u0646\u062f\u0627\u0632\u0647 \u0647\u0627 \u0648 \u0631\u0646\u06af \u0647\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u06cc\u0634 \u0641\u0631\u0636 \u062a\u0646\u0638\u06cc\u0645 \u0634\u062f\u0647 \u0627\u0646\u062f \u0648 \u062a\u0645\u0627\u0645\u06cc \u0622\u0646\u0647\u0627 \u0631\u0627 \u0628\u0627 \u062a\u0648\u062c\u0647 \u0628\u0647 \u0642\u0648\u0627\u0646\u06cc\u0646 \u062e\u0627\u0635 \u0647\u0631 \u0634\u06a9\u0644 \u0645\u06cc\u062a\u0648\u0627\u0646\u06cc\u062f \u062a\u063a\u06cc\u06cc\u0631 \u0646\u0645\u0627\u06cc\u06cc\u062f<\/p>\n

\u062a\u0648\u062c\u0647 2 :<\/span> \u062f\u0631 \u0628\u0627\u0644\u0627 \u0628\u0631\u0627\u06cc \u0647\u0645\u0647 \u06cc css \u0647\u0627 \u0627\u0632 \u0622\u06cc \u062f\u06cc vms \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0634\u062f\u0647 \u06a9\u0647 \u0637\u0628\u06cc\u0639\u062a\u0627 \u0645\u06cc\u062a\u0648\u0627\u0646\u06cc\u062f \u0622\u0646 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f . \u0636\u0645\u0646\u0627 \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u06a9\u062f html \u0627\u06cc\u0646 \u06a9\u062f \u0647\u0627 ( \u0646\u0645\u0627\u06cc\u0634 \u0634\u06a9\u0644 \u0647\u0627 ) \u0628\u0627\u06cc\u062f \u0628\u0647 \u0631\u0648\u0634 \u0632\u06cc\u0631 \u062f\u0631 \u062f\u0627\u062e\u0644 \u062a\u06af body \u0639\u0645\u0644 \u0646\u0645\u0627\u06cc\u06cc\u062f.<\/p>\n

<div id=\"vms\"><\/div><\/pre>\n

\u067e\u062e\u0634 \u0627\u062e\u062a\u0635\u0627\u0635\u06cc<\/p>\n

\u06af\u0631\u062f\u0627\u0648\u0631\u06cc \u0648 \u0622\u0645\u0648\u0632\u0634 : \u0648\u062d\u06cc\u062f \u0645\u062c\u06cc\u062f\u06cc<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

\u0642\u0637\u0639\u0627 \u0627\u06cc\u0646 \u06cc\u06a9 \u067e\u0633\u062a \u0641\u0648\u0642 \u0627\u0644\u0639\u0627\u062f\u0647 \u062c\u0627\u0644\u0628 \u0648 \u067e\u0631\u0628\u0627\u0632\u062f\u06cc\u062f \u0627\u0632 \u0646\u0638\u0631 \u0634\u0645\u0627 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0648\u0628 \u0633\u0627\u06cc\u062a \u062e\u0648\u0627\u0647\u062f \u0634\u062f . \u0627\u06af\u0631 \u0634\u0645\u0627 \u0647\u0645 \u0641\u06a9\u0631 \u0645\u06cc\u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0628\u0647 \u0648\u0633\u06cc\u0644\u0647 css \u0645\u06cc\u062a\u0648\u0627\u0646 \u0641\u0642\u0637 \u0686\u0646\u062f \u0634\u06a9\u0644 \u0627\u0632 \u062c\u0645\u0644\u0647 \u0645\u0631\u0628\u0639 , \u0645\u0633\u062a\u0637\u06cc\u0644 , \u062f\u0627\u06cc\u0631\u0647 \u0648 \u0628\u06cc\u0636\u06cc \u0631\u0627 \u0633\u0627\u062e\u062a , \u0633\u062e\u062a \u062f\u0631 \u0627\u0634\u062a\u0628\u0627\u0647\u06cc\u062f . \u062f\u0631 \u0627\u06cc\u0646 \u067e\u0633\u062a \u0627\u0632 \u0633\u0627\u06cc\u062a \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062f\u0627\u062a […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[565],"tags":[8199,8194,8191,8198,8193,8200,8196,8201,8195,8192,8189,8190,8197,8187,8186,1031,8184,8183,8185,8188],"_links":{"self":[{"href":"https:\/\/www.xn--mgbguh09aqiwi.com\/wp-json\/wp\/v2\/posts\/8122"}],"collection":[{"href":"https:\/\/www.xn--mgbguh09aqiwi.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.xn--mgbguh09aqiwi.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.xn--mgbguh09aqiwi.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.xn--mgbguh09aqiwi.com\/wp-json\/wp\/v2\/comments?post=8122"}],"version-history":[{"count":0,"href":"https:\/\/www.xn--mgbguh09aqiwi.com\/wp-json\/wp\/v2\/posts\/8122\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.xn--mgbguh09aqiwi.com\/wp-json\/wp\/v2\/media?parent=8122"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.xn--mgbguh09aqiwi.com\/wp-json\/wp\/v2\/categories?post=8122"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.xn--mgbguh09aqiwi.com\/wp-json\/wp\/v2\/tags?post=8122"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}