{"id":5801,"date":"2020-06-09T16:18:59","date_gmt":"2020-06-09T11:48:59","guid":{"rendered":"https:\/\/maktabkhooneh.org\/mag\/?p=5801"},"modified":"2026-04-06T23:00:00","modified_gmt":"2026-04-06T19:30:00","slug":"create-animation-and-transform-in-css","status":"publish","type":"post","link":"https:\/\/maktabkhooneh.org\/mag\/create-animation-and-transform-in-css\/","title":{"rendered":"\u0622\u0645\u0648\u0632\u0634 \u0627\u0633\u062a\u0627\u06cc\u0644 \u062f\u0647\u06cc \u0628\u0647 \u0635\u0641\u062d\u0627\u062a \u0648\u0628 \u0628\u0627 CSS\u2013 \u0642\u0633\u0645\u062a \u062f\u0648\u0645"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\"><span style=\"color: #000000; font-size: 16px;\">\u0646\u062d\u0648\u0647\u200c\u06cc \u0627\u06cc\u062c\u0627\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0648 \u0627\u0646\u062a\u0642\u0627\u0644 \u062f\u0631 css<\/span><\/h2>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062f\u0631 \u062f\u0648 \u0645\u0642\u0627\u0644\u0647\u200c\u06cc \u0642\u0628\u0644 \u0628\u0627 \u0628\u062e\u0634\u06cc \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u062f\u0631 css \u0622\u0634\u0646\u0627 \u0634\u062f\u06cc\u062f. \u0627\u06cc\u0646 \u0642\u0633\u0645\u062a \u0628\u0627 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u062a\u0631 \u0628\u06cc\u0634\u062a\u0631\u06cc \u0647\u0645\u0686\u0648\u0646 \u0646\u062d\u0648\u0647\u200c\u06cc \u0627\u06cc\u062c\u0627\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0648 \u0627\u0646\u062a\u0642\u0627\u0644 \u062f\u0631 css \u0622\u0634\u0646\u0627 \u0645\u06cc \u0634\u0648\u06cc\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u0645\u0628\u0627\u062d\u062b \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u062a\u0631 \u0628\u0627 \u0633\u0627\u06cc\u0631 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0628\u0627\u0642\u06cc \u0645\u0627\u0646\u062f\u0647 \u0627\u0632 css \u0646\u06cc\u0632 \u0622\u0634\u0646\u0627 \u0645\u06cc \u0634\u0648\u06cc\u062f. \u062f\u0631 \u0627\u062f\u0627\u0645\u0647 \u062f\u0631 \u0645\u0642\u0627\u0644\u0647 <a href=\"https:\/\/maktabkhooneh.org\/mag\/create-animation-and-transform-in-css\/\"><strong>\u0627\u06cc\u062c\u0627\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u062f\u0631 css<\/strong><\/a> \u0628\u0627 \u0645\u0627 \u0647\u0645\u0631\u0627\u0647 \u0628\u0627\u0634\u06cc\u062f.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img fetchpriority=\"high\" decoding=\"async\" width=\"750\" height=\"400\" src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2020\/06\/css3Animation.png\" alt=\"\u0646\u062d\u0648\u0647\u200c\u06cc \u0627\u06cc\u062c\u0627\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0648 \u0627\u0646\u062a\u0642\u0627\u0644 \u062f\u0631 css\" class=\"wp-image-5909\" title=\"\" srcset=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2020\/06\/css3Animation.png 750w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/06\/css3Animation-300x160.png.webp 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><figcaption><\/figcaption><\/figure>\n\n\n\n<p><span style=\"font-size: 16px;\"><\/span><\/p>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0627\u0648\u0644\u06cc\u0646 \u0645\u0648\u0631\u062f\u06cc \u06a9\u0647 \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0628\u0647 \u0622\u0646 \u067e\u0631\u062f\u0627\u062e\u062a\u0647 \u062e\u0648\u0627\u0647\u062f \u0634\u062f\u060c \u0648\u06cc\u0698\u06af\u06cc float \u062f\u0631 css \u0645\u06cc \u0628\u0627\u0634\u062f. \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0628\u0647 \u0634\u0645\u0627 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0628\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0644\u0645\u0627\u0646\u06cc \u0631\u0627 \u062f\u0631 \u0633\u0645\u062a \u0631\u0627\u0633\u062a \u0648 \u06cc\u0627 \u0633\u0645\u062a \u0686\u067e \u0627\u0644\u0645\u0627\u0646 \u062f\u06cc\u06af\u0631\u06cc \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f \u0648 \u06cc\u0627 \u0627\u0635\u0637\u0644\u0627\u062d\u0627 \u0634\u0646\u0627\u0648\u0631 \u06a9\u0646\u06cc\u062f. \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u06f3 \u0645\u0642\u062f\u0627\u0631 \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u062f.<\/span><\/p>\n\n\n<div class=\"jet-listing-grid--50121\" style=\"\"><div class=\"jet-listing-dynamic-field-block zht-maktab-khooneh-course cb-fb2qc30r\"data-is-block=\"jet-engine\/dynamic-field\"><div class=\"jet-listing-dynamic-field__content\" >\n<div class=\"course-card\">\n    <div class=\"course-card-img\">\n        <img decoding=\"async\" \n            data-src=\"https:\/\/media1.maktabkhooneh.org\/CACHE\/images\/courses\/images\/front_gcZ5ulR_1403-08-16-164827889\/eb15a124ff8961e6f5a4178684ece70c.webp?expire=4893471932&#038;token=0416681717d9beb623a1202e6efcac1b&#038;md5=BBZoFxfZvrYjoSAubvysGw==\" \n            alt=\"\u0622\u0645\u0648\u0632\u0634 \u0637\u0631\u0627\u062d\u06cc \u0648\u0628 \u0633\u0627\u06cc\u062a (Front-End)\" \n            title=\"\u0622\u0645\u0648\u0632\u0634 \u0637\u0631\u0627\u062d\u06cc \u0648\u0628 \u0633\u0627\u06cc\u062a (Front-End)\" \n            width=\"100%\" \n            height=\"auto\"\n           \n         src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\">\n    <\/div>\n\n    <div class=\"course-details\">\n        <a href=\"https:\/\/maktabkhooneh.org\/course\/%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A8-%D8%B3%D8%A7%DB%8C%D8%AA-front-end-mk3\/\" class=\"course-title\" target=\"_blank\" rel=\"noopener noreferrer\">\n            \u0622\u0645\u0648\u0632\u0634 \u0637\u0631\u0627\u062d\u06cc \u0648\u0628 \u0633\u0627\u06cc\u062a (Front-End)        <\/a>\n\n        <div class=\"course-price\">\n            \n                <span class=\"real-price\">\n                                            \u06f9\u06f9\u06f9,\u06f0\u06f0\u06f0                                    <\/span>\n\n                <span>\n                    <span class=\"discounted-price\">\n                        \u06f5\u06f9\u06f9,\u06f4\u06f0\u06f0                    <\/span>\n                    <span class=\"price-currency\">\u062a\u0648\u0645\u0627\u0646<\/span>\n                <\/span>\n\n                                    <div class=\"discount-percentage\">\n                        \u06f4\u06f0%                    <\/div>\n                \n                    <\/div>\n        <button class=\"course-cta-button\" data-course-url=\"https:\/\/maktabkhooneh.org\/course\/%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A8-%D8%B3%D8%A7%DB%8C%D8%AA-front-end-mk3\/\">\n            \u0645\u0634\u0627\u0647\u062f\u0647 \u0648 \u062e\u0631\u06cc\u062f        <\/button>\n    <\/div>\n<\/div>\n<\/div><\/div><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"color: #000000; font-size: 16px;\">Right: \u0627\u0644\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0627\u06cc\u0646 \u0645\u0642\u062f\u0627\u0631 \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u062f \u062f\u0631 \u0633\u0645\u062a \u0631\u0627\u0633\u062a \u0627\u0644\u0645\u0627\u0646 \u062f\u06cc\u06af\u0631 \u0642\u0631\u0627\u0631 \u0645\u06cc \u06af\u06cc\u0631\u062f.<\/span><\/li>\n\n\n\n<li><span style=\"color: #000000; font-size: 16px;\">Left: \u0627\u0644\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0627\u06cc\u0646 \u0645\u0642\u062f\u0627\u0631 \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u062f \u062f\u0631 \u0633\u0645\u062a \u0686\u067e \u0627\u0644\u0645\u0627\u0646 \u062f\u06cc\u06af\u0631 \u0642\u0631\u0627\u0631 \u0645\u06cc \u06af\u06cc\u0631\u062f.<\/span><\/li>\n\n\n\n<li><span style=\"color: #000000; font-size: 16px;\">None: \u0627\u06cc\u0646 \u062d\u0627\u0644\u062a \u06a9\u0647 \u062d\u0627\u0644\u062a \u067e\u06cc\u0634 \u0641\u0631\u0636 \u0645\u06cc \u0628\u0627\u0634\u062f\u060c \u0627\u0644\u0645\u0627\u0646 \u0647\u0627 \u0631\u0627 \u0628\u0647 \u062a\u0631\u062a\u06cc\u0628 \u067e\u0634\u062a \u0647\u0645 \u0642\u0631\u0627\u0631 \u0645\u06cc \u062f\u0647\u062f.<\/span><\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;style&gt;\nimg {\n  float: left;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;p&gt;In this example, the image will float to the right in the paragraph, and the text in the paragraph will wrap around the image.&lt;\/p&gt;\n\n&lt;p&gt;&lt;img src=\"pineapple.jpg\" alt=\"Pineapple\" style=\"width:170px;height:170px;margin-left:15px;\"&gt;\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.&lt;\/p&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0686\u0646\u062f \u0645\u062b\u0627\u0644 \u0627\u0632 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0631\u0627 \u0628\u0627 \u0647\u0645 \u0645\u06cc\u0628\u06cc\u0646\u06cc\u0645.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"color: #000000; font-size: 16px;\">\u0645\u062b\u0627\u0644 \u0627\u0648\u0644 \u0627\u06cc\u062c\u0627\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u062f\u0631 css<\/span><\/h3>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;style&gt;\n      * {\n        box-sizing: border-box;\n      }\n\n      .box {\n        float: left;\n        width: 33.33%;\n        padding: 50px;\n      }\n\n      .clearfix::after {\n        content: \"\";\n        clear: both;\n        display: table;\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;h2&gt;Grid of Boxes&lt;\/h2&gt;\n    &lt;p&gt;Float boxes side by side:&lt;\/p&gt;\n\n    &lt;div class=\"clearfix\"&gt;\n      &lt;div class=\"box\" style=\"background-color:#bbb\"&gt;\n        &lt;p&gt;Some text inside the box.&lt;\/p&gt;\n      &lt;\/div&gt;\n      &lt;div class=\"box\" style=\"background-color:#ccc\"&gt;\n        &lt;p&gt;Some text inside the box.&lt;\/p&gt;\n      &lt;\/div&gt;\n      &lt;div class=\"box\" style=\"background-color:#ddd\"&gt;\n        &lt;p&gt;Some text inside the box.&lt;\/p&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;p&gt;\n      Note that we also use the clearfix hack to take care of the layout flow,\n      and that add the box-sizing property to make sure that the box doesn't\n      break due to extra padding. Try to remove this code to see the effect.\n    &lt;\/p&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0646\u0645\u0627\u06cc\u0634:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"190\" data-src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/06\/1-1-1024x190.png.webp\" alt=\"\" class=\"wp-image-5802 lazyload\" title=\"\" data-srcset=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/06\/1-1-1024x190.png.webp 1024w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/06\/1-1-300x56.png.webp 300w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/06\/1-1-768x142.png.webp 768w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2020\/06\/1-1.png 1499w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/190;\" \/><\/figure>\n\n\n\n<p><span style=\"font-size: 16px;\"><\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-size: 16px;\"><span style=\"color: #000000;\">\u0645\u062b\u0627\u0644 \u062f\u0648\u0645 <\/span><span style=\"color: #000000;\">\u0627\u06cc\u062c\u0627\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u062f\u0631 css<\/span><\/span><\/h3>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;style&gt;\n      * {\n        box-sizing: border-box;\n      }\n\n      .img-container {\n        float: left;\n        width: 33.33%;\n        padding: 5px;\n      }\n\n      .clearfix::after {\n        content: \"\";\n        clear: both;\n        display: table;\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;h2&gt;Images Side by Side&lt;\/h2&gt;\n    &lt;p&gt;Float images side by side:&lt;\/p&gt;\n\n    &lt;div class=\"clearfix\"&gt;\n      &lt;div class=\"img-container\"&gt;\n        &lt;img src=\"img_5terre.jpg\" alt=\"Italy\" style=\"width:100%\" \/&gt;\n      &lt;\/div&gt;\n      &lt;div class=\"img-container\"&gt;\n        &lt;img src=\"img_forest.jpg\" alt=\"Forest\" style=\"width:100%\" \/&gt;\n      &lt;\/div&gt;\n      &lt;div class=\"img-container\"&gt;\n        &lt;img src=\"img_mountains.jpg\" alt=\"Mountains\" style=\"width:100%\" \/&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;p&gt;\n      Note that we also use the clearfix hack to take care of the layout flow,\n      and that we add the box-sizing property to make sure that the image\n      container doesn't break due to extra padding. Try to remove this code to\n      see the effect.\n    &lt;\/p&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0646\u0645\u0627\u06cc\u0634:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"359\" data-src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/06\/2-1-1024x359.png.webp\" alt=\"\" class=\"wp-image-5803 lazyload\" title=\"\" data-srcset=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/06\/2-1-1024x359.png.webp 1024w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/06\/2-1-300x105.png.webp 300w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/06\/2-1-768x269.png.webp 768w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2020\/06\/2-1.png 1248w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/359;\" \/><\/figure>\n\n\n\n<p><span style=\"font-size: 16px;\"><\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-size: 16px;\"><span style=\"color: #000000;\">\u0645\u062b\u0627\u0644 \u0633\u0648\u0645 <\/span><span style=\"color: #000000;\">\u0627\u06cc\u062c\u0627\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u062f\u0631 css<\/span><\/span><\/h3>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;style&gt;\n      * {\n        box-sizing: border-box;\n      }\n\n      .box {\n        float: left;\n        width: 50%;\n        padding: 50px;\n        height: 300px;\n      }\n\n      .clearfix::after {\n        content: \"\";\n        clear: both;\n        display: table;\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;h2&gt;Equal Height Boxes&lt;\/h2&gt;\n    &lt;p&gt;Floating boxes with equal heights:&lt;\/p&gt;\n\n    &lt;div class=\"clearfix\"&gt;\n      &lt;div class=\"box\" style=\"background-color:#bbb\"&gt;\n        &lt;h2&gt;Box 1&lt;\/h2&gt;\n        &lt;p&gt;Some content, some content, some content&lt;\/p&gt;\n      &lt;\/div&gt;\n      &lt;div class=\"box\" style=\"background-color:#ccc\"&gt;\n        &lt;h2&gt;Box 2&lt;\/h2&gt;\n        &lt;p&gt;Some content, some content, some content&lt;\/p&gt;\n        &lt;p&gt;Some content, some content, some content&lt;\/p&gt;\n        &lt;p&gt;Some content, some content, some content&lt;\/p&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;p&gt;\n      This example not very flexible. It is ok to use CSS height if you can\n      guarantee that the boxes will always have the same amount of content in\n      them, but that's not always the case. If you try the example above on a\n      mobile phone (or resize the browser window), you will see that the second\n      box's content will be displayed outside of the box.\n    &lt;\/p&gt;\n    &lt;p&gt;\n      Go back to the tutorial and find another solution, if this is not what you\n      want.\n    &lt;\/p&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0646\u0645\u0627\u06cc\u0634:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"319\" data-src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/06\/3-1-1024x319.png.webp\" alt=\"\" class=\"wp-image-5804 lazyload\" title=\"\" data-srcset=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/06\/3-1-1024x319.png.webp 1024w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/06\/3-1-300x94.png.webp 300w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/06\/3-1-768x239.png.webp 768w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2020\/06\/3-1.png 1514w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/319;\" \/><\/figure>\n\n\n\n<p><span style=\"font-size: 16px;\"><\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-size: 16px;\"><span style=\"color: #000000;\">\u0645\u062b\u0627\u0644 \u0686\u0647\u0627\u0631\u0645 <\/span><span style=\"color: #000000;\">\u0627\u06cc\u062c\u0627\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u062f\u0631 css<\/span><\/span><\/h3>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;style&gt;\n      .flex-container {\n        display: flex;\n        flex-wrap: nowrap;\n        background-color: DodgerBlue;\n      }\n\n      .flex-container .box {\n        background-color: #f1f1f1;\n        width: 50%;\n        margin: 10px;\n        text-align: center;\n        line-height: 75px;\n        font-size: 30px;\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;h1&gt;Flexible Boxes&lt;\/h1&gt;\n\n    &lt;div class=\"flex-container\"&gt;\n      &lt;div class=\"box\"&gt;\n        Box 1 - This is some text to make sure that the content gets really\n        tall. This is some text to make sure that the content gets really tall.\n      &lt;\/div&gt;\n      &lt;div class=\"box\"&gt;Box 2 - My height will follow Box 1.&lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;p&gt;Try to resize the browser window to see the flexible layout.&lt;\/p&gt;\n    &lt;p&gt;\n      &lt;strong&gt;Note:&lt;\/strong&gt; Flexbox is not supported in Internet Explorer 10 or\n      earlier versions.\n    &lt;\/p&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0646\u0645\u0627\u06cc\u0634:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"284\" data-src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/06\/4-1-1024x284.png.webp\" alt=\"\" class=\"wp-image-5805 lazyload\" title=\"\" data-srcset=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/06\/4-1-1024x284.png.webp 1024w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/06\/4-1-300x83.png.webp 300w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/06\/4-1-768x213.png.webp 768w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2020\/06\/4-1.png 1451w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/284;\" \/><\/figure>\n\n\n\n<p><span style=\"font-size: 16px;\"><\/span><\/p>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062a\u0635\u0648\u06cc\u0631 \u067e\u0646\u062c\u0645:<\/span><\/p>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644 \u0634\u0645\u0627 \u0628\u0627 \u0646\u062d\u0648\u0647\u200c\u06cc \u06a9\u0646\u0627\u0631 \u0647\u0645 \u0627\u0646\u062f\u0627\u062e\u062a\u0646 \u0645\u0646\u0648\u0647\u0627\u06cc \u0646\u0648\u0628\u0627\u0631 \u0622\u0634\u0646\u0627 \u0645\u06cc \u0634\u0648\u06cc\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;style&gt;\n      ul {\n        list-style-type: none;\n        margin: 0;\n        padding: 0;\n        overflow: hidden;\n        background-color: #333;\n      }\n\n      li {\n        float: left;\n      }\n\n      li a {\n        display: inline-block;\n        color: white;\n        text-align: center;\n        padding: 14px 16px;\n        text-decoration: none;\n      }\n\n      li a:hover {\n        background-color: #111;\n      }\n\n      .active {\n        background-color: red;\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;ul&gt;\n      &lt;li&gt;&lt;a href=\"#home\" class=\"active\"&gt;Home&lt;\/a&gt;&lt;\/li&gt;\n      &lt;li&gt;&lt;a href=\"#news\"&gt;News&lt;\/a&gt;&lt;\/li&gt;\n      &lt;li&gt;&lt;a href=\"#contact\"&gt;Contact&lt;\/a&gt;&lt;\/li&gt;\n      &lt;li&gt;&lt;a href=\"#about\"&gt;About&lt;\/a&gt;&lt;\/li&gt;\n    &lt;\/ul&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0646\u0645\u0627\u06cc\u0634:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"45\" data-src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/06\/5-1-1024x45.png.webp\" alt=\"\" class=\"wp-image-5806 lazyload\" title=\"\" data-srcset=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/06\/5-1-1024x45.png.webp 1024w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/06\/5-1-300x13.png.webp 300w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/06\/5-1-768x34.png.webp 768w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2020\/06\/5-1.png 1515w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/45;\" \/><\/figure>\n\n\n\n<p><span style=\"font-size: 16px;\"><\/span><\/p>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062a\u0635\u0648\u06cc\u0631 \u0634\u0634\u0645:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;style&gt;\n      * {\n        box-sizing: border-box;\n      }\n\n      .header,\n      .footer {\n        background-color: grey;\n        color: white;\n        padding: 15px;\n      }\n\n      .column {\n        float: left;\n        padding: 15px;\n      }\n\n      .clearfix::after {\n        content: \"\";\n        clear: both;\n        display: table;\n      }\n\n      .menu {\n        width: 25%;\n      }\n\n      .content {\n        width: 75%;\n      }\n\n      .menu ul {\n        list-style-type: none;\n        margin: 0;\n        padding: 0;\n      }\n\n      .menu li {\n        padding: 8px;\n        margin-bottom: 8px;\n        background-color: #33b5e5;\n        color: #ffffff;\n      }\n\n      .menu li:hover {\n        background-color: #0099cc;\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;div class=\"header\"&gt;\n      &lt;h1&gt;Chania&lt;\/h1&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=\"clearfix\"&gt;\n      &lt;div class=\"column menu\"&gt;\n        &lt;ul&gt;\n          &lt;li&gt;The Flight&lt;\/li&gt;\n          &lt;li&gt;The City&lt;\/li&gt;\n          &lt;li&gt;The Island&lt;\/li&gt;\n          &lt;li&gt;The Food&lt;\/li&gt;\n        &lt;\/ul&gt;\n      &lt;\/div&gt;\n\n      &lt;div class=\"column content\"&gt;\n        &lt;h1&gt;The City&lt;\/h1&gt;\n        &lt;p&gt;\n          Chania is the capital of the Chania region on the island of Crete. The\n          city can be divided in two parts, the old town and the modern city.\n        &lt;\/p&gt;\n        &lt;p&gt;\n          You will learn more about web layout and responsive web pages in a\n          later chapter.\n        &lt;\/p&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=\"footer\"&gt;\n      &lt;p&gt;Footer Text&lt;\/p&gt;\n    &lt;\/div&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0646\u0645\u0627\u06cc\u0634:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"289\" data-src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/06\/6-1024x289.png.webp\" alt=\"\" class=\"wp-image-5807 lazyload\" title=\"\" data-srcset=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/06\/6-1024x289.png.webp 1024w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/06\/6-300x85.png.webp 300w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/06\/6-768x217.png.webp 768w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2020\/06\/6.png 1447w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/289;\" \/><\/figure>\n\n\n\n<p><span style=\"font-size: 16px;\"><\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"color: #000000; font-size: 16px;\">\u0648\u06cc\u0698\u06af\u06cc \u062f\u06cc\u06af\u0631\u06cc flex-box <\/span><\/h3>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0648\u06cc\u0698\u06af\u06cc \u062f\u06cc\u06af\u0631\u06cc \u0628\u0647 \u0646\u0627\u0645 flex-box \u0646\u06cc\u0632 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u0634\u0645\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646 \u0646\u06cc\u0632 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0639\u0645\u0644\u06cc \u0645\u0634\u0627\u0628\u0647 \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f. \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0631\u0627 \u0645\u0642\u0627\u0644\u0647\u200c\u0627\u06cc \u062c\u062f\u0627\u06af\u0627\u0646\u0647 \u0635\u062d\u0628\u062a \u062e\u0648\u0627\u0647\u0645 \u06a9\u0631\u062f.<\/span><\/p>\n\n\n<div class=\"jet-listing-grid--50192\" style=\"\"><style><\/style><section class=\"zht-related-post\" itemscope=\"\" itemtype=\"https:\/\/schema.org\/Article\" role=\"region\"\n  aria-label=\"Related article\">\n  <div class=\"zht-related-post-section-label\">\n    \u0645\u0637\u0627\u0644\u0628 \u0645\u0631\u062a\u0628\u0637\n  <\/div>\n  <img decoding=\"async\" width=\"300\" height=\"188\" data-src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2020\/05\/Learn-how-to-style-web-pages-with-CSS-colors-in-css-300x188.jpg\" class=\"attachment-medium size-medium wp-post-image lazyload\" alt=\"\u0622\u0645\u0648\u0632\u0634 \u0627\u0633\u062a\u0627\u06cc\u0644 \u062f\u0647\u06cc \u0628\u0647 \u0635\u0641\u062d\u0627\u062a \u0648\u0628 \u0628\u0627 CSS\u2013 \u0642\u0633\u0645\u062a \u0627\u0648\u0644\" data-srcset=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2020\/05\/Learn-how-to-style-web-pages-with-CSS-colors-in-css-300x188.jpg 300w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2020\/05\/Learn-how-to-style-web-pages-with-CSS-colors-in-css-1024x640.jpg 1024w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2020\/05\/Learn-how-to-style-web-pages-with-CSS-colors-in-css-768x480.jpg 768w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2020\/05\/Learn-how-to-style-web-pages-with-CSS-colors-in-css-1536x960.jpg 1536w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2020\/05\/Learn-how-to-style-web-pages-with-CSS-colors-in-css.jpg 1920w\" data-sizes=\"(max-width: 300px) 100vw, 300px\" title=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 300px; --smush-placeholder-aspect-ratio: 300\/188;\">\n  <a href=\"https:\/\/maktabkhooneh.org\/mag\/learn-how-to-style-web-pages-with-css-colors-in-css\/\" class=\"zht-related-post-title\"\n    itemprop=\"headline\" target=\"_blank\">\u0622\u0645\u0648\u0632\u0634 \u0627\u0633\u062a\u0627\u06cc\u0644 \u062f\u0647\u06cc \u0628\u0647 \u0635\u0641\u062d\u0627\u062a \u0648\u0628 \u0628\u0627 CSS\u2013 \u0642\u0633\u0645\u062a \u0627\u0648\u0644 (\u0631\u0646\u06af \u200c\u0647\u0627 \u062f\u0631 css)<\/a>\n<\/section><\/div>\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0645\u0648\u0631\u062f \u0628\u0639\u062f\u06cc \u06a9\u0647 \u062f\u0631 \u0631\u0627\u0628\u0637\u0647 \u0628\u0627 \u0622\u0646 \u0635\u062d\u0628\u062a \u062e\u0648\u0627\u0647\u0645 \u06a9\u0631\u062f\u060c \u0637\u0631\u06cc\u0642\u0647 \u06cc \u0642\u0631\u0627\u0631\u062f\u0627\u062f\u0646 \u06cc\u06a9 \u0627\u0644\u0645\u0627\u0646 \u062f\u0631 \u0645\u0631\u06a9\u0632 \u0627\u0644\u0645\u0627\u0646 \u0648 \u06cc\u0627 \u0635\u0641\u062d\u0647 \u0645\u06cc \u0628\u0627\u0634\u062f. \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0627\u0631 \u0631\u0648\u0634 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641\u06cc \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0628\u0647 \u0622\u0646\u200c\u0647\u0627 \u062e\u0648\u0627\u0647\u0645 \u067e\u0631\u062f\u0627\u062e\u062a.<\/span><\/p>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0627\u0648\u0644\u06cc\u0646 \u0631\u0648\u0634 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 margin \u0645\u06cc \u0628\u0627\u0634\u062f. \u0628\u0627 \u0642\u0631\u0627\u0631 \u062f\u0627\u062f\u0646 \u062d\u0627\u0644\u062a auto \u0628\u0631\u0627\u06cc \u0645\u0642\u062f\u0627\u0631 margin\u060c \u0627\u0644\u0645\u0627\u0646 \u062f\u0631 \u0648\u0633\u0637 \u0627\u0644\u0645\u0627\u0646 \u0642\u0631\u0627\u0631 \u0645\u06cc \u06af\u06cc\u0631\u062f. \u0627\u06cc\u0646 \u0648\u0633\u0637 \u0642\u0631\u0627\u0631 \u06af\u0631\u0641\u062a\u0646 \u062f\u0631 \u0631\u0627\u0633\u062a\u0627\u06cc \u0645\u062d\u0648\u0631 \u0627\u0641\u0642\u06cc \u0645\u06cc \u0628\u0627\u0634\u062f \u0648 \u0634\u0627\u0645\u0644 \u0645\u062d\u0648\u0631 \u0639\u0645\u0648\u062f\u06cc \u0646\u0645\u06cc \u0628\u0627\u0634\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;style&gt;\n      .center {\n        margin: auto;\n        width: 60%;\n        border: 3px solid #73ad21;\n        padding: 10px;\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;h2&gt;Center Align Elements&lt;\/h2&gt;\n    &lt;p&gt;To horizontally center a block element (like div), use margin: auto;&lt;\/p&gt;\n\n    &lt;div class=\"center\"&gt;\n      &lt;p&gt;\n        &lt;b&gt;Note: &lt;\/b&gt;Using margin:auto will not work in IE8, unless a !DOCTYPE\n        is declared.\n      &lt;\/p&gt;\n    &lt;\/div&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0648\u06cc\u0698\u06af\u06cc \u0628\u0639\u062f\u06cc \u06a9\u0647 \u067e\u06cc\u0634 \u062a\u0631 \u0647\u0645 \u06af\u0641\u062a\u0645\u060c \u0645\u062e\u0635\u0648\u0635 \u0645\u062a\u0646 \u0647\u0627 \u0645\u06cc \u0628\u0627\u0634\u062f \u06a9\u0647 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0645\u062a\u0646\u06cc \u0631\u0627 \u062f\u0631 \u0648\u0633\u0637 \u0627\u0644\u0645\u0627\u0646\u06cc \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;style&gt;\n.center {\n  text-align: center;\n  border: 3px solid green;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;h2&gt;Center Text&lt;\/h2&gt;\n\n&lt;div class=\"center\"&gt;\n  &lt;p&gt;This text is centered.&lt;\/p&gt;\n&lt;\/div&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/span><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"color: #000000; font-size: 16px;\">\u062d\u0627\u0644\u062a \u0645\u062a\u0646<\/span><\/h3>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062f\u0631 \u0627\u06cc\u0646 \u062d\u0627\u0644\u062a \u0645\u062a\u0646 \u0648 \u06cc\u0627 \u0627\u0644\u0645\u0627\u0646 \u062a\u0646\u0647\u0627 \u062f\u0631 \u0645\u062d\u0648\u0631 \u0627\u0641\u0642\u06cc \u062f\u0631 \u0648\u0633\u0637 \u0642\u0631\u0627\u0631 \u0645\u06cc \u06af\u06cc\u0631\u062f \u0648 \u0628\u0631\u0627\u06cc \u0642\u0631\u0627\u0631 \u062f\u0627\u062f\u0646 \u0627\u0644\u0645\u0627\u0646 \u062f\u0631 \u0648\u0633\u0637 \u062f\u0631 \u0645\u062d\u0648\u0631 \u0639\u0645\u0648\u062f\u06cc \u0646\u06cc\u0627\u0632 \u0627\u0633\u062a \u062a\u0627 \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc \u062f\u06cc\u06af\u0631\u06cc \u062a\u062d\u062a \u0639\u0646\u0648\u0627\u0646 vertical-align \u0645\u06cc\u200c\u0628\u0627\u0634\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;style&gt;\n      .center {\n        line-height: 200px;\n        height: 200px;\n        border: 3px solid green;\n        text-align: center;\n      }\n\n      .center p {\n        line-height: 1.5;\n        display: inline-block;\n        vertical-align: middle;\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;h2&gt;Centering&lt;\/h2&gt;\n    &lt;p&gt;\n      In this example, we use the line-height property with a value that is\n      equal to the height property to center the div element:\n    &lt;\/p&gt;\n\n    &lt;div class=\"center\"&gt;\n      &lt;p&gt;I am vertically and horizontally centered.&lt;\/p&gt;\n    &lt;\/div&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/span><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"color: #000000; font-size: 16px;\">\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 flex-box<\/span><\/h3>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0631\u0648\u0634 \u0622\u062e\u0631 \u06a9\u0647 \u0645\u06cc\u062a\u0648\u0627\u0646 \u06af\u0641\u062a \u0628\u0647\u062a\u0631\u06cc\u0646 \u0631\u0648\u0634 \u0645\u0645\u06a9\u0646 \u0645\u06cc \u0628\u0627\u0634\u062f\u060c \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 flex-box \u0647\u0627 \u0645\u06cc \u0628\u0627\u0634\u062f. \u0627\u06cc\u0646 \u0645\u0648\u0631\u062f \u0631\u0627 \u062f\u0631 \u0645\u0642\u0627\u0644\u0647 \u0627\u06cc \u062c\u062f\u0627\u06af\u0627\u0646\u0647 \u0628\u0647 \u0637\u0648\u0631 \u06a9\u0627\u0645\u0644 \u0628\u0631\u0631\u0633\u06cc \u062e\u0648\u0627\u0647\u0645 \u06a9\u0631\u062f. \u0648\u06cc\u0698\u06af\u06cc \u0628\u0639\u062f\u06cc \u0645\u0648\u0631\u062f \u0628\u0631\u0631\u0633\u06cc \u0634\u0641\u0627\u0641\u06cc\u062a \u06cc\u0627 opacity \u0645\u06cc \u0628\u0627\u0634\u062f. \u0628\u0627 \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f\u060c \u062a\u0627 \u062f\u0631\u0635\u062f \u0634\u0641\u0627\u0641\u06cc\u062a \u06cc\u06a9 \u0627\u0644\u0645\u0627\u0646 \u0631\u0627 \u0645\u0634\u062e\u0635 \u06a9\u0646\u06cc\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;style&gt;\n      img {\n        opacity: 0.5;\n      }\n\n      img:hover {\n        opacity: 1;\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;h1&gt;Image Transparency&lt;\/h1&gt;\n    &lt;p&gt;\n      The opacity property is often used together with the :hover selector to\n      change the opacity on mouse-over:\n    &lt;\/p&gt;\n    &lt;img src=\"img_forest.jpg\" alt=\"Forest\" width=\"170\" height=\"100\" \/&gt;\n    &lt;img src=\"img_mountains.jpg\" alt=\"Mountains\" width=\"170\" height=\"100\" \/&gt;\n    &lt;img src=\"img_5terre.jpg\" alt=\"Italy\" width=\"170\" height=\"100\" \/&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/span><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span style=\"color: #000000; font-size: 16px;\">\u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0648 \u0627\u0646\u062a\u0642\u0627\u0644 \u062f\u0631 css<\/span><\/h2>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062a\u0642\u0631\u06cc\u0628\u0627 \u062a\u0645\u0627\u0645\u06cc \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc css \u0631\u0627 \u0645\u0637\u0631\u062d \u06a9\u0631\u062f\u0645. \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0642\u0635\u062f \u062f\u0627\u0631\u0645 \u062a\u0627 \u0645\u0628\u0627\u062d\u062b \u0628\u0627\u0642\u06cc \u0645\u0627\u0646\u062f\u0647 \u06a9\u0647 \u0645\u0628\u0627\u062d\u062b \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u0645\u06cc \u0628\u0627\u0634\u0646\u062f \u0631\u0627 \u0645\u0637\u0631\u062d \u06a9\u0646\u0645. \u0627\u0648\u0644\u06cc\u0646 \u0645\u0628\u062d\u062b \u0627\u0632 \u0628\u062e\u0634 \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u0622\u0645\u0648\u0632\u0634 css\u060c \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u062f\u0631 css \u0645\u06cc \u0628\u0627\u0634\u062f.<\/span><\/p>\n\n\n<div class=\"jet-listing-grid--50192\" style=\"\"><section class=\"zht-related-post\" itemscope=\"\" itemtype=\"https:\/\/schema.org\/Article\" role=\"region\"\n  aria-label=\"Related article\">\n  <div class=\"zht-related-post-section-label\">\n    \u0645\u0637\u0627\u0644\u0628 \u0645\u0631\u062a\u0628\u0637\n  <\/div>\n  <img decoding=\"async\" width=\"300\" height=\"169\" data-src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/04\/html-elements-300x169.jpg.webp\" class=\"attachment-medium size-medium wp-post-image lazyload\" alt=\"\u0622\u0645\u0648\u0632\u0634 HTML \u0628\u0647 \u0632\u0628\u0627\u0646 \u0633\u0627\u062f\u0647 \u2013 \u0642\u0633\u0645\u062a \u0627\u0648\u0644\" data-srcset=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/04\/html-elements-300x169.jpg.webp 300w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/04\/html-elements-1024x576.jpg.webp 1024w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/04\/html-elements-768x432.jpg.webp 768w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2020\/04\/html-elements.jpg 1280w\" data-sizes=\"(max-width: 300px) 100vw, 300px\" title=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 300px; --smush-placeholder-aspect-ratio: 300\/169;\">\n  <a href=\"https:\/\/maktabkhooneh.org\/mag\/learn-html-in-simple-language-first-part\/\" class=\"zht-related-post-title\"\n    itemprop=\"headline\" target=\"_blank\">\u0622\u0645\u0648\u0632\u0634 HTML \u0628\u0647 \u0632\u0628\u0627\u0646 \u0633\u0627\u062f\u0647 \u2013 \u0642\u0633\u0645\u062a \u0627\u0648\u0644<\/a>\n<\/section><\/div>\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0627\u0633\u0645\u0634 \u0645\u0634\u062e\u0635 \u0627\u0633\u062a\u060c \u0628\u0631\u0627\u06cc \u0637\u0631\u0627\u062d\u06cc \u0627\u0644\u0645\u0627\u0646 \u0647\u0627\u06cc\u06cc \u0645\u06cc \u0628\u0627\u0634\u062f \u06a9\u0647 \u062f\u0631 \u062f\u0627\u062e\u0644 \u0635\u0641\u062d\u0647 \u062f\u0627\u0631\u0627\u06cc \u062d\u0631\u06a9\u062a \u0645\u06cc \u0628\u0627\u0634\u0646\u062f \u0648 \u06cc\u0627 \u0627\u0635\u0637\u0644\u0627\u062d\u0627 \u062f\u0627\u06cc\u0646\u0627\u0645\u06cc\u06a9 \u0645\u06cc \u0628\u0627\u0634\u0646\u062f. \u0634\u0645\u0627 \u0627\u0646\u0648\u0627\u0639 \u062d\u0627\u0644\u062a \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0631\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0637\u0631\u0627\u062d\u06cc \u06a9\u0646\u06cc\u062f. \u0627\u0632 \u062c\u0645\u0644\u0647 \u0628\u0627\u0631\u0634 \u0628\u0631\u0641 \u0627\u0632 \u0635\u0641\u062d\u0647!<\/span><\/p>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0628\u0631\u0627\u06cc \u062f\u0631\u06a9 \u0633\u0627\u062e\u062a\u0627\u0631 \u062a\u0639\u0631\u06cc\u0641 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u060c \u0627\u0628\u062a\u062f\u0627 \u0645\u062b\u0627\u0644 \u0632\u06cc\u0631 \u0631\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;style&gt;\n      div {\n        width: 100px;\n        height: 100px;\n        background-color: red;\n        animation-name: example;\n        animation-duration: 4s;\n      }\n\n      @keyframes example {\n        from {\n          background-color: red;\n        }\n        to {\n          background-color: yellow;\n        }\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;p&gt;\n      &lt;b&gt;Note:&lt;\/b&gt; This example does not work in Internet Explorer 9 and earlier\n      versions.\n    &lt;\/p&gt;\n\n    &lt;div&gt;&lt;\/div&gt;\n\n    &lt;p&gt;\n      &lt;b&gt;Note:&lt;\/b&gt; When an animation is finished, it changes back to its\n      original style.\n    &lt;\/p&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n\n<\/span><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-size: 16px;\">\u0645\u062b\u0627\u0644 <span style=\"color: #000000;\">\u0627\u06cc\u062c\u0627\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0648 \u0627\u0646\u062a\u0642\u0627\u0644 \u062f\u0631 css<\/span><\/span><\/h3>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644 \u0631\u0646\u06af \u0627\u0644\u0645\u0627\u0646 \u0627\u0632 \u0642\u0631\u0645\u0632 \u0628\u0647 \u0633\u0645\u062a \u0632\u0631\u062f \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u06a9\u0646\u062f. \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06cc\u06a9 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0627\u0628\u062a\u062f\u0627 \u0646\u06cc\u0627\u0632 \u0627\u0633\u062a \u062a\u0627 \u0622\u0646 \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f. \u0628\u0631\u0627\u06cc \u062a\u0639\u0631\u06cc\u0641 \u06cc\u06a9 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0627\u0632 @keyframes \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0628\u0627\u06cc\u062f \u06a9\u0631\u062f. \u0634\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u062a\u0646\u0647\u0627 \u06cc\u06a9 \u0646\u0642\u0637\u0647 \u06cc \u0634\u0631\u0648\u0639 from \u0648 \u0646\u0642\u0637\u0647 \u06cc \u067e\u0627\u06cc\u0627\u0646 to \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f \u0648 \u06cc\u0627 \u0627\u0632 \u0627\u0628\u062a\u062f\u0627 \u062a\u0627 \u0627\u0646\u062a\u0647\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0631\u0627 \u0628\u0647 \u062f\u0631\u0635\u062f \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u062a\u0642\u0633\u06cc\u0645 \u06a9\u0646\u06cc\u062f \u0648 \u062f\u0631 \u0647\u0631 \u0645\u0631\u062d\u0644\u0647 \u06cc\u06a9 \u062a\u0639\u0631\u06cc\u0641 \u0645\u062a\u0641\u0627\u0648\u062a \u0628\u0631\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f.<\/span><\/p>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u067e\u0633 \u0627\u0632 \u062a\u0639\u0631\u06cc\u0641 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u06cc\u06a9 \u0627\u0633\u0645 \u0628\u0631\u0627\u06cc \u0622\u0646 \u0646\u06cc\u0627\u0632 \u0627\u0633\u062a \u062a\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u062f\u0631 \u0645\u062b\u0627\u0644 \u0628\u0627\u0644\u0627 \u0627\u06cc\u0646 \u0627\u0633\u0645 example \u0645\u06cc \u0628\u0627\u0634\u062f. \u067e\u0633 \u0627\u0632 \u0622\u0646\u06a9\u0647 \u0627\u0633\u0645 \u0646\u06cc\u0632 \u0628\u0631\u0627\u06cc \u0622\u0646 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0631\u062f\u06cc\u062f\u060c \u062a\u0646\u0647\u0627 \u06a9\u0627\u0641\u06cc\u0633\u062a \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc animation-name\u060c \u0627\u0633\u0645 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0645\u0648\u0631\u062f \u0646\u0638\u0631\u062a\u0627\u0646 \u0631\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f. <\/span><\/p>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644 \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc \u062f\u06cc\u06af\u0631\u06cc \u0627\u0632 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0646\u06cc\u0632 \u0628\u0647 \u0646\u0627\u0645 animation-duration \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u06a9\u0647 \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u062f\u0631 \u0648\u0627\u0642\u0639 \u0645\u062f\u062a \u0632\u0645\u0627\u0646 \u0627\u0646\u062c\u0627\u0645 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 (\u0631\u0633\u06cc\u062f\u0646 \u0627\u0632 \u0646\u0642\u0637\u0647 \u06cc \u0627\u0648\u0644 \u062a\u0639\u0631\u06cc\u0641 \u062a\u0627 \u0646\u0642\u0637\u0647 \u06cc \u067e\u0627\u06cc\u0627\u0646\u06cc) \u0631\u0627 \u0645\u0634\u062e\u0635 \u0645\u06cc \u06a9\u0646\u062f. \u0627\u06cc\u0646 \u0632\u0645\u0627\u0646 \u0628\u0631 \u0627\u0633\u0627\u0633 \u062b\u0627\u0646\u06cc\u0647 \u0645\u06cc \u0628\u0627\u0634\u062f \u0648 \u0646\u06cc\u0627\u0632 \u0627\u0633\u062a \u062d\u062a\u0645\u0627 s \u06a9\u0647 \u0628\u0647 \u0645\u0639\u0646\u0627\u06cc \u062b\u0627\u0646\u06cc\u0647 \u0645\u06cc \u0628\u0627\u0634\u062f \u0646\u06cc\u0632 \u0628\u0639\u062f \u0627\u0632 \u0645\u0634\u062e\u0635 \u06a9\u0631\u062f\u0646 \u0645\u0642\u062f\u0627\u0631 \u0622\u0646 \u0622\u0648\u0631\u062f\u0647 \u0634\u0648\u062f.<\/span><\/p>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">&#8221; \u062a\u0648\u062c\u0647 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0646\u0642\u0637\u0647 \u06cc \u0634\u0631\u0648\u0639 \u0627\u0648\u0644\u06cc\u0647 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0628\u0647\u062a\u0631 \u0645\u06cc \u0628\u0627\u0634\u062f \u062a\u0627 \u0628\u0627 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0627\u0644\u0645\u0627\u0646 \u062f\u0627\u0631\u062f \u0645\u0634\u0627\u0628\u0647 \u0628\u0627\u0634\u062f\u060c \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644 \u062f\u0631 \u0635\u0648\u0631\u062a\u06cc \u06a9\u0647 \u062f\u0631 css \u0627\u0644\u0645\u0627\u0646 \u0645\u0648\u0631\u062f \u0646\u0638\u0631\u060c \u0631\u0646\u06af \u067e\u0634\u062a \u0632\u0645\u06cc\u0646\u0647 \u0642\u0631\u0645\u0632 \u0645\u06cc \u0628\u0627\u0634\u062f\u060c \u0627\u06af\u0631 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u06cc \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0642\u0631\u0627\u0631 \u0645\u06cc \u062f\u0647\u06cc\u062f \u06a9\u0647 \u0631\u0646\u06af \u067e\u0634\u062a \u0632\u0645\u06cc\u0646\u0647 \u0631\u0627 \u0639\u0648\u0636 \u0645\u06cc \u06a9\u0646\u062f\u060c \u062f\u0631 \u0646\u0642\u0637\u0647 \u06cc \u0634\u0631\u0648\u0639 \u0628\u0647\u062a\u0631 \u0645\u06cc \u0628\u0627\u0634\u062f \u06a9\u0647 \u0645\u0642\u062f\u0627\u0631 \u0622\u0646 \u0628\u0627 \u0645\u0642\u062f\u0627\u0631 \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u062f\u0631 css \u0627\u0644\u0645\u0627\u0646 \u06cc\u06a9\u06cc \u0628\u0627\u0634\u062f. &#8220;<\/span><\/p>\n\n\n<div class=\"jet-listing-grid--50192\" style=\"\"><section class=\"zht-related-post\" itemscope=\"\" itemtype=\"https:\/\/schema.org\/Article\" role=\"region\"\n  aria-label=\"Related article\">\n  <div class=\"zht-related-post-section-label\">\n    \u0645\u0637\u0627\u0644\u0628 \u0645\u0631\u062a\u0628\u0637\n  <\/div>\n  <img decoding=\"async\" width=\"300\" height=\"172\" data-src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/05\/learn-how-to-style-web-pages-with-css-300x172.jpg.webp\" class=\"attachment-medium size-medium wp-post-image lazyload\" alt=\"\u0622\u0645\u0648\u0632\u0634 \u0627\u0633\u062a\u0627\u06cc\u0644 \u062f\u0647\u06cc \u0628\u0647 \u0635\u0641\u062d\u0627\u062a \u0648\u0628 \u0628\u0627 CSS\u2013 \u0642\u0633\u0645\u062a \u0635\u0641\u0631\" data-srcset=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/05\/learn-how-to-style-web-pages-with-css-300x172.jpg.webp 300w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/05\/learn-how-to-style-web-pages-with-css-768x441.jpg.webp 768w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2020\/05\/learn-how-to-style-web-pages-with-css.jpg 1000w\" data-sizes=\"(max-width: 300px) 100vw, 300px\" title=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 300px; --smush-placeholder-aspect-ratio: 300\/172;\">\n  <a href=\"https:\/\/maktabkhooneh.org\/mag\/learn-how-to-style-web-pages-with-css\/\" class=\"zht-related-post-title\"\n    itemprop=\"headline\" target=\"_blank\">\u0622\u0645\u0648\u0632\u0634 \u0627\u0633\u062a\u0627\u06cc\u0644 \u062f\u0647\u06cc \u0628\u0647 \u0635\u0641\u062d\u0627\u062a \u0648\u0628 \u0628\u0627 CSS\u2013 \u0642\u0633\u0645\u062a \u0635\u0641\u0631<\/a>\n<\/section><\/div>\n\n\n<h4 class=\"wp-block-heading\"><span style=\"color: #000000; font-size: 16px;\">\u062a\u0639\u0631\u06cc\u0641 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 <\/span><\/h4>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062d\u0627\u0644 \u062f\u0631 \u0645\u062b\u0627\u0644\u06cc \u062f\u06cc\u06af\u0631 \u0642\u0635\u062f \u062f\u0627\u0631\u06cc\u0645 \u062a\u0627 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0628\u06cc\u0634\u062a\u0631\u06cc \u0631\u0627 \u0628\u0647 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u062a\u0639\u0631\u06cc\u0641\u06cc \u062e\u0648\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645. \u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u0628\u0647 \u06f5 \u0642\u0633\u0645\u062a \u062a\u0642\u0633\u06cc\u0645 \u0634\u062f\u0647 \u0627\u0633\u062a \u06a9\u0647 \u0647\u0631 \u0642\u0633\u0645\u062a \u0631\u0646\u06af \u067e\u0634\u062a \u0632\u0645\u06cc\u0646\u0647 \u0645\u062a\u0641\u0627\u0648\u062a\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u0644\u0645\u0627\u0646 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f. \u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0647\u0631 \u062f\u0631\u0635\u062f\u06cc \u0631\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f \u0648\u0644\u06cc \u062a\u0648\u062c\u0647 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0628\u0627 \u062a\u0648\u062c\u0647 \u0628\u0647 \u0632\u0645\u0627\u0646 \u062f\u0631 \u0635\u0648\u0631\u062a\u06cc \u06a9\u0647 \u0632\u0645\u0627\u0646 \u06a9\u0645\u06cc \u0628\u0647 \u0622\u0646 \u0627\u062e\u062a\u0635\u0627\u0635 \u067e\u06cc\u062f\u0627 \u06a9\u0646\u062f (\u0628\u0631 \u0627\u0633\u0627\u0633 \u062f\u0631\u0635\u062f\u06cc \u06a9\u0647 \u0645\u0634\u062e\u0635 \u0645\u06cc \u06a9\u0646\u06cc\u062f) \u0633\u0631\u0639\u062a \u0627\u0646\u062c\u0627\u0645 \u0622\u0646 \u0646\u06cc\u0632 \u0627\u0641\u0632\u0627\u06cc\u0634 \u067e\u06cc\u062f\u0627 \u0645\u06cc \u06a9\u0646\u062f.<\/span><\/p>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062f\u0631 \u0645\u062b\u0627\u0644 \u0628\u0647 \u062f\u0644\u06cc\u0644 \u0627\u06cc\u0646\u06a9\u0647 \u06a9\u0644 \u0645\u062f\u062a \u0632\u0645\u0627\u0646 \u0627\u0646\u062c\u0627\u0645 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u06f4 \u062b\u0627\u0646\u06cc\u0647 \u0645\u06cc \u0628\u0627\u0634\u062f \u0648 \u06f2\u06f5% \u0628\u0647 \u0647\u0631 \u0642\u0633\u0645\u062a \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0627\u062e\u062a\u0635\u0627\u0635 \u067e\u06cc\u062f\u0627 \u06a9\u0631\u062f\u0647 \u0627\u0633\u062a\u060c \u067e\u0633 \u0628\u0631\u0627\u06cc \u0647\u0631 \u0642\u0633\u0645\u062a \u06f1 \u062b\u0627\u0646\u06cc\u0647 \u0627\u062e\u062a\u0635\u0627\u0635 \u067e\u06cc\u062f\u0627 \u0645\u06cc \u06a9\u0646\u062f. \u062f\u0631 \u0648\u0627\u0642\u0639 \u0646\u06a9\u062a\u0647 \u0627\u06cc \u06a9\u0647 \u0628\u0627\u06cc\u062f \u062a\u0648\u062c\u0647 \u06a9\u0646\u06cc\u062f \u0627\u06cc\u0646 \u0645\u06cc \u0628\u0627\u0634\u062f \u06a9\u0647 \u062f\u0631\u0633\u062a \u0627\u0633\u062a \u06a9\u0647 \u062f\u0631 \u062a\u0639\u0631\u06cc\u0641 \u0645\u0627 \u06f5 \u0642\u0633\u0645\u062a \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u062f\u0627\u0631\u06cc\u0645 \u0627\u0645\u0627 \u0642\u0633\u0645\u062a \u0627\u0648\u0644 \u06a9\u0647 \u0627\u0632 \u0635\u0641\u0631 \u062f\u0631\u0635\u062f \u0622\u063a\u0627\u0632 \u0645\u06cc \u0634\u0648\u062f \u062f\u0631 \u0648\u0627\u0642\u0639 \u0635\u0631\u0641\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0627\u0648\u0644\u06cc\u0647 \u0628\u0631\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u0645\u06cc \u0628\u0627\u0634\u062f. <\/span><\/p>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062f\u0631 \u062b\u0627\u0646\u06cc\u0647 \u06cc \u0627\u0648\u0644 \u0631\u0646\u06af \u067e\u0634\u062a \u0632\u0645\u06cc\u0646\u0647 \u0627\u0632 \u0642\u0631\u0645\u0632 \u0628\u0647 \u0632\u0631\u062f \u062f\u0631 \u062e\u0648\u0627\u0647\u062f \u0622\u0645\u062f. \u062f\u0631 \u062b\u0627\u0646\u06cc\u0647 \u062f\u0648\u0645\u060c \u0627\u0632 \u0632\u0631\u062f \u0628\u0647 \u0622\u0628\u06cc \u0648 \u062f\u0631 \u062b\u0627\u0646\u06cc\u0647 \u0633\u0648\u0645 \u0627\u0632 \u0622\u0628\u06cc \u0628\u0647 \u0635\u0648\u0631\u062a\u06cc \u0648 \u062f\u0631 \u062b\u0627\u0646\u06cc\u0647 \u0686\u0647\u0627\u0631\u0645 \u0648 \u0622\u062e\u0631 \u0627\u0632 \u0635\u0648\u0631\u062a\u06cc \u0628\u0647 \u0633\u0628\u0632 \u062a\u0628\u062f\u06cc\u0644 \u0645\u06cc \u0634\u0648\u062f. \u067e\u0633 \u0627\u0632 \u067e\u0627\u06cc\u0627\u0646 \u06f4 \u062b\u0627\u0646\u06cc\u0647\u060c \u062f\u0648\u0628\u0627\u0631\u0647 \u0631\u0646\u06af \u067e\u0634\u062a \u0632\u0645\u06cc\u0646\u0647 \u0628\u0647 \u0631\u0646\u06af \u0627\u0648\u0644\u06cc\u0647 \u0622\u0646 \u06a9\u0647 \u0642\u0631\u0645\u0632 \u0627\u0633\u062a \u062f\u0631 \u062e\u0648\u0627\u0647\u062f \u0622\u0645\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;style&gt;\n      div {\n        width: 100px;\n        height: 100px;\n        background-color: red;\n        animation-name: example;\n        animation-duration: 4s;\n      }\n\n      @keyframes example {\n        \u06f0% {\n          background-color: red;\n        }\n        \u06f2\u06f5% {\n          background-color: yellow;\n        }\n        \u06f5\u06f0% {\n          background-color: blue;\n        }\n        \u06f7\u06f5% {\n          background-color: pink;\n        }\n        \u06f1\u06f0\u06f0% {\n          background-color: green;\n        }\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;p&gt;\n      &lt;b&gt;Note:&lt;\/b&gt; This example does not work in Internet Explorer 9 and earlier\n      versions.\n    &lt;\/p&gt;\n\n    &lt;div&gt;&lt;\/div&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/span><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"color: #000000; font-size: 16px;\">\u0648\u06cc\u0698\u06af\u06cc animation<\/span><\/h3>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0648\u06cc\u0698\u06af\u06cc \u0628\u0639\u062f \u062f\u0631 animation\u060c \u0627\u06cc\u062c\u0627\u062f \u062a\u0627\u062e\u06cc\u0631 \u062f\u0631 \u0634\u0631\u0648\u0639 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0645\u06cc \u0628\u0627\u0634\u062f\u060c \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc animation-delay \u0646\u0627\u0645 \u062f\u0627\u0631\u062f. \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0646\u06cc\u0632 \u0647\u0645\u0686\u0648\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0645\u062f\u062a \u0632\u0645\u0627\u0646 \u0627\u0646\u062c\u0627\u0645 \u0646\u0645\u0627\u06cc\u0634\u060c \u0628\u0631 \u062d\u0633\u0628 \u062b\u0627\u0646\u06cc\u0647 \u0645\u0642\u062f\u0627\u0631 \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u062f. \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u06cc\u06a9 \u062a\u0627\u062e\u06cc\u0631 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f. \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0645\u0642\u062f\u0627\u0631 \u0645\u0646\u0641\u06cc \u0646\u06cc\u0632 \u0628\u06af\u06cc\u0631\u062f \u06a9\u0647 \u0627\u06cc\u0646 \u0628\u062f\u06cc\u0646 \u0645\u0639\u0646\u0627 \u0645\u06cc \u0628\u0627\u0634\u062f \u06a9\u0647 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0627\u0632 \u0645\u0642\u062f\u0627\u0631 animation-delay\u060c \u0634\u0631\u0648\u0639 \u0645\u06cc \u0634\u0648\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644\u060c \u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u062a\u063a\u06cc\u06cc\u0631 \u0631\u0646\u06af \u067e\u0634\u062a \u0632\u0645\u06cc\u0646\u0647 \u06cc \u0627\u0644\u0645\u0627\u0646\u060c \u0645\u06a9\u0627\u0646 \u0622\u0646 \u0646\u06cc\u0632 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;style&gt;\n      div {\n        width: 100px;\n        height: 100px;\n        background-color: red;\n        position: relative;\n        animation-name: example;\n        animation-duration: 4s;\n        animation-delay: 2s;\n      }\n\n      @keyframes example {\n        \u06f0% {\n          background-color: red;\n          left: 0px;\n          top: 0px;\n        }\n        \u06f2\u06f5% {\n          background-color: yellow;\n          left: 200px;\n          top: 0px;\n        }\n        \u06f5\u06f0% {\n          background-color: blue;\n          left: 200px;\n          top: 200px;\n        }\n        \u06f7\u06f5% {\n          background-color: green;\n          left: 0px;\n          top: 200px;\n        }\n        \u06f1\u06f0\u06f0% {\n          background-color: red;\n          left: 0px;\n          top: 0px;\n        }\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;p&gt;\n      &lt;b&gt;Note:&lt;\/b&gt; This example does not work in Internet Explorer 9 and earlier\n      versions.\n    &lt;\/p&gt;\n\n    &lt;div&gt;&lt;\/div&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/span><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"color: #000000; font-size: 16px;\">animation-iteration-count<\/span><\/h3>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0648\u06cc\u0698\u06af\u06cc \u062f\u06cc\u06af\u0631\u06cc \u06a9\u0647 \u0628\u0647 \u0622\u0646 \u0645\u06cc\u067e\u0631\u062f\u0627\u0632\u06cc\u0645\u060c \u062a\u0639\u062f\u0627\u062f \u062f\u0641\u0639\u0627\u062a \u062a\u06a9\u0631\u0627\u0631 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0645\u06cc \u0628\u0627\u0634\u062f. \u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u06cc\u06a9 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0631\u0627 \u062a\u0627 \u0628\u06cc \u0646\u0647\u0627\u06cc\u062a \u0648 \u06cc\u0627 \u062a\u0627 \u062a\u0639\u062f\u0627\u062f \u0645\u0634\u062e\u0635 \u062a\u06a9\u0631\u0627\u0631 \u06a9\u0646\u06cc\u062f. \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc animation-iteration-count \u0646\u0627\u0645 \u062f\u0627\u0631\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;style&gt;\n      div {\n        width: 100px;\n        height: 100px;\n        background-color: red;\n        position: relative;\n        animation-name: example;\n        animation-duration: 4s;\n        animation-iteration-count: 3;\n      }\n\n      @keyframes example {\n        \u06f0% {\n          background-color: red;\n          left: 0px;\n          top: 0px;\n        }\n        \u06f2\u06f5% {\n          background-color: yellow;\n          left: 200px;\n          top: 0px;\n        }\n        \u06f5\u06f0% {\n          background-color: blue;\n          left: 200px;\n          top: 200px;\n        }\n        \u06f7\u06f5% {\n          background-color: green;\n          left: 0px;\n          top: 200px;\n        }\n        \u06f1\u06f0\u06f0% {\n          background-color: red;\n          left: 0px;\n          top: 0px;\n        }\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;p&gt;\n      &lt;b&gt;Note:&lt;\/b&gt; This example does not work in Internet Explorer 9 and earlier\n      versions.\n    &lt;\/p&gt;\n\n    &lt;div&gt;&lt;\/div&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u062a\u0627 \u0628\u06cc\u0646\u0647\u0627\u06cc\u062a \u062a\u06a9\u0631\u0627\u0631 \u0634\u0648\u062f\u060c \u062a\u0646\u0647\u0627 \u06a9\u0627\u0641\u06cc\u0633\u062a \u0645\u0642\u062f\u0627\u0631 \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0631\u0627 infinite \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"color: #000000; font-size: 16px;\">\u0648\u06cc\u0698\u06af\u06cc animation-direction <strong>\u0627\u06cc\u062c\u0627\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u062f\u0631 css<\/strong><\/span><\/h3>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0648\u06cc\u0698\u06af\u06cc \u0628\u0639\u062f \u062c\u0647\u062a \u0627\u0646\u062c\u0627\u0645 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0631\u0627 \u0645\u0634\u062e\u0635 \u0645\u06cc \u06a9\u0646\u062f. \u0628\u062f\u06cc\u0646 \u0635\u0648\u0631\u062a \u06a9\u0647 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u0627\u0632 \u0627\u0628\u062a\u062f\u0627 \u0628\u0647 \u0627\u0646\u062a\u0647\u0627 \u067e\u06cc\u0634 \u0628\u0631\u0648\u062f \u0648 \u06cc\u0627 \u0627\u0632 \u0627\u0646\u062a\u0647\u0627 \u0628\u0647 \u0627\u0628\u062a\u062f\u0627. \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0627\u0631 \u0646\u06cc\u0627\u0632 \u0627\u0633\u062a \u062a\u0627 \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc animation-direction \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0686\u0647\u0627\u0631 \u0645\u0642\u062f\u0627\u0631 \u062f\u0627\u0631\u062f:<\/span><\/p>\n\n\n<div class=\"jet-listing-grid--50192\" style=\"\"><section class=\"zht-related-post\" itemscope=\"\" itemtype=\"https:\/\/schema.org\/Article\" role=\"region\"\n  aria-label=\"Related article\">\n  <div class=\"zht-related-post-section-label\">\n    \u0645\u0637\u0627\u0644\u0628 \u0645\u0631\u062a\u0628\u0637\n  <\/div>\n  <img decoding=\"async\" width=\"300\" height=\"150\" data-src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/04\/html-hpg-featured-new-300x150.jpg.webp\" class=\"attachment-medium size-medium wp-post-image lazyload\" alt=\"\u0622\u0645\u0648\u0632\u0634 HTML \u0628\u0647 \u0632\u0628\u0627\u0646 \u0633\u0627\u062f\u0647 \u2013 \u0642\u0633\u0645\u062a \u062f\u0648\u0645\" data-srcset=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/04\/html-hpg-featured-new-300x150.jpg.webp 300w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/04\/html-hpg-featured-new-768x384.jpg.webp 768w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2020\/04\/html-hpg-featured-new.jpg 1000w\" data-sizes=\"(max-width: 300px) 100vw, 300px\" title=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 300px; --smush-placeholder-aspect-ratio: 300\/150;\">\n  <a href=\"https:\/\/maktabkhooneh.org\/mag\/learning-basic-html\/\" class=\"zht-related-post-title\"\n    itemprop=\"headline\" target=\"_blank\">\u0622\u0645\u0648\u0632\u0634 HTML \u0628\u0647 \u0632\u0628\u0627\u0646 \u0633\u0627\u062f\u0647 \u2013 \u0642\u0633\u0645\u062a \u062f\u0648\u0645<\/a>\n<\/section><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"color: #000000; font-size: 16px;\">Normal: \u06a9\u0647 \u062d\u0627\u0644\u062a \u067e\u06cc\u0634 \u0641\u0631\u0636 \u0645\u06cc \u0628\u0627\u0634\u062f \u0648 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0627\u0632 \u0627\u0628\u062a\u062f\u0627 \u062a\u0627 \u0627\u0646\u062a\u0647\u0627 \u0627\u062c\u0631\u0627 \u0645\u06cc \u0634\u0648\u062f.<\/span><\/li>\n\n\n\n<li><span style=\"color: #000000; font-size: 16px;\">Reverse: \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0645\u0648\u062c\u0628 \u0645\u06cc \u0634\u0648\u062f \u062a\u0627 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0627\u0632 \u0627\u0646\u062a\u0647\u0627 \u0628\u0647 \u0627\u0628\u062a\u062f\u0627 \u0627\u062c\u0631\u0627 \u0634\u0648\u062f.<\/span><\/li>\n\n\n\n<li><span style=\"color: #000000; font-size: 16px;\">Alternate: \u062f\u0631 \u0627\u06cc\u0646 \u062d\u0627\u0644\u062a \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u06cc\u06a9 \u062f\u0648\u0631 \u0627\u0632 \u0627\u0628\u062a\u062f\u0627 \u0628\u0647 \u0627\u0646\u062a\u0647\u0627 \u0645\u06cc \u0631\u0648\u062f \u0648 \u0633\u067e\u0633 \u0627\u0632 \u0627\u0646\u062a\u0647\u0627 \u0628\u0647 \u0627\u0628\u062a\u062f\u0627 \u0628\u0627\u0632 \u0645\u06cc\u06af\u0631\u062f\u062f. \u062f\u0631 \u0648\u0627\u0642\u0639 \u06cc\u06a9 \u062d\u0631\u06a9\u062a \u0628\u0631\u06af\u0634\u062a\u06cc \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u062f.<\/span><\/li>\n\n\n\n<li><span style=\"color: #000000; font-size: 16px;\">Alternate-reverse: \u062f\u0631 \u0627\u06cc\u0646 \u062d\u0627\u0644\u062a \u062d\u0631\u06a9\u062a \u0628\u0631\u06af\u0634\u062a\u06cc \u06a9\u0647 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0627\u062c\u0631\u0627 \u0645\u06cc \u06a9\u0646\u062f\u060c \u062f\u0631 \u0645\u0631\u062d\u0644\u0647 \u0627\u0648\u0644 \u0627\u0632 \u0627\u0646\u062a\u0647\u0627 \u0628\u0647 \u0627\u0628\u062a\u062f\u0627 \u0645\u06cc \u0631\u0648\u062f \u0648 \u0633\u067e\u0633 \u0627\u0632 \u0627\u0628\u062a\u062f\u0627 \u0628\u0647 \u0627\u0646\u062a\u0647\u0627 \u0645\u06cc \u0631\u0648\u062f.<\/span><\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;style&gt;\n      div {\n        width: 100px;\n        height: 100px;\n        background-color: red;\n        position: relative;\n        animation-name: example;\n        animation-duration: 4s;\n        animation-direction: reverse;\n      }\n\n      @keyframes example {\n        \u06f0% {\n          background-color: red;\n          left: 0px;\n          top: 0px;\n        }\n        \u06f2\u06f5% {\n          background-color: yellow;\n          left: 200px;\n          top: 0px;\n        }\n        \u06f5\u06f0% {\n          background-color: blue;\n          left: 200px;\n          top: 200px;\n        }\n        \u06f7\u06f5% {\n          background-color: green;\n          left: 0px;\n          top: 200px;\n        }\n        \u06f1\u06f0\u06f0% {\n          background-color: red;\n          left: 0px;\n          top: 0px;\n        }\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;p&gt;\n      &lt;b&gt;Note:&lt;\/b&gt; This example does not work in Internet Explorer 9 and earlier\n      versions.\n    &lt;\/p&gt;\n\n    &lt;div&gt;&lt;\/div&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/span><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"color: #000000; font-size: 16px;\">\u0648\u06cc\u0698\u06af\u06cc animation-timing-function<\/span><\/h3>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0648\u06cc\u0698\u06af\u06cc \u0628\u0639\u062f\u06cc \u0628\u0631\u0627\u06cc \u0645\u0634\u062e\u0635 \u0646\u0645\u0648\u062f\u0646 \u0633\u0631\u0639\u062a \u0627\u062c\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062f\u0631 \u0645\u062f\u062a \u0632\u0645\u0627\u0646 \u0627\u062c\u0631\u0627\u06cc \u0622\u0646 \u0645\u06cc \u0628\u0627\u0634\u062f. \u062f\u0631 \u062d\u0627\u0644\u062a \u067e\u06cc\u0634 \u0641\u0631\u0636 \u0627\u06cc\u0646 \u0627\u062c\u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u062e\u0637\u06cc \u0645\u06cc \u0628\u0627\u0634\u062f \u0648 \u0628\u0627 \u0633\u0631\u0639\u062a \u06cc\u06a9\u0633\u0627\u0646 \u062f\u0631 \u06a9\u0644 \u0645\u062f\u062a \u0632\u0645\u0627\u0646 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0627\u062c\u0631\u0627 \u0635\u0648\u0631\u062a \u0645\u06cc \u06af\u06cc\u0631\u062f. \u0627\u0645\u0627 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u062a\u0627 \u0634\u0645\u0627 \u0633\u0631\u0639\u062a \u0627\u0648\u0644\u06cc\u0647 \u0627\u062c\u0631\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0631\u0627 \u0628\u0627\u0644\u0627 \u0628\u0628\u0631\u06cc\u062f \u0648 \u0627\u0646\u062a\u0647\u0627\u06cc \u0622\u0646 \u0631\u0627 \u06a9\u0627\u0647\u0634 \u062f\u0647\u06cc\u062f. \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc animation-timing-function \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0628\u0627\u06cc\u062f \u06a9\u0631\u062f. \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0645\u0642\u0627\u062f\u06cc\u0631 \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u062f:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"color: #000000; font-size: 16px;\">Linear: \u062d\u0627\u0644\u062a \u062e\u0637\u06cc \u0648 \u067e\u06cc\u0634 \u0641\u0631\u0636 \u0645\u06cc \u0628\u0627\u0634\u062f \u06a9\u0647 \u062a\u0645\u0627\u0645 \u0645\u062f\u062a \u0632\u0645\u0627\u0646 \u0627\u062c\u0631\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0628\u0627 \u0633\u0631\u0639\u062a \u06cc\u06a9\u0633\u0627\u0646 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u06af\u06cc\u0631\u062f.<\/span><\/li>\n\n\n\n<li><span style=\"color: #000000; font-size: 16px;\">Ease: \u062f\u0631 \u0627\u0628\u062a\u062f\u0627 \u0633\u0631\u0639\u062a \u0622\u0646 \u0632\u06cc\u0627\u062f \u0645\u06cc \u0628\u0627\u0634\u062f \u0648 \u0628\u0647 \u0645\u0631\u0648\u0631 \u0633\u0631\u0639\u062a \u0622\u0646 \u06a9\u0627\u0647\u0634 \u0645\u06cc \u06cc\u0627\u0628\u062f.<\/span><\/li>\n\n\n\n<li><span style=\"color: #000000; font-size: 16px;\">Ease-in: \u0628\u0647 \u0645\u0631\u0648\u0631 \u0633\u0631\u0639\u062a \u0622\u0646 \u0627\u0641\u0632\u0627\u06cc\u0634 \u067e\u06cc\u062f\u0627 \u0645\u06cc \u06a9\u0646\u062f.<\/span><\/li>\n\n\n\n<li><span style=\"color: #000000; font-size: 16px;\">Ease-out: \u0633\u0631\u0639\u062a \u0622\u0646 \u0628\u0647 \u0645\u0631\u0648\u0631 \u06a9\u0627\u0647\u0634 \u067e\u06cc\u062f\u0627 \u0645\u06cc \u06a9\u0646\u062f.<\/span><\/li>\n\n\n\n<li><span style=\"color: #000000; font-size: 16px;\">Ease-in-out: \u0633\u0631\u0639\u062a \u0622\u0646 \u062a\u0627 \u0648\u0633\u0637 \u0632\u0645\u0627\u0646 \u0627\u062c\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u0627\u0641\u0632\u0627\u06cc\u0634 \u067e\u06cc\u062f\u0627 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0633\u067e\u0633 \u0627\u0632 \u0648\u0633\u0637 \u062a\u0627 \u0627\u0646\u062a\u0647\u0627 \u0633\u0631\u0639\u062a \u0622\u0646 \u06a9\u0627\u0647\u0634 \u067e\u06cc\u062f\u0627 \u0645\u06cc \u06a9\u0646\u062f.<\/span><\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;style&gt;\n      div {\n        width: 100px;\n        height: 50px;\n        background-color: red;\n        font-weight: bold;\n        position: relative;\n        animation: mymove 5s infinite;\n      }\n\n      #div1 {\n        animation-timing-function: linear;\n      }\n      #div2 {\n        animation-timing-function: ease;\n      }\n      #div3 {\n        animation-timing-function: ease-in;\n      }\n      #div4 {\n        animation-timing-function: ease-out;\n      }\n      #div5 {\n        animation-timing-function: ease-in-out;\n      }\n\n      @keyframes mymove {\n        from {\n          left: 0px;\n        }\n        to {\n          left: 300px;\n        }\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;p&gt;\n      &lt;strong&gt;Note:&lt;\/strong&gt; The animation-timing-funtion property is not\n      supported in Internet Explorer 9 and earlier versions.\n    &lt;\/p&gt;\n\n    &lt;div id=\"div1\"&gt;linear&lt;\/div&gt;\n    &lt;div id=\"div2\"&gt;ease&lt;\/div&gt;\n    &lt;div id=\"div3\"&gt;ease-in&lt;\/div&gt;\n    &lt;div id=\"div4\"&gt;ease-out&lt;\/div&gt;\n    &lt;div id=\"div5\"&gt;ease-in-out&lt;\/div&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/span><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"color: #000000; font-size: 16px;\">animation-fill-mode<\/span><\/h3>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0648\u06cc\u0698\u06af\u06cc \u0628\u0639\u062f\u06cc \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062f\u0631 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627 animation-fill-mode \u0645\u06cc \u0628\u0627\u0634\u062f. \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u062f\u0631 \u0648\u0627\u0642\u0639 \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0645\u06cc \u0628\u0627\u0634\u062f \u06a9\u0647 \u0627\u0644\u0645\u0627\u0646 \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0628\u0631\u0627\u06cc \u0627\u0628\u062a\u062f\u0627 \u0627\u062c\u0631\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0648 \u06cc\u0627 \u0627\u0646\u062a\u0647\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0631\u0627 \u062d\u0641\u0638 \u06a9\u0646\u062f \u0648 \u0622\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627 \u0631\u0627 \u062f\u0627\u0631\u0627 \u0628\u0627\u0634\u062f. \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u06f4 \u0645\u0642\u062f\u0627\u0631 \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u062f:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"color: #000000; font-size: 16px;\">None: \u062f\u0631 \u0627\u06cc\u0646 \u062d\u0627\u0644\u062a \u0627\u0644\u0645\u0627\u0646 \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u067e\u0633 \u0627\u0632 \u067e\u0627\u06cc\u0627\u0646 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u060c \u0628\u0647 \u0645\u0642\u0627\u062f\u06cc\u0631 \u0627\u0648\u0644\u06cc\u0647 \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0628\u0631\u0627\u06cc \u0622\u0646 \u0628\u0627\u0632 \u0645\u06cc \u06af\u0631\u062f\u062f.<\/span><\/li>\n\n\n\n<li><span style=\"color: #000000; font-size: 16px;\">Forwards: \u0627\u0644\u0645\u0627\u0646 \u0645\u0642\u0627\u062f\u06cc\u0631 \u0622\u062e\u0631\u06cc\u0646 \u0642\u0633\u0645\u062a \u0627\u0632 \u0627\u062c\u0631\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0631\u0627 \u067e\u06cc\u062f\u0627 \u0645\u06cc \u06a9\u0646\u062f. (\u0628\u0627 \u062a\u0648\u062c\u0647 \u0628\u0647 \u062c\u0647\u062a \u0627\u062c\u0631\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646)<\/span><\/li>\n\n\n\n<li><span style=\"color: #000000; font-size: 16px;\">Backwards: \u0627\u0644\u0645\u0627\u0646 \u0645\u0642\u0627\u062f\u06cc\u0631 \u0627\u0648\u0644\u06cc\u0646 \u0642\u0633\u0645\u062a \u0627\u0632 \u0627\u062c\u0631\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0631\u0627 \u067e\u06cc\u062f\u0627 \u0645\u06cc \u06a9\u0646\u062f. (\u0628\u0627 \u062a\u0648\u062c\u0647 \u0628\u0647 \u062c\u0647\u062a \u0627\u062c\u0631\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646)<\/span><\/li>\n\n\n\n<li><span style=\"color: #000000; font-size: 16px;\">Both: \u0647\u0631 \u062f\u0648 \u0642\u0627\u0646\u0648\u0646 forwards \u0648 backwards \u0631\u0627 \u067e\u06cc\u0631\u0648\u06cc \u0645\u06cc \u06a9\u0646\u062f \u0648 \u062a\u0631\u06a9\u06cc\u0628\u06cc \u0627\u0632 \u0647\u0631 \u062f\u0648 \u0645\u0642\u062f\u0627\u0631 \u0635\u0648\u0631\u062a \u0645\u06cc \u06af\u06cc\u0631\u062f.<\/span><\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;style&gt;\n      div {\n        width: 100px;\n        height: 100px;\n        background: red;\n        position: relative;\n        animation-name: example;\n        animation-duration: 3s;\n        animation-fill-mode: forwards;\n      }\n\n      @keyframes example {\n        from {\n          top: 0px;\n        }\n        to {\n          top: 200px;\n          background-color: blue;\n        }\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;p&gt;\n      Let the div element retain the style values from the last keyframe when\n      the animation ends:\n    &lt;\/p&gt;\n\n    &lt;div&gt;&lt;\/div&gt;\n\n    &lt;p&gt;\n      &lt;strong&gt;Note:&lt;\/strong&gt; The animation-fill-mode property is not supported\n      in Internet Explorer 9 and earlier versions.\n    &lt;\/p&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/span><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-size: 16px;\"><span style=\"color: #000000;\">\u0646\u062d\u0648\u0647 \u06cc \u062e\u0644\u0627\u0635\u0647 \u0646\u0648\u06cc\u0633\u06cc <\/span><span style=\"color: #000000;\">\u0628\u0631\u0627\u06cc <strong>\u0627\u06cc\u062c\u0627\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u062f\u0631 css<\/strong><\/span><\/span><\/h3>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062f\u0631 \u0622\u062e\u0631\u06cc\u0646 \u0645\u0648\u0631\u062f \u0627\u0632 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627 \u0647\u0645 \u0646\u062d\u0648\u0647 \u06cc \u062e\u0644\u0627\u0635\u0647 \u0646\u0648\u06cc\u0633\u06cc \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0631\u0627 \u062e\u0648\u0627\u0647\u0645 \u06af\u0641\u062a. \u0628\u0631\u0627\u06cc \u062e\u0644\u0627\u0635\u0647 \u0646\u0648\u06cc\u0633\u06cc \u0648\u06cc\u0698\u06af\u06cc \u06cc\u06a9 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0628\u0647 \u062a\u0631\u062a\u06cc\u0628 \u0646\u06cc\u0627\u0632 \u0627\u0633\u062a \u062a\u0627 \u0627\u0633\u0645 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u060c \u0645\u062f\u062a \u0632\u0645\u0627\u0646 \u0627\u062c\u0631\u0627\u06cc \u0622\u0646\u060c \u0633\u0631\u0639\u062a \u0627\u0646\u062c\u0627\u0645 \u0622\u0646\u060c \u062a\u0627\u062e\u06cc\u0631 \u0632\u0645\u0627\u0646\u06cc \u0627\u062c\u0631\u0627\u06cc \u0622\u0646\u060c \u062a\u0639\u062f\u0627\u062f \u062f\u0641\u0639\u0627\u062a \u062a\u06a9\u0631\u0627\u0631 \u0622\u0646 \u0648 \u062c\u0647\u062a \u0627\u062c\u0631\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0645\u06cc \u0628\u0627\u0634\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;style&gt; \ndiv {\n  width: 100px;\n  height: 100px;\n  background-color: red;\n  position: relative;\n  animation: myfirst 5s linear 2s infinite alternate;\n}\n\n@keyframes myfirst {\n  \u06f0%   {background-color:red; left:0px; top:0px;}\n  \u06f2\u06f5%  {background-color:yellow; left:200px; top:0px;}\n  \u06f5\u06f0%  {background-color:blue; left:200px; top:200px;}\n  \u06f7\u06f5%  {background-color:green; left:0px; top:200px;}\n  \u06f1\u06f0\u06f0% {background-color:red; left:0px; top:0px;}\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;p&gt;&lt;b&gt;Note:&lt;\/b&gt; This example does not work in Internet Explorer 9 and earlier versions.&lt;\/p&gt;\n\n&lt;div&gt;&lt;\/div&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/span><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"color: #000000; font-size: 16px;\">\u0648\u06cc\u0698\u06af\u06cc transform <\/span><\/h3>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0645\u0648\u0631\u062f \u0628\u0639\u062f\u06cc \u0645\u0648\u0631\u062f\u06cc \u0628\u0631\u0631\u0633\u06cc \u0648\u06cc\u0698\u06af\u06cc transform \u0645\u06cc \u0628\u0627\u0634\u062f. \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u062f\u0627\u0631\u0627\u06cc \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u062f\u0648 \u0628\u0639\u062f\u06cc \u0648 \u0633\u0647 \u0628\u0639\u062f\u06cc \u0645\u06cc \u0628\u0627\u0634\u062f. \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0628\u0647 \u0634\u0645\u0627 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0628\u062a\u0648\u0627\u0646\u06cc\u062f\u060c \u06cc\u06a9 \u0627\u0644\u0645\u0627\u0646 \u0631\u0627 \u062f\u0631 \u062c\u0647\u062a \u0645\u062d\u0648\u0631 \u0627\u0641\u0642\u06cc \u0648 \u06cc\u0627 \u0639\u0645\u0648\u062f\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u0627\u0646\u062f\u0627\u0632\u0647 \u0648 \u06cc\u0627 \u0645\u06a9\u0627\u0646 \u062f\u0647\u06cc\u062f \u0648 \u06cc\u0627 \u0628\u0631\u0627\u06cc \u0622\u0646 \u0686\u0631\u062e\u0634 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f. \u0628\u0631\u0627\u06cc \u062f\u0631\u06a9 \u0628\u0647\u062a\u0631 \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u06cc\u06a9 \u0645\u062b\u0627\u0644 \u0627\u0632 \u062a\u0631\u06a9\u06cc\u0628 \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0628\u0627 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0646\u06cc\u0632 \u0628\u0631\u0627\u06cc \u0634\u0645\u0627 \u0645\u06cc\u0632\u0646\u0645 \u062a\u0627 \u0628\u0647\u062a\u0631 \u0628\u0627 \u0646\u062d\u0648\u0647 \u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0622\u0634\u0646\u0627 \u0634\u0648\u06cc\u062f.<\/span><\/p>\n\n\n<div class=\"jet-listing-grid--50192\" style=\"\"><section class=\"zht-related-post\" itemscope=\"\" itemtype=\"https:\/\/schema.org\/Article\" role=\"region\"\n  aria-label=\"Related article\">\n  <div class=\"zht-related-post-section-label\">\n    \u0645\u0637\u0627\u0644\u0628 \u0645\u0631\u062a\u0628\u0637\n  <\/div>\n  <img decoding=\"async\" width=\"300\" height=\"169\" data-src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/04\/000-Semantic-HTML-300x169.jpg.webp\" class=\"attachment-medium size-medium wp-post-image lazyload\" alt=\"\u0622\u0645\u0648\u0632\u0634 HTML \u0628\u0647 \u0632\u0628\u0627\u0646 \u0633\u0627\u062f\u0647 \u2013 \u0642\u0633\u0645\u062a \u0633\u0648\u0645\" data-srcset=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/04\/000-Semantic-HTML-300x169.jpg.webp 300w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/04\/000-Semantic-HTML-768x432.jpg.webp 768w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2020\/04\/000-Semantic-HTML.jpg 1000w\" data-sizes=\"(max-width: 300px) 100vw, 300px\" title=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 300px; --smush-placeholder-aspect-ratio: 300\/169;\">\n  <a href=\"https:\/\/maktabkhooneh.org\/mag\/free-html-training\/\" class=\"zht-related-post-title\"\n    itemprop=\"headline\" target=\"_blank\">\u0622\u0645\u0648\u0632\u0634 HTML \u0628\u0647 \u0632\u0628\u0627\u0646 \u0633\u0627\u062f\u0647 \u2013 \u0642\u0633\u0645\u062a \u0633\u0648\u0645<\/a>\n<\/section><\/div>\n\n\n<p><span style=\"font-size: 16px;\">&nbsp;<\/span><br>\n<span style=\"color: #000000; font-size: 16px;\">\u0627\u0648\u0644\u06cc\u0646 \u0645\u0642\u062f\u0627\u0631 \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc translate() \u0645\u06cc \u0628\u0627\u0634\u062f\u060c \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u062f\u0631 \u0648\u0627\u0642\u0639 \u0645\u06a9\u0627\u0646 \u0627\u0644\u0645\u0627\u0646 \u0631\u0627 \u0646\u0633\u0628\u062a \u0628\u0647 \u0646\u0642\u0637\u0647 \u0627\u06cc \u062e\u0627\u0635 (\u06af\u0648\u0634\u0647 \u06cc \u0633\u0645\u062a \u0686\u067e \u0628\u0627\u0644\u0627\u06cc \u0627\u0644\u0645\u0627\u0646) \u062c\u0627\u0628\u0647 \u062c\u0627 \u0645\u06cc \u06a9\u0646\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;style&gt;\n      div {\n        width: 300px;\n        height: 100px;\n        background-color: yellow;\n        border: 1px solid black;\n        -ms-transform: translate(50px, 100px); \/* IE 9 *\/\n        transform: translate(50px, 100px); \/* Standard syntax *\/\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;h1&gt;The translate() Method&lt;\/h1&gt;\n    &lt;p&gt;The translate() method moves an element from its current position:&lt;\/p&gt;\n\n    &lt;div&gt;\n      This div element is moved 50 pixels to the right, and 100 pixels down from\n      its current position.\n    &lt;\/div&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/span><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-size: 16px;\"><span style=\"color: #000000;\">\u0648\u06cc\u0698\u06af\u06cc rotate() <\/span><span style=\"color: #000000;\">\u0628\u0631\u0627\u06cc <strong>\u0627\u06cc\u062c\u0627\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u062f\u0631 css<\/strong><\/span><\/span><\/h3>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0648\u06cc\u0698\u06af\u06cc \u0628\u0639\u062f\u06cc rotate() \u0645\u06cc \u0628\u0627\u0634\u062f. \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0645\u0642\u0627\u062f\u06cc\u0631 \u0645\u062b\u0628\u062a \u0648 \u0645\u0646\u0641\u06cc \u062f\u0631 \u0648\u0627\u062d\u062f \u062f\u0631\u062c\u0647 \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0645\u0642\u0627\u062f\u06cc\u0631 \u0645\u062b\u0628\u062a \u0627\u0644\u0645\u0627\u0646 \u0631\u0627 \u062f\u0631 \u062c\u0647\u062a \u0633\u0627\u0639\u062a \u06af\u0631\u062f \u0648 \u0645\u0642\u0627\u062f\u06cc\u0631 \u0645\u0646\u0641\u06cc \u062f\u0631 \u062c\u0647\u062a \u067e\u0627\u062f\u0633\u0627\u0639\u062a \u06af\u0631\u062f \u0627\u0644\u0645\u0627\u0646 \u0631\u0627 \u0645\u06cc \u0686\u0631\u062e\u0627\u0646\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;style&gt;\n      div {\n        width: 300px;\n        height: 100px;\n        background-color: yellow;\n        border: 1px solid black;\n      }\n\n      div#myDiv {\n        -ms-transform: rotate(20deg); \/* IE 9 *\/\n        transform: rotate(20deg); \/* Standard syntax *\/\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;h1&gt;The rotate() Method&lt;\/h1&gt;\n    &lt;p&gt;\n      The rotate() method rotates an element clockwise or counter-clockwise.\n    &lt;\/p&gt;\n\n    &lt;div&gt;\n      This a normal div element.\n    &lt;\/div&gt;\n\n    &lt;div id=\"myDiv\"&gt;\n      This div element is rotated clockwise 20 degrees.\n    &lt;\/div&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u062a\u0646\u0647\u0627 \u062f\u0631 \u062c\u0647\u062a \u0645\u062d\u0648\u0631 \u0627\u0641\u0642\u06cc \u0648 \u06cc\u0627 \u062f\u0631 \u062c\u0647\u062a \u0645\u062d\u0648\u0631 \u0639\u0645\u0648\u062f\u06cc \u0686\u0631\u062e\u0634 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f. \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0627\u0631 \u062a\u0646\u0647\u0627 \u06a9\u0627\u0641\u06cc\u0633\u062a \u0627\u0632 rotateX() \u062f\u0631 \u062c\u0647\u062a \u0645\u062d\u0648\u0631 \u0627\u0641\u0642\u06cc \u0648 \u06cc\u0627 \u0627\u0632 rotateY() \u062f\u0631 \u062c\u0647\u062a \u0645\u062d\u0648\u0631 \u0639\u0645\u0648\u062f\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/span><\/p>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062f\u0631 \u062c\u0647\u062a \u0645\u062d\u0648\u0631 \u0627\u0641\u0642\u06cc:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;style&gt;\n      div {\n        width: 300px;\n        height: 100px;\n        background-color: yellow;\n        border: 1px solid black;\n      }\n\n      #myDiv {\n        transform: rotateX(150deg);\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;h1&gt;The rotateX() Method&lt;\/h1&gt;\n    &lt;p&gt;\n      The rotateX() method rotates an element around its X-axis at a given\n      degree.\n    &lt;\/p&gt;\n\n    &lt;div&gt;\n      This a normal div element.\n    &lt;\/div&gt;\n\n    &lt;div id=\"myDiv\"&gt;\n      This div element is rotated 150 degrees.\n    &lt;\/div&gt;\n\n    &lt;p&gt;\n      &lt;b&gt;Note:&lt;\/b&gt; Internet Explorer 9 (and earlier versions) does not support\n      the rotateX() method.\n    &lt;\/p&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062f\u0631 \u062c\u0647\u062a \u0645\u062d\u0648\u0631 \u0639\u0645\u0648\u062f\u06cc:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;style&gt;\n      div {\n        width: 300px;\n        height: 100px;\n        background-color: yellow;\n        border: 1px solid black;\n      }\n\n      #myDiv {\n        transform: rotateY(150deg);\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;h1&gt;The rotateY() Method&lt;\/h1&gt;\n    &lt;p&gt;\n      The rotateY() method rotates an element around its Y-axis at a given\n      degree.\n    &lt;\/p&gt;\n\n    &lt;div&gt;\n      This a normal div element.\n    &lt;\/div&gt;\n\n    &lt;div id=\"myDiv\"&gt;\n      This div element is rotated 150 degrees.\n    &lt;\/div&gt;\n\n    &lt;p&gt;\n      &lt;b&gt;Note:&lt;\/b&gt; Internet Explorer 9 (and earlier versions) does not support\n      the rotateY() method.\n    &lt;\/p&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/span><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"color: #000000; font-size: 16px;\">\u0648\u06cc\u0698\u06af\u06cc scale() <\/span><\/h3>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0648\u06cc\u0698\u06af\u06cc \u0628\u0639\u062f\u06cc scale() \u0645\u06cc \u0628\u0627\u0634\u062f. \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0627\u0646\u062f\u0627\u0632\u0647 \u06cc \u0627\u0644\u0645\u0627\u0646 \u0631\u0627 \u062f\u0631 \u062c\u0647\u062a \u0627\u0641\u0642\u06cc \u0648 \u0639\u0645\u0648\u062f\u06cc (\u0639\u0631\u0636 \u0648 \u0637\u0648\u0644) \u0622\u0646 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u062f\u0647\u062f. \u062f\u0631 \u0635\u0648\u0631\u062a\u06cc \u06a9\u0647 \u0645\u0642\u062f\u0627\u0631\u06cc \u0628\u06cc\u0646 \u06f0 \u062a\u0627 \u06f1 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u062f\u060c \u0627\u0646\u062f\u0627\u0632\u0647 \u06cc \u0622\u0646 \u0646\u0633\u0628\u062a \u0628\u0647 \u0627\u0646\u062f\u0627\u0632\u0647 \u06cc \u0627\u0635\u0644\u06cc \u06a9\u0648\u0686\u06a9 \u062a\u0631 \u0648 \u062f\u0631 \u0635\u0648\u0631\u062a\u06cc \u06a9\u0647 \u0628\u06cc\u0634\u062a\u0631 \u0627\u0632 \u0639\u062f\u062f \u06f1 \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u062f\u060c \u0627\u0646\u062f\u0627\u0632\u0647 \u06cc \u0622\u0646 \u0628\u0632\u0631\u06af \u062a\u0631 \u0645\u06cc \u0634\u0648\u062f. \u062f\u0631 \u0635\u0648\u0631\u062a\u06cc \u06a9\u0647 \u0642\u0635\u062f \u062f\u0627\u0631\u06cc\u062f \u062a\u0627 \u0627\u0646\u062f\u0627\u0632\u0647 \u06cc \u0627\u0644\u0645\u0627\u0646 \u062f\u0631 \u062c\u0647\u062a \u0627\u0641\u0642\u06cc \u0648 \u0639\u0645\u0648\u062f\u06cc \u0631\u0627 \u0628\u0647 \u06cc\u06a9 \u0627\u0646\u062f\u0627\u0632\u0647 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f\u060c \u06a9\u0627\u0641\u06cc\u0633\u062a \u062a\u0646\u0647\u0627 \u06cc\u06a9 \u0645\u0642\u062f\u0627\u0631 \u0628\u0647 scale() \u062f\u0647\u06cc\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;style&gt;\n      div {\n        margin: 150px;\n        width: 200px;\n        height: 100px;\n        background-color: yellow;\n        border: 1px solid black;\n        -ms-transform: scale(2, 3); \/* IE 9 *\/\n        transform: scale(2, 3); \/* Standard syntax *\/\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;h1&gt;The scale() Method&lt;\/h1&gt;\n    &lt;p&gt;The scale() method increases or decreases the size of an element.&lt;\/p&gt;\n\n    &lt;div&gt;\n      This div element is two times of its original width, and three times of\n      its original height.\n    &lt;\/div&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/span><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"color: #000000; font-size: 16px;\">\u0648\u06cc\u0698\u06af\u06cc scale()<\/span><\/h3>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062f\u0648 \u0648\u06cc\u0698\u06af\u06cc \u062f\u06cc\u06af\u0631 \u062f\u0631 \u0631\u0627\u0633\u062a\u0627\u06cc \u0648\u06cc\u0698\u06af\u06cc scale() \u0645\u06cc \u0628\u0627\u0634\u062f \u06a9\u0647 \u0628\u0647 \u0634\u0645\u0627 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0634\u0645\u0627 \u0628\u0647 \u0637\u0648\u0631 \u062e\u0627\u0635 \u062f\u0631 \u062c\u0647\u062a \u0645\u062d\u0648\u0631 \u0627\u0641\u0642\u06cc \u0648 \u06cc\u0627 \u0635\u0631\u0641\u0627 \u062f\u0631 \u062c\u0647\u062a \u0645\u062d\u0648\u0631 \u0639\u0645\u0648\u062f\u06cc \u0627\u0646\u062f\u0627\u0632\u0647 \u06cc \u0627\u0644\u0645\u0627\u0646 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f. \u0628\u0631\u0627\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u0627\u0646\u062f\u0627\u0632\u0647 \u06cc \u0627\u0644\u0645\u0627\u0646 \u062f\u0631 \u062c\u0647\u062a \u0645\u062d\u0648\u0631 \u0627\u0641\u0642\u06cc \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc scaleX() \u0648 \u0628\u0631\u0627\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0631 \u062c\u0647\u062a \u0645\u062d\u0648\u0631 \u0639\u0645\u0648\u062f\u06cc \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc scaleY() \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/span><\/p>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062f\u0631 \u062c\u0647\u062a \u0645\u062d\u0648\u0631 \u0627\u0641\u0642\u06cc:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;html&gt;\n  &lt;head&gt;\n    &lt;style&gt;\n      div {\n        margin: 150px;\n        width: 200px;\n        height: 100px;\n        background-color: yellow;\n        border: 1px solid black;\n        -ms-transform: scaleX(2); \/* IE 9 *\/\n        transform: scaleX(2); \/* Standard syntax *\/\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;h1&gt;The scaleX() Method&lt;\/h1&gt;\n    &lt;p&gt;The scaleX() method increases or decreases the width of an element.&lt;\/p&gt;\n\n    &lt;div&gt;\n      This div element is two times of its original width.\n    &lt;\/div&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062f\u0631 \u062c\u0647\u062a \u0645\u062d\u0648\u0631 \u0639\u0645\u0648\u062f\u06cc \u062f\u0631&nbsp;<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;html&gt;\n  &lt;head&gt;\n    &lt;style&gt;\n      div {\n        margin: 150px;\n        width: 200px;\n        height: 100px;\n        background-color: yellow;\n        border: 1px solid black;\n        -ms-transform: scaleY(0.5); \/* IE 9 *\/\n        transform: scaleY(0.5); \/* Standard syntax *\/\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;h1&gt;The scaleY() Method&lt;\/h1&gt;\n    &lt;p&gt;The scaleY() method increases or decreases the height of an element.&lt;\/p&gt;\n\n    &lt;div&gt;\n      This div element is half of its original height.\n    &lt;\/div&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/span><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"color: #000000; font-size: 16px;\">\u0648\u06cc\u0698\u06af\u06cc skew() \u0628\u0631\u0627\u06cc <strong>\u0627\u06cc\u062c\u0627\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u062f\u0631 css<\/strong><\/span><\/h3>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0648\u06cc\u0698\u06af\u06cc \u0628\u0639\u062f\u06cc skew() \u0645\u06cc \u0628\u0627\u0634\u062f. \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0628\u0647 \u0634\u0645\u0627 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0627\u0644\u0645\u0627\u0646 \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u0627\u0631\u06cc\u0628 \u062f\u0631 \u0622\u0648\u0631\u06cc\u062f. \u0628\u0631\u0627\u06cc \u062f\u0631\u06a9 \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0646\u06cc\u0627\u0632 \u0627\u0633\u062a \u062a\u0627 \u062f\u0631 \u0641\u0636\u0627\u06cc \u0633\u0647 \u0628\u0639\u062f\u06cc\u060c \u0645\u062d\u0648\u0631\u0647\u0627\u06cc x\u060c y \u0648 z \u0631\u0627 \u062f\u0631 \u0646\u0638\u0631 \u0628\u06af\u06cc\u0631\u06cc\u062f. \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0646\u0633\u0628\u062a \u0628\u0647 \u0647\u0631 \u06cc\u06a9 \u0627\u0632 \u0645\u062d\u0648\u0631\u0647\u0627 \u06cc\u06a9 \u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f. \u0627\u06cc\u0646 \u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc\u0646 \u062d\u0627\u0644\u062a \u0631\u0627 \u0628\u0647 \u0648\u062c\u0648\u062f \u0645\u06cc \u0622\u0648\u0631\u062f \u06a9\u0647 \u0627\u0644\u0645\u0627\u0646 \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u0627\u0631\u06cc\u0628 \u0634\u0648\u062f. \u062f\u0631 \u0635\u0648\u0631\u062a\u06cc \u06a9\u0647 \u062f\u0631 \u0647\u0631 \u062f\u0648 \u0645\u062d\u0648\u0631 \u06cc\u06a9 \u0645\u06cc\u0632\u0627\u0646 \u0632\u0627\u0648\u06cc\u0647 \u0642\u0635\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u0628\u062f\u0647\u06cc\u062f\u060c \u062a\u0646\u0647\u0627 \u06a9\u0627\u0641\u06cc\u0633\u062a \u06cc\u06a9 \u0639\u062f\u062f \u0628\u0647 \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0628\u062f\u0647\u06cc\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;style&gt;\n      div {\n        width: 300px;\n        height: 100px;\n        background-color: yellow;\n        border: 1px solid black;\n      }\n\n      div#myDiv {\n        -ms-transform: skew(20deg, 10deg); \/* IE 9 *\/\n        transform: skew(20deg, 10deg); \/* Standard syntax *\/\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;h1&gt;The skew() Method&lt;\/h1&gt;\n    &lt;p&gt;The skew() method skews an element into a given angle.&lt;\/p&gt;\n\n    &lt;div&gt;\n      This a normal div element.\n    &lt;\/div&gt;\n\n    &lt;div id=\"myDiv\"&gt;\n      This div element is skewed 20 degrees along the X-axis, and 10 degrees\n      along the Y-axis.\n    &lt;\/div&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/span><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"color: #000000; font-size: 16px;\">\u0645\u0642\u0627\u062f\u06cc\u0631 skewX() \u0648 skewY() <\/span><\/h3>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0646\u06cc\u0632 \u0647\u0645\u0686\u0648\u0646 scale() \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0635\u0631\u0641\u0627 \u062f\u0631 \u062c\u0647\u062a \u0645\u062d\u0648\u0631 x \u0648 \u06cc\u0627 \u0635\u0631\u0641\u0627 \u062f\u0631 \u062c\u0647\u062a y \u0628\u0647 \u0622\u0646 \u0645\u0642\u062f\u0627\u0631 \u062f\u0647\u06cc\u062f. \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0627\u0631 \u0627\u0632 \u0645\u0642\u0627\u062f\u06cc\u0631 skewX() \u0648 skewY() \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/span><\/p>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062f\u0631 \u0641\u0636\u0627\u06cc \u0633\u0647 \u0628\u0639\u062f\u06cc \u06cc\u06a9 \u0648\u06cc\u0698\u06af\u06cc \u062a\u0646\u0647\u0627 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u0634\u0648\u062f \u0648 \u0622\u0646 \u0686\u0631\u062e\u0634 \u062f\u0631 \u0645\u062d\u0648\u0631 z \u0645\u06cc \u0628\u0627\u0634\u062f. \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0627\u0631 \u0627\u0632 \u0645\u0642\u062f\u0627\u0631 rotateZ() \u0646\u06cc\u0627\u0632 \u0627\u0633\u062a \u062a\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;style&gt;\n      div {\n        width: 300px;\n        height: 100px;\n        background-color: yellow;\n        border: 1px solid black;\n      }\n\n      #myDiv {\n        transform: rotateZ(90deg);\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;h1&gt;The rotateZ() Method&lt;\/h1&gt;\n    &lt;p&gt;\n      The rotateZ() method rotates an element around its Z-axis at a given\n      degree.\n    &lt;\/p&gt;\n\n    &lt;div&gt;\n      This a normal div element.\n    &lt;\/div&gt;\n\n    &lt;div id=\"myDiv\"&gt;\n      This div element is rotated 90 degrees.\n    &lt;\/div&gt;\n\n    &lt;p&gt;\n      &lt;b&gt;Note:&lt;\/b&gt; Internet Explorer 9 (and earlier versions) does not support\n      the rotateZ() method.\n    &lt;\/p&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/span><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"color: #000000; font-size: 16px;\">\u0648\u06cc\u0698\u06af\u06cc \u0628\u0639\u062f\u06cc transition <\/span><\/h3>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0648\u06cc\u0698\u06af\u06cc \u0628\u0639\u062f\u06cc transition \u0645\u06cc \u0628\u0627\u0634\u062f. \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u062a\u0627 \u062d\u062f\u0648\u062f\u06cc \u0634\u0628\u06cc\u0647 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0645\u06cc \u0628\u0627\u0634\u062f \u0648 \u06a9\u0627\u0631\u0628\u0631\u062f \u0627\u0635\u0644\u06cc \u0622\u0646 \u062f\u0631 \u062d\u0627\u0644\u062a\u06cc \u06a9\u0647 \u0634\u0645\u0627 \u0628\u0631 \u0631\u0648\u06cc \u06cc\u06a9 \u0627\u0644\u0645\u0627\u0646 \u0645\u0648\u0633 \u0631\u0627 \u0642\u0631\u0627\u0631 \u0645\u06cc \u062f\u0647\u06cc\u062f\u060c \u0645\u06cc\u200c\u0628\u0627\u0634\u062f. \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u0645\u06cc \u0628\u0627\u0634\u062f. \u0634\u0645\u0627 \u062f\u0631 \u0627\u0628\u062a\u062f\u0627 \u0628\u0627\u06cc\u062f \u0646\u0627\u0645 \u0648\u06cc\u0698\u06af\u06cc \u0627\u06cc \u06a9\u0647 transition \u0628\u0631 \u0631\u0648\u06cc \u0622\u0646 \u0646\u06cc\u0627\u0632 \u0627\u0633\u062a \u062a\u0627 \u0627\u0639\u0645\u0627\u0644 \u0634\u0648\u062f \u0631\u0627 \u0628\u06cc\u0627\u0648\u0631\u06cc\u062f \u0648 \u0633\u067e\u0633 \u0645\u062f\u062a \u0632\u0645\u0627\u0646\u06cc \u0622\u0646 \u0645\u0642\u062f\u0627\u0631 \u0628\u0647 \u0645\u0642\u062f\u0627\u0631 \u062c\u062f\u06cc\u062f \u0622\u0646 \u0646\u06cc\u0627\u0632 \u0627\u0633\u062a \u062a\u0627 \u0628\u0631\u0633\u062f. \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0645\u0642\u062f\u0627\u0631 \u0627\u0648\u0644\u06cc\u0647 \u0639\u0631\u0636 (width) 100 \u067e\u06cc\u06a9\u0633\u0644 \u0645\u06cc \u0628\u0627\u0634\u062f \u06a9\u0647 \u062f\u0631 \u062d\u0627\u0644\u062a\u06cc \u06a9\u0647 \u0628\u0631 \u0631\u0648\u06cc \u0627\u0644\u0645\u0627\u0646 \u0645\u0648\u0633 \u0631\u0627 \u0646\u06af\u0647 \u062f\u0627\u0631\u06cc\u062f\u060c \u062f\u0631 \u0645\u062f\u062a \u0632\u0645\u0627\u0646 \u06f2 \u062b\u0627\u0646\u06cc\u0647 \u0628\u0647 \u0645\u0642\u062f\u0627\u0631 \u06f3\u06f0\u06f0 \u067e\u06cc\u06a9\u0633\u0644 \u0645\u06cc \u0631\u0633\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;style&gt;\n      div {\n        width: 100px;\n        height: 100px;\n        background: red;\n        transition: width 2s;\n      }\n\n      div:hover {\n        width: 300px;\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;h1&gt;The transition Property&lt;\/h1&gt;\n\n    &lt;p&gt;Hover over the div element below, to see the transition effect:&lt;\/p&gt;\n    &lt;div&gt;&lt;\/div&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641\u06cc \u0627\u0632 \u062c\u0645\u0644\u0647 \u0631\u0646\u06af \u067e\u0634\u062a \u0632\u0645\u06cc\u0646\u0647 \u0648 \u06cc\u0627 \u062d\u062a\u06cc \u0686\u0631\u062e\u0634 \u0646\u06cc\u0632 \u0628\u0647 \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u0648\u0627\u0642\u0639 \u0627\u0645\u06a9\u0627\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06cc \u0647\u0645\u0632\u0645\u0627\u0646 \u0627\u0632 \u0686\u0646\u062f\u06cc\u0646 \u062a\u063a\u06cc\u06cc\u0631 \u0631\u0627 \u062e\u0648\u0627\u0647\u06cc\u062f \u062f\u0627\u0634\u062a.<\/span><\/p>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\"> \u06cc\u06a9\u06cc \u0627\u0632 \u0627\u0633\u0627\u0633\u06cc \u062a\u0631\u06cc\u0646 \u06a9\u0627\u0631\u0628\u0631\u062f \u0647\u0627\u06cc \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u062f\u0631 \u062d\u0627\u0644\u062a\u06cc \u06a9\u0647 \u0645\u06cc \u0628\u0627\u0634\u062f \u06a9\u0647 \u0634\u0645\u0627 \u0628\u0631 \u0631\u0648\u06cc \u062f\u06a9\u0645\u0647 \u0627\u06cc \u0645\u0648\u0633 \u0631\u0627 \u0642\u0631\u0627\u0631 \u0645\u06cc \u062f\u0647\u06cc\u062f \u0648 \u0642\u0635\u062f \u062f\u0627\u0631\u06cc\u062f \u062a\u0627 \u0628\u0639\u062f \u0627\u0632 \u0642\u0631\u0627\u0631 \u06af\u0631\u0641\u062a\u0646 \u0645\u0648\u0633 \u0628\u0631 \u0631\u0648\u06cc \u0627\u0644\u0645\u0627\u0646 \u0631\u0646\u06af \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u0627\u0644\u0645\u0627\u0646 \u062a\u063a\u06cc\u06cc\u0631 \u06a9\u0646\u062f \u0648 \u067e\u0633 \u0627\u0632 \u0628\u0631\u062f\u0627\u0634\u062a\u0646 \u0645\u0648\u0633 \u0627\u0632 \u0631\u0648\u06cc \u0622\u0646\u060c \u0628\u0647 \u062d\u0627\u0644\u062a \u0627\u0648\u0644\u06cc\u0647 \u0628\u0627\u0632 \u06af\u0631\u062f\u062f \u0648 \u062a\u0645\u0627\u0645\u06cc \u0627\u06cc\u0646 \u0645\u0631\u0627\u062d\u0644 \u0628\u0647 \u0635\u0648\u0631\u062a \u0631\u0648\u0627\u0646 \u0627\u0646\u062c\u0627\u0645 \u06af\u06cc\u0631\u062f. \u062f\u0631 \u0645\u062b\u0627\u0644 \u0632\u06cc\u0631 \u0639\u0631\u0636 \u0648 \u0627\u0631\u062a\u0641\u0627\u0639 \u0627\u0644\u0645\u0627\u0646 \u0628\u0647 \u0635\u0648\u0631\u062a \u0647\u0645\u0632\u0645\u0627\u0646 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0647\u0645\u0631\u0627\u0647 \u0628\u0627 \u0627\u06cc\u0646 \u0645\u0633\u0627\u0644\u0647\u060c \u0627\u0644\u0645\u0627\u0646 \u06cc\u06a9 \u0686\u0631\u062e\u0634 \u06f1\u06f8\u06f0 \u062f\u0631\u062c\u0647 \u0627\u06cc \u0646\u06cc\u0632 \u067e\u06cc\u062f\u0627 \u0645\u06cc \u06a9\u0646\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;style&gt;\n      div {\n        width: 100px;\n        height: 100px;\n        background: red;\n        transition: width 2s, height 2s, transform 2s;\n      }\n\n      div:hover {\n        width: 300px;\n        height: 300px;\n        transform: rotate(180deg);\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;h1&gt;Transition + Transform&lt;\/h1&gt;\n\n    &lt;p&gt;Hover over the div element below:&lt;\/p&gt;\n\n    &lt;div&gt;&lt;\/div&gt;\n\n    &lt;p&gt;\n      &lt;b&gt;Note:&lt;\/b&gt; This example does not work in Internet Explorer 9 and earlier\n      versions.\n    &lt;\/p&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/span><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"color: #000000; font-size: 16px;\">transition-daley<\/span><\/h3>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0646\u06cc\u0632 \u06cc\u06a9 \u062a\u0627\u062e\u06cc\u0631 \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f \u062a\u0627 \u067e\u0633 \u0627\u0632 \u06af\u0630\u0634\u062a \u0645\u062f\u062a \u0632\u0645\u0627\u0646 \u0645\u0634\u062e\u0635\u060c \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0627\u0639\u0645\u0627\u0644 \u06af\u0631\u062f\u062f. \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0627\u0631 \u0627\u0632 transition-daley \u0646\u06cc\u0627\u0632 \u0627\u0633\u062a \u062a\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u0648\u06cc\u0698\u06af\u06cc \u062f\u06cc\u06af\u0631\u06cc \u06a9\u0647 \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f\u060c \u0646\u0648\u0639 \u0633\u0631\u0639\u062a \u062a\u063a\u06cc\u06cc\u0631 \u0627\u0644\u0645\u0627\u0646 \u0645\u06cc \u0628\u0627\u0634\u062f \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0627\u0631 \u0627\u0632 transition-timing-function \u0646\u06cc\u0627\u0632 \u0627\u0633\u062a \u062a\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u0645\u0642\u0627\u062f\u06cc\u0631 \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0645\u0686\u0648\u0646 \u0645\u0642\u0627\u062f\u06cc\u0631 \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u062f\u0631 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627 \u0645\u06cc \u0628\u0627\u0634\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;style&gt;\n      div {\n        width: 100px;\n        height: 100px;\n        background: red;\n        transition: width 1s;\n        transition-duration: 2s;\n        transition-timing-function: ease;\n      }\n\n      div:hover {\n        width: 300px;\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;h1&gt;The transition Properties Specified One by One&lt;\/h1&gt;\n\n    &lt;p&gt;Hover over the div element below, to see the transition effect:&lt;\/p&gt;\n\n    &lt;div&gt;&lt;\/div&gt;\n\n    &lt;p&gt;\n      &lt;b&gt;Note:&lt;\/b&gt; The transition effect has a 1 second delay before starting.\n    &lt;\/p&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">&#8221; \u062a\u0648\u062c\u0647 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0627\u0644\u0645\u0627\u0646 \u0628\u0627 \u0642\u0631\u0627\u0631 \u06af\u0631\u0641\u062a\u0646 \u0645\u0648\u0633 \u0628\u0631 \u0631\u0648\u06cc \u0622\u0646 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u06a9\u0646\u062f\u060c \u0628\u0647 \u0647\u0645\u0627\u0646 \u0634\u06a9\u0644 \u0646\u06cc\u0632 \u0628\u0647 \u0646\u0631\u0645\u06cc \u0628\u0647 \u062d\u0627\u0644\u062a \u0627\u0648\u0644\u06cc\u0647 \u062e\u0648\u062f \u0628\u0631 \u0645\u06cc \u06af\u0631\u062f\u062f. &#8220;<\/span><\/p>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u06cc\u06a9 \u0648\u06cc\u0698\u06af\u06cc \u062c\u0627\u0644\u0628\u06cc \u0642\u0635\u062f \u062f\u0627\u0631\u0645 \u0627\u06a9\u0646\u0648\u0646 \u0628\u0647 \u0634\u0645\u0627 \u0645\u0639\u0631\u0641\u06cc \u06a9\u0646\u0645 \u06a9\u0647 \u062f\u0631 \u0632\u0645\u0627\u0646 \u06a9\u0627\u0631 \u0628\u0627 \u0639\u06a9\u0633 \u0647\u0627 \u062e\u06cc\u0644\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f \u0645\u06cc \u0628\u0627\u0634\u062f. \u062d\u062a\u0645\u0627 \u0632\u0645\u0627\u0646\u06cc \u0628\u0631\u0627\u06cc \u0634\u0645\u0627 \u067e\u06cc\u0634 \u0622\u0645\u062f\u0647 \u06cc\u0627 \u0645\u06cc \u0622\u06cc\u062f \u06a9\u0647 \u0639\u0631\u0636 \u0648 \u06cc\u0627 \u0637\u0648\u0644 \u0639\u06a9\u0633\u06cc \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u062f\u0647\u06cc\u062f \u0648 \u0639\u06a9\u0633 \u062c\u0645\u0639 \u0645\u06cc \u0634\u0648\u062f \u0648 \u06cc\u0627 \u0628\u062f \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f. \u0628\u0631\u0627\u06cc \u0631\u0641\u0639 \u0627\u06cc\u0646 \u0645\u0634\u06a9\u0644 \u062f\u0631 css \u06cc\u06a9 \u0648\u06cc\u0698\u06af\u06cc \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u062a\u062d\u062a \u0639\u0646\u0648\u0627\u0646 object-fit \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0633\u0627\u06cc\u0632 \u0639\u06a9\u0633 \u062d\u062a\u06cc\u060c \u0639\u06a9\u0633 \u0631\u0627 \u0637\u0648\u0631\u06cc \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0628\u0647 \u062f\u0631\u0633\u062a\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0634\u0648\u062f.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"color: #000000; font-size: 16px;\">\u0648\u06cc\u0698\u06af\u06cc cover<\/span><\/h3>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0645\u0642\u0627\u062f\u06cc\u0631 \u0645\u062e\u062a\u0644\u0641\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627 \u062a\u0633\u062a \u06a9\u0631\u062f\u0646 \u062a\u0641\u0627\u0648\u062a \u0647\u0627\u06cc \u0622\u0646 \u0631\u0627 \u0645\u062a\u0648\u062c\u0647 \u0634\u0648\u06cc\u062f. \u0648\u06cc\u0698\u06af\u06cc cover \u0645\u0648\u0631\u062f\u06cc \u0645\u06cc \u0628\u0627\u0634\u062f \u06a9\u0647 \u0639\u06a9\u0633 \u0631\u0627 \u0628\u0647 \u062f\u0631\u0633\u062a\u06cc \u062f\u0631 \u0627\u0646\u062f\u0627\u0632\u0647 \u0627\u06cc \u06a9\u0647 \u0645\u0634\u062e\u0635 \u06a9\u0631\u062f\u06cc\u062f\u060c \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;style&gt;\n.fill {object-fit: fill;}\n.contain {object-fit: contain;}\n.cover {object-fit: cover;}\n.scale-down {object-fit: scale-down;}\n.none {object-fit: none;}\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;h1&gt;The object-fit Property&lt;\/h1&gt;\n\n&lt;h2&gt;No object-fit:&lt;\/h2&gt;\n&lt;img src=\"paris.jpg\" alt=\"Paris\" style=\"width:200px;height:400px\"&gt;\n\n&lt;h2&gt;object-fit: fill (this is default):&lt;\/h2&gt;\n&lt;img class=\"fill\" src=\"paris.jpg\" alt=\"Paris\" style=\"width:200px;height:400px\"&gt;\n\n&lt;h2&gt;object-fit: contain:&lt;\/h2&gt;\n&lt;img class=\"contain\" src=\"paris.jpg\" alt=\"Paris\" style=\"width:200px;height:400px\"&gt;\n\n&lt;h2&gt;object-fit: cover:&lt;\/h2&gt;\n&lt;img class=\"cover\" src=\"paris.jpg\" alt=\"Paris\" style=\"width:200px;height:400px\"&gt;\n\n&lt;h2&gt;object-fit: scale-down:&lt;\/h2&gt;\n&lt;img class=\"scale-down\" src=\"paris.jpg\" alt=\"Paris\" style=\"width:200px;height:400px\"&gt;\n\n&lt;h2&gt;object-fit: none:&lt;\/h2&gt;\n&lt;img class=\"none\" src=\"paris.jpg\" alt=\"Paris\" style=\"width:200px;height:400px\"&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/span><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"color: #000000; font-size: 16px;\">multiple column<\/span><\/h3>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062f\u0633\u062a\u0647 \u06cc \u0628\u0639\u062f\u06cc multiple column \u0645\u06cc \u0628\u0627\u0634\u062f. \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0628\u0647 \u0634\u0645\u0627 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u06cc\u06a9 \u0645\u062a\u0646 \u0631\u0627 \u062f\u0631 \u0633\u062a\u0648\u0646 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0647\u06cc\u062f. \u062f\u0631 \u062d\u0627\u0644\u062a \u067e\u06cc\u0634 \u0641\u0631\u0636 \u06cc\u06a9 \u0645\u062a\u0646 \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u06cc\u0648\u0633\u062a\u0647 \u062f\u0631 \u0641\u0636\u0627\u06cc \u0627\u0644\u0645\u0627\u0646 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f \u0648\u0644\u06cc \u062f\u0631 \u0627\u06cc\u0646 \u062d\u0627\u0644\u062a\u060c \u0645\u062a\u0646 \u0628\u0647 \u0633\u062a\u0648\u0646 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0628\u0627 \u0641\u0627\u0635\u0644\u0647 \u062f\u0631 \u0627\u0644\u0645\u0627\u0646 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f. \u0627\u0648\u0644\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0627\u0632 \u0627\u06cc\u0646 \u062f\u0633\u062a\u0647 column-count \u0645\u06cc \u0628\u0627\u0634\u062f. \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u062a\u0639\u062f\u0627\u062f \u0633\u062a\u0648\u0646 \u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0628\u0627 \u0622\u0646 \u0645\u062a\u0646 \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u0631\u0627 \u0642\u0635\u062f \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u0631\u06cc\u062f \u0631\u0627 \u0645\u0634\u062e\u0635 \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u0645\u062b\u0627\u0644 \u0632\u06cc\u0631 \u0645\u062a\u0646 \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u062f\u0631 \u06f3 \u0633\u062a\u0648\u0646 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;style&gt;\n      .newspaper {\n        column-count: 3;\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;div class=\"newspaper\"&gt;\n      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy\n      nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut\n      wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit\n      lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum\n      iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel\n      illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto\n      odio dignissim qui blandit praesent luptatum zzril delenit augue duis\n      dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis\n      eleifend option congue nihil imperdiet doming id quod mazim placerat facer\n      possim assum.\n    &lt;\/div&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0646\u062d\u0648\u0647 \u06cc \u0646\u0645\u0627\u06cc\u0634 \u0622\u0646<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"71\" data-src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/06\/7-1024x71.png.webp\" alt=\"\" class=\"wp-image-5808 lazyload\" title=\"\" data-srcset=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/06\/7-1024x71.png.webp 1024w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/06\/7-300x21.png.webp 300w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2020\/06\/7-768x53.png.webp 768w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2020\/06\/7.png 1300w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/71;\" \/><\/figure>\n\n\n\n<p><span style=\"font-size: 16px;\"><\/span><\/p>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u06cc\u06a9 \u0648\u06cc\u0698\u06af\u06cc \u062f\u06cc\u06af\u0631 \u0646\u06cc\u0632 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u062d\u062f\u0627\u0642\u0644 \u0639\u0631\u0636 \u0647\u0631 \u0633\u062a\u0648\u0646 \u0631\u0627 \u0645\u0634\u062e\u0635 \u06a9\u0646\u06cc\u062f. \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc column-width \u0645\u06cc \u0628\u0627\u0634\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">.newspaper {\n  column-width: 100px;\n}\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u06cc\u0646 \u062f\u0648 \u0648\u06cc\u0698\u06af\u06cc \u0631\u0627 \u0628\u0647 \u062d\u0627\u0644\u062a \u062e\u0644\u0627\u0635\u0647 \u0646\u06cc\u0632 \u0628\u0646\u0648\u06cc\u0633\u06cc\u062f. \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0627\u0631 \u062d\u062f\u0627\u0642\u0644 \u0639\u0631\u0636 \u0631\u0627 \u062f\u0631 \u0627\u0628\u062a\u062f\u0627 \u0648 \u0633\u067e\u0633 \u062a\u0639\u062f\u0627\u062f \u062d\u062f\u0627\u06a9\u062b\u0631 \u0633\u062a\u0648\u0646 \u0647\u0627\u06cc \u0622\u0646 \u0631\u0627 \u0645\u0634\u062e\u0635 \u0645\u06cc \u06a9\u0646\u06cc\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">.newspaper {\n  columns: 100px 3;\n}\n<\/span><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"color: #000000; font-size: 16px;\">column-gap<\/span><\/h3>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0648\u06cc\u0698\u06af\u06cc \u062f\u06cc\u06af\u0631\u06cc \u0627\u0632 \u0627\u06cc\u0646 \u062f\u0633\u062a\u0647 column-gap \u0645\u06cc \u0628\u0627\u0634\u062f. \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0641\u0627\u0635\u0644\u0647 \u06cc \u0628\u06cc\u0646 \u0633\u062a\u0648\u0646 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0631\u0627 \u0645\u0634\u062e\u0635 \u0645\u06cc \u06a9\u0646\u062f. \u062f\u0631 \u0645\u062b\u0627\u0644 \u0632\u06cc\u0631\u060c \u0641\u0627\u0635\u0644\u0647 \u06cc \u0628\u06cc\u0646 \u0633\u062a\u0648\u0646 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u06f4\u06f0 \u067e\u06cc\u06a9\u0633\u0644 \u0645\u06cc \u0628\u0627\u0634\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;style&gt;\n      .newspaper {\n        column-count: 3;\n        column-gap: 40px;\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;div class=\"newspaper\"&gt;\n      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy\n      nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut\n      wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit\n      lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum\n      iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel\n      illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto\n      odio dignissim qui blandit praesent luptatum zzril delenit augue duis\n      dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis\n      eleifend option congue nihil imperdiet doming id quod mazim placerat facer\n      possim assum.\n    &lt;\/div&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0648\u06cc\u0698\u06af\u06cc \u0628\u0639\u062f\u06cc \u062f\u0631 \u0627\u06cc\u0646 \u062f\u0633\u062a\u0647\u060c \u062c\u062f\u0627 \u06a9\u0631\u062f\u0646 \u0633\u062a\u0648\u0646 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06cc\u06a9 \u062e\u0637 \u062f\u0631 \u0628\u06cc\u0646 \u0622\u0646 \u0647\u0627 \u0645\u06cc \u0628\u0627\u0634\u062f. \u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0646\u0648\u0639 \u062e\u0637\u060c \u0639\u0631\u0636 \u0622\u0646 \u0648 \u0631\u0646\u06af \u0622\u0646 \u0631\u0627 \u0645\u0634\u062e\u0635 \u06a9\u0646\u06cc\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;style&gt;\n      .newspaper {\n        column-count: 3;\n        column-gap: 40px;\n        column-rule-style: solid;\n        column-rule-width: 1px;\n        column-rule-color: lightblue;\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;div class=\"newspaper\"&gt;\n      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy\n      nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut\n      wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit\n      lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum\n      iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel\n      illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto\n      odio dignissim qui blandit praesent luptatum zzril delenit augue duis\n      dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis\n      eleifend option congue nihil imperdiet doming id quod mazim placerat facer\n      possim assum.\n    &lt;\/div&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062f\u0631 \u062d\u0627\u0644\u062a \u062e\u0644\u0627\u0635\u0647 \u0634\u062f\u0647 \u06cc \u0622\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0634\u06cc\u0648\u0647 \u06cc \u0632\u06cc\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">.newspaper{\n  column-rule: 1px solid lightblue;\n}\n<\/span><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"color: #000000; font-size: 16px;\">\u0648\u06cc\u0698\u06af\u06cc column-span <\/span><\/h3>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0648\u06cc\u0698\u06af\u06cc \u0628\u0639\u062f\u06cc \u0628\u0631\u0627\u06cc \u062d\u0627\u0644\u062a\u06cc \u0645\u06cc \u0628\u0627\u0634\u062f \u06a9\u0647 \u0634\u0645\u0627 \u0628\u0631\u0627\u06cc \u0645\u062a\u0646 \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u06cc\u06a9 \u062a\u06cc\u062a\u0631 \u0646\u06cc\u0632 \u062f\u0627\u0631\u06cc\u062f \u0648 \u0642\u0635\u062f \u062f\u0627\u0631\u06cc\u062f \u062a\u0627 \u062a\u06cc\u062a\u0631 \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u062f\u0631 \u06cc\u06a9 \u0633\u062a\u0648\u0646 \u0635\u0631\u0641\u0627 \u0642\u0631\u0627\u0631 \u0646\u06af\u06cc\u0631\u062f \u0648 \u062a\u0645\u0627\u0645\u06cc \u0633\u062a\u0648\u0646 \u0647\u0627 \u0631\u0627 \u0634\u0627\u0645\u0644 \u0634\u0648\u062f. \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0627\u0631 \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc column-span \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0646\u06cc\u0627\u0632 \u0627\u0633\u062a \u06a9\u0646\u06cc\u062f \u0648 \u0645\u0642\u062f\u0627\u0631 \u0622\u0646 all \u0642\u0631\u0627\u0631 \u0645\u06cc \u06af\u06cc\u0631\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;style&gt;\n      .newspaper {\n        column-count: 3;\n        column-gap: 40px;\n        column-rule: 1px solid lightblue;\n      }\n\n      h2 {\n        column-span: all;\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;div class=\"newspaper\"&gt;\n      &lt;h2&gt;Lorem Ipsum Dolor Sit Amet&lt;\/h2&gt;\n      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy\n      nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut\n      wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit\n      lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum\n      iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel\n      illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto\n      odio dignissim qui blandit praesent luptatum zzril delenit augue duis\n      dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis\n      eleifend option congue nihil imperdiet doming id quod mazim placerat facer\n      possim assum.\n    &lt;\/div&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/span><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"color: #000000; font-size: 16px;\">column-fill <\/span><\/h3>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0648\u06cc\u0698\u06af\u06cc \u0627\u062e\u0631 \u062f\u0631 \u0627\u06cc\u0646 \u062f\u0633\u062a\u0647 \u0646\u06cc\u0632 column-fill \u0645\u06cc \u0628\u0627\u0634\u062f. \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0628\u0647 \u0634\u0645\u0627 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0645\u062a\u0648\u0646 \u062f\u0631 \u0633\u062a\u0648\u0646 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0628\u0647 \u0635\u0648\u0631\u062a \u0645\u062a\u0648\u0627\u0632\u0646 \u0642\u0631\u0627\u0631 \u0628\u06af\u06cc\u0631\u0646\u062f (\u062d\u0627\u0644\u062a \u067e\u06cc\u0634 \u0641\u0631\u0636) \u0648 \u06cc\u0627 \u0646\u0627 \u0645\u062a\u0648\u0627\u0632\u0646 \u0642\u0631\u0627\u0631 \u0628\u06af\u06cc\u0631\u0646\u062f. \u0628\u0631\u0627\u06cc \u062d\u0627\u0644\u062a \u0645\u062a\u0648\u0627\u0632\u0646 \u06a9\u0647 \u067e\u06cc\u0634 \u0641\u0631\u0636 \u0645\u06cc \u0628\u0627\u0634\u062f balance \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u0642\u062f\u0627\u0631 \u0628\u0647 \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0646\u06cc\u0627\u0632 \u0627\u0633\u062a \u062a\u0627 \u0628\u062f\u0647\u06cc\u062f \u0648 \u0628\u0631\u0627\u06cc \u0646\u0627\u0645\u062a\u0648\u0627\u0632\u0646 \u0634\u062f\u0646 \u0622\u0646\u060c \u0645\u0642\u062f\u0627\u0631 auto.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;style&gt;\n      div {\n        column-count: 3;\n        height: 100px;\n      }\n\n      .newspaper1 {\n        column-fill: auto;\n      }\n\n      .newspaper2 {\n        column-fill: balance;\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;h1&gt;The column-fill Property&lt;\/h1&gt;\n\n    &lt;h2&gt;column-fill: auto:&lt;\/h2&gt;\n    &lt;div class=\"newspaper1\"&gt;\n      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy\n      nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut\n      wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit\n      lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum\n      iriure dolor in hendrerit in vulputate velit esse molestie consequat...\n    &lt;\/div&gt;\n\n    &lt;h2&gt;column-fill: balance (default):&lt;\/h2&gt;\n    &lt;div class=\"newspaper2\"&gt;\n      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy\n      nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut\n      wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit\n      lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum\n      iriure dolor in hendrerit in vulputate velit esse molestie consequat...\n    &lt;\/div&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/span><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"color: #000000; font-size: 16px;\">\u0648\u06cc\u0698\u06af\u06cc resize <\/span><\/h3>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0648\u06cc\u0698\u06af\u06cc \u062f\u06cc\u06af\u0631\u06cc \u06a9\u0647 \u0628\u0647 \u0622\u0646 \u0645\u06cc \u067e\u0631\u062f\u0627\u0632\u0645\u060c \u0642\u0627\u0628\u0644\u06cc\u062a \u062a\u063a\u06cc\u06cc\u0631 \u0627\u0646\u062f\u0627\u0632\u0647 \u06cc \u06cc\u06a9 \u0627\u0644\u0645\u0627\u0646 \u062a\u0648\u0633\u0637 \u06a9\u0627\u0631\u0628\u0631 \u062f\u0631 \u0635\u0641\u062d\u0647 \u0645\u06cc \u0628\u0627\u0634\u062f. \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc resize \u0646\u0627\u0645 \u062f\u0627\u0631\u062f. \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0633\u0647 \u0645\u0642\u062f\u0627\u0631 \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u062f:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"color: #000000; font-size: 16px;\">Horizontal: \u062a\u063a\u06cc\u06cc\u0631 \u0639\u0631\u0636 \u0627\u0644\u0645\u0627\u0646<\/span><\/li>\n\n\n\n<li><span style=\"color: #000000; font-size: 16px;\">Vertical: \u062a\u063a\u06cc\u06cc\u0631 \u0627\u0631\u062a\u0641\u0627\u0639 \u0627\u0644\u0645\u0627\u0646<\/span><\/li>\n\n\n\n<li><span style=\"color: #000000; font-size: 16px;\">Both: \u062a\u063a\u06cc\u06cc\u0631 \u0627\u0631\u062a\u0641\u0627\u0639 \u0648 \u0639\u0631\u0636 \u0627\u0644\u0645\u0627\u0646<\/span><\/li>\n\n\n\n<li><span style=\"color: #000000; font-size: 16px;\">None: \u0639\u062f\u0645 \u0627\u0645\u06a9\u0627\u0646 \u062a\u063a\u06cc\u06cc\u0631 (\u062f\u0631 \u0632\u0645\u0627\u0646\u06cc \u062f\u0631 input \u0627\u0632 \u0646\u0648\u0639 textarea \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f\u060c \u062f\u0631 \u0627\u06cc\u0646 \u0646\u0648\u0639 \u0628\u0647 \u0637\u0648\u0631 \u067e\u06cc\u0634 \u0641\u0631\u0636 \u0642\u0627\u0628\u0644\u06cc\u062a \u062a\u063a\u06cc\u06cc\u0631 \u0633\u0627\u06cc\u0632 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f\u060c \u0628\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u0642\u062f\u0627\u0631 \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0628\u0647 none \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0645\u0648\u062c\u0628 \u0639\u062f\u0645 \u0627\u0645\u06a9\u0627\u0646 \u062a\u063a\u06cc\u06cc\u0631 \u0622\u0646 \u062a\u0648\u0633\u0637 \u06a9\u0627\u0631\u0628\u0631 \u0634\u0648\u06cc\u062f.)<\/span><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-size: 16px;\"><span style=\"color: #000000;\">\u062a\u063a\u06cc\u06cc\u0631 \u0639\u0631\u0636 \u0627\u0644\u0645\u0627\u0646 <\/span><span style=\"color: #000000;\">\u0628\u0631\u0627\u06cc <strong>\u0627\u06cc\u062c\u0627\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u062f\u0631 css<\/strong><\/span><\/span><\/h3>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;style&gt;\n      div {\n        border: 2px solid;\n        padding: 20px;\n        width: 300px;\n        resize: horizontal;\n        overflow: auto;\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;h1&gt;The resize Property&lt;\/h1&gt;\n\n    &lt;div&gt;\n      &lt;p&gt;Let the user resize only the width of this div element.&lt;\/p&gt;\n      &lt;p&gt;\n        To resize: Click and drag the bottom right corner of this div element.\n      &lt;\/p&gt;\n    &lt;\/div&gt;\n\n    &lt;p&gt;\n      &lt;b&gt;Note:&lt;\/b&gt; Internet Explorer and Edge does not support the resize\n      property.\n    &lt;\/p&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062a\u063a\u06cc\u06cc\u0631 \u0627\u0631\u062a\u0641\u0627\u0639 \u0627\u0644\u0645\u0627\u0646:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;style&gt;\n      div {\n        border: 2px solid;\n        padding: 20px;\n        width: 300px;\n        resize: vertical;\n        overflow: auto;\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;h1&gt;The resize Property&lt;\/h1&gt;\n\n    &lt;div&gt;\n      &lt;p&gt;Let the user resize only the height of this div element.&lt;\/p&gt;\n      &lt;p&gt;\n        To resize: Click and drag the bottom right corner of this div element.\n      &lt;\/p&gt;\n    &lt;\/div&gt;\n\n    &lt;p&gt;\n      &lt;b&gt;Note:&lt;\/b&gt; Internet Explorer and Edge does not support the resize\n      property.\n    &lt;\/p&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062a\u063a\u06cc\u06cc\u0631 \u0639\u0631\u0636 \u0648 \u0627\u0631\u062a\u0641\u0627\u0639 \u0627\u0644\u0645\u0627\u0646 \u0628\u0647 \u0635\u0648\u0631\u062a \u0647\u0645\u0632\u0645\u0627\u0646:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;style&gt;\n      div {\n        border: 2px solid;\n        padding: 20px;\n        width: 300px;\n        resize: both;\n        overflow: auto;\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;h1&gt;The resize Property&lt;\/h1&gt;\n\n    &lt;div&gt;\n      &lt;p&gt;\n        Let the user resize both the height and the width of this div element.\n      &lt;\/p&gt;\n      &lt;p&gt;\n        To resize: Click and drag the bottom right corner of this div element.\n      &lt;\/p&gt;\n    &lt;\/div&gt;\n\n    &lt;p&gt;\n      &lt;b&gt;Note:&lt;\/b&gt; Internet Explorer and Edge does not support the resize\n      property.\n    &lt;\/p&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/span><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-size: 16px;\"><span style=\"color: #000000;\">\u0622\u0645\u0648\u0632\u0634 css <\/span><span style=\"color: #000000;\">\u0628\u0631\u0627\u06cc <strong>\u0627\u06cc\u062c\u0627\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u062f\u0631 css<\/strong><\/span><\/span><\/h3>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0622\u0645\u0648\u0632\u0634 css \u0631\u0627 \u0645\u0628\u062d\u062b \u062a\u0639\u0631\u06cc\u0641 \u0627\u0633\u062a\u0627\u06cc\u0644 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u062f\u0631 \u0633\u0627\u06cc\u0632 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0628\u0647 \u067e\u0627\u06cc\u0627\u0646 \u0645\u06cc \u0631\u0633\u0627\u0646\u0645. \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0627\u0632 \u062c\u0645\u0644\u0647 \u0645\u0647\u0645\u062a\u0631\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062f\u0631 \u0637\u0631\u0627\u062d\u06cc \u0635\u0641\u062d\u0627\u062a \u0631\u06cc\u0633\u067e\u0627\u0646\u0633\u06cc\u0648 (\u0646\u0645\u0627\u06cc\u0634 \u062f\u0631 \u0627\u0628\u0639\u0627\u062f \u0648 \u062f\u0633\u062a\u06af\u0627\u0647 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641) \u0645\u06cc \u0628\u0627\u0634\u062f.<\/span><\/p>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0627\u0631 \u0627\u0632 media query \u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f. \u0628\u0631\u0627\u06cc \u062a\u0639\u0631\u06cc\u0641 \u06cc\u06a9 media query \u062a\u0646\u0647\u0627 \u06a9\u0627\u0641\u06cc\u0633\u062a \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u0639\u0645\u0644 \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u0645\u062b\u0627\u0644 \u0632\u06cc\u0631 \u062f\u0631 \u062d\u0627\u0644\u062a\u06cc \u06a9\u0647 \u062d\u062f\u0627\u0642\u0644 \u0639\u0631\u0636 \u0635\u0641\u062d\u0647 \u06f4\u06f8\u06f0 \u067e\u06cc\u06a9\u0633\u0644 \u0628\u0627\u0634\u062f\u060c \u0631\u0646\u06af \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u0635\u0641\u062d\u0647 \u0633\u0628\u0632 \u06a9\u0645 \u0631\u0646\u06af \u062e\u0648\u0627\u0647\u062f \u0634\u062f. \u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u062d\u062f\u0627\u0642\u0644\u060c \u062d\u062f\u0627\u06a9\u062b\u0631 \u0648 \u06cc\u0627 \u0628\u0627\u0632\u0647 \u06cc \u062e\u0627\u0635\u06cc \u0648 \u06cc\u0627 \u0639\u062f\u062f \u062e\u0627\u0635\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc media query \u062e\u0648\u062f \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f. \u0628\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0627\u0646\u062f\u0627\u0632\u0647 \u06cc \u0635\u0641\u062d\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0631\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;style&gt;\n      body {\n        background-color: pink;\n      }\n\n      @media screen and (min-width: 480px) {\n        body {\n          background-color: lightgreen;\n        }\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;h1&gt;Resize the browser window to see the effect!&lt;\/h1&gt;\n    &lt;p&gt;\n      The media query will only apply if the media type is screen and the\n      viewport is 480px wide or wider.\n    &lt;\/p&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062f\u0631 \u0645\u062b\u0627\u0644 \u062f\u06cc\u06af\u0631\u06cc \u0634\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0637\u0631\u06cc\u0642\u0647 \u06cc \u062a\u0639\u0631\u06cc\u0641 \u0639\u0631\u0636 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0628\u0631\u0627\u06cc \u0627\u0644\u0645\u0627\u0646 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0631\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u0645\u062b\u0627\u0644 \u0632\u06cc\u0631 \u062a\u0627 \u0639\u0631\u0636 \u0628\u0627 \u0645\u0642\u062f\u0627\u0631 \u062d\u062f\u0627\u06a9\u062b\u0631 \u06f7\u06f6\u06f8 \u067e\u06cc\u06a9\u0633\u0644 \u062a\u0639\u0631\u06cc\u0641 \u0632\u06cc\u0631 \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0642\u0631\u0627\u0631 \u0645\u06cc \u06af\u06cc\u0631\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n&lt;style&gt;\n* {\n  box-sizing: border-box;\n}\n\n.row::after {\n  content: \"\";\n  clear: both;\n  display: block;\n}\n\n[class*=\"col-\"] {\n  float: left;\n  padding: 15px;\n}\n\nhtml {\n  font-family: \"Lucida Sans\", sans-serif;\n}\n\n.header {\n  background-color: #9933cc;\n  color: #ffffff;\n  padding: 15px;\n}\n\n.menu ul {\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n}\n\n.menu li {\n  padding: 8px;\n  margin-bottom: 7px;\n  background-color: #33b5e5;\n  color: #ffffff;\n  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);\n}\n\n.menu li:hover {\n  background-color: #0099cc;\n}\n\n.aside {\n  background-color: #33b5e5;\n  padding: 15px;\n  color: #ffffff;\n  text-align: center;\n  font-size: 14px;\n  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);\n}\n\n.footer {\n  background-color: #0099cc;\n  color: #ffffff;\n  text-align: center;\n  font-size: 12px;\n  padding: 15px;\n}\n\n\/* For desktop: *\/\n.col-1 {width: 8.33%;}\n.col-2 {width: 16.66%;}\n.col-3 {width: 25%;}\n.col-4 {width: 33.33%;}\n.col-5 {width: 41.66%;}\n.col-6 {width: 50%;}\n.col-7 {width: 58.33%;}\n.col-8 {width: 66.66%;}\n.col-9 {width: 75%;}\n.col-10 {width: 83.33%;}\n.col-11 {width: 91.66%;}\n.col-12 {width: 100%;}\n\n@media only screen and (max-width: 768px) {\n  \/* For mobile phones: *\/\n  [class*=\"col-\"] {\n    width: 100%;\n  }\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;div class=\"header\"&gt;\n  &lt;h1&gt;Chania&lt;\/h1&gt;\n&lt;\/div&gt;\n\n&lt;div class=\"row\"&gt;\n  &lt;div class=\"col-3 menu\"&gt;\n    &lt;ul&gt;\n    &lt;li&gt;The Flight&lt;\/li&gt;\n    &lt;li&gt;The City&lt;\/li&gt;\n    &lt;li&gt;The Island&lt;\/li&gt;\n    &lt;li&gt;The Food&lt;\/li&gt;\n    &lt;\/ul&gt;\n  &lt;\/div&gt;\n\n  &lt;div class=\"col-6\"&gt;\n    &lt;h1&gt;The City&lt;\/h1&gt;\n    &lt;p&gt;Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.&lt;\/p&gt;\n  &lt;\/div&gt;\n\n  &lt;div class=\"col-3 right\"&gt;\n    &lt;div class=\"aside\"&gt;\n      &lt;h2&gt;What?&lt;\/h2&gt;\n      &lt;p&gt;Chania is a city on the island of Crete.&lt;\/p&gt;\n      &lt;h2&gt;Where?&lt;\/h2&gt;\n      &lt;p&gt;Crete is a Greek island in the Mediterranean Sea.&lt;\/p&gt;\n      &lt;h2&gt;How?&lt;\/h2&gt;\n      &lt;p&gt;You can reach Chania airport from all over Europe.&lt;\/p&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;div class=\"footer\"&gt;\n  &lt;p&gt;Resize the browser window to see how the content respond to the resizing.&lt;\/p&gt;\n&lt;\/div&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/span><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"color: #000000; font-size: 16px;\">media query<\/span><\/h3>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0634\u0645\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0686\u0646\u062f\u06cc\u0646 \u0633\u0627\u06cc\u0632 \u0645\u062e\u062a\u0644\u0641 \u0648 media query \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0628\u0631\u0627\u06cc \u06cc\u06a9 \u0635\u0641\u062d\u0647 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u0645\u062b\u0627\u0644 \u0632\u06cc\u0631 \u062f\u0648 media query \u0628\u0631\u0627\u06cc \u062f\u0648 \u0639\u0631\u0636 \u0645\u062e\u062a\u0644\u0641 \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0627\u0633\u062a. \u062f\u0631 \u06cc\u06a9 \u062d\u0627\u0644\u062a \u0628\u0631\u0627\u06cc \u0635\u0641\u062d\u0647 \u0628\u0627 \u062d\u062f\u0627\u0642\u0644 \u0639\u0631\u0636 \u06f6\u06f0\u06f0 \u067e\u06cc\u06a9\u0633\u0644 \u0648 \u0628\u0631\u0627\u06cc \u062d\u0627\u0644\u062a \u062f\u0648\u0645 \u0628\u0631\u0627\u06cc \u0635\u0641\u062d\u0647 \u0628\u0627 \u062d\u062f\u0627\u0642\u0644 \u0639\u0631\u0636 \u06f7\u06f6\u06f8 \u067e\u06cc\u06a9\u0633\u0644 \u0627\u0633\u062a\u0627\u06cc\u0644 \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0627\u0633\u062a. \u0628\u062f\u06cc\u0646 \u0645\u0639\u0646\u0627 \u06a9\u0647 \u0628\u06cc\u0646 \u0639\u0631\u0636 \u06f6\u06f0\u06f0 \u062a\u0627 \u06f7\u06f6\u06f8 \u067e\u06cc\u06a9\u0633\u0644\u060c \u0627\u0648\u0644\u06cc\u0646 \u062d\u0627\u0644\u062a \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0642\u0631\u0627\u0631 \u0645\u06cc \u06af\u06cc\u0631\u062f \u0648 \u0628\u0631\u0627\u06cc \u0639\u0631\u0636 \u0628\u0627 \u0645\u0642\u062f\u0627\u0631 \u0628\u06cc\u0634\u062a\u0631 \u0627\u0632 \u06f7\u06f6\u06f8 \u067e\u06cc\u06a9\u0633\u0644\u060c \u0627\u0633\u062a\u0627\u06cc\u0644 \u062d\u0627\u0644\u062a \u062f\u0648\u0645 \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0642\u0631\u0627\u0631 \u0645\u06cc \u06af\u06cc\u0631\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n&lt;style&gt;\n* {\n  box-sizing: border-box;\n}\n\n.row::after {\n  content: \"\";\n  clear: both;\n  display: table;\n}\n\n[class*=\"col-\"] {\n  float: left;\n  padding: 15px;\n}\n\nhtml {\n  font-family: \"Lucida Sans\", sans-serif;\n}\n\n.header {\n  background-color: #9933cc;\n  color: #ffffff;\n  padding: 15px;\n}\n\n.menu ul {\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n}\n\n.menu li {\n  padding: 8px;\n  margin-bottom: 7px;\n  background-color: #33b5e5;\n  color: #ffffff;\n  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);\n}\n\n.menu li:hover {\n  background-color: #0099cc;\n}\n\n.aside {\n  background-color: #33b5e5;\n  padding: 15px;\n  color: #ffffff;\n  text-align: center;\n  font-size: 14px;\n  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);\n}\n\n.footer {\n  background-color: #0099cc;\n  color: #ffffff;\n  text-align: center;\n  font-size: 12px;\n  padding: 15px;\n}\n\n\/* For mobile phones: *\/\n[class*=\"col-\"] {\n  width: 100%;\n}\n\n@media only screen and (min-width: 600px) {\n  \/* For tablets: *\/\n  .col-s-1 {width: 8.33%;}\n  .col-s-2 {width: 16.66%;}\n  .col-s-3 {width: 25%;}\n  .col-s-4 {width: 33.33%;}\n  .col-s-5 {width: 41.66%;}\n  .col-s-6 {width: 50%;}\n  .col-s-7 {width: 58.33%;}\n  .col-s-8 {width: 66.66%;}\n  .col-s-9 {width: 75%;}\n  .col-s-10 {width: 83.33%;}\n  .col-s-11 {width: 91.66%;}\n  .col-s-12 {width: 100%;}\n}\n@media only screen and (min-width: 768px) {\n  \/* For desktop: *\/\n  .col-1 {width: 8.33%;}\n  .col-2 {width: 16.66%;}\n  .col-3 {width: 25%;}\n  .col-4 {width: 33.33%;}\n  .col-5 {width: 41.66%;}\n  .col-6 {width: 50%;}\n  .col-7 {width: 58.33%;}\n  .col-8 {width: 66.66%;}\n  .col-9 {width: 75%;}\n  .col-10 {width: 83.33%;}\n  .col-11 {width: 91.66%;}\n  .col-12 {width: 100%;}\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;div class=\"header\"&gt;\n  &lt;h1&gt;Chania&lt;\/h1&gt;\n&lt;\/div&gt;\n\n&lt;div class=\"row\"&gt;\n  &lt;div class=\"col-3 col-s-3 menu\"&gt;\n    &lt;ul&gt;\n      &lt;li&gt;The Flight&lt;\/li&gt;\n      &lt;li&gt;The City&lt;\/li&gt;\n      &lt;li&gt;The Island&lt;\/li&gt;\n      &lt;li&gt;The Food&lt;\/li&gt;\n    &lt;\/ul&gt;\n  &lt;\/div&gt;\n\n  &lt;div class=\"col-6 col-s-9\"&gt;\n    &lt;h1&gt;The City&lt;\/h1&gt;\n    &lt;p&gt;Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.&lt;\/p&gt;\n  &lt;\/div&gt;\n\n  &lt;div class=\"col-3 col-s-12\"&gt;\n    &lt;div class=\"aside\"&gt;\n      &lt;h2&gt;What?&lt;\/h2&gt;\n      &lt;p&gt;Chania is a city on the island of Crete.&lt;\/p&gt;\n      &lt;h2&gt;Where?&lt;\/h2&gt;\n      &lt;p&gt;Crete is a Greek island in the Mediterranean Sea.&lt;\/p&gt;\n      &lt;h2&gt;How?&lt;\/h2&gt;\n      &lt;p&gt;You can reach Chania airport from all over Europe.&lt;\/p&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;div class=\"footer\"&gt;\n  &lt;p&gt;Resize the browser window to see how the content respond to the resizing.&lt;\/p&gt;\n&lt;\/div&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/span><\/pre>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062f\u0631 \u062d\u0627\u0644\u062a \u0631\u0627\u06cc\u062c\u060c \u0628\u0631\u0627\u06cc \u0627\u0628\u0639\u0627\u062f \u0645\u062e\u062a\u0644\u0641 \u0648 \u062f\u0633\u062a\u06af\u0627\u0647 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0627\u0632 \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f \u0645\u062b\u0627\u0644 \u0632\u06cc\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f. \u0628\u0631\u0627\u06cc \u0639\u0631\u0636 \u0628\u0627 \u062d\u062f\u0627\u06a9\u062b\u0631 \u0645\u0642\u062f\u0627\u0631 \u06f6\u06f0\u06f0 \u067e\u06cc\u06a9\u0633\u0644\u060c \u062f\u0633\u062a\u06af\u0627\u0647 \u0647\u0627\u06cc \u06a9\u0648\u0686\u06a9 \u0645\u0648\u0628\u0627\u06cc\u0644 \u0631\u0627 \u0634\u0627\u0645\u0644 \u0645\u06cc \u0634\u0648\u062f. <\/span><\/p>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0628\u0631\u0627\u06cc \u0639\u0631\u0636 \u0628\u0627 \u062d\u062f\u0627\u0642\u0644 \u0645\u0642\u062f\u0627\u0631 \u06f6\u06f0\u06f0 \u067e\u06cc\u06a9\u0633\u0644 \u062a\u0627 \u0645\u0642\u062f\u0627\u0631 \u06f7\u06f6\u06f8 \u067e\u06cc\u06a9\u0633\u0644 \u0628\u0631\u0627\u06cc \u062a\u0628\u0644\u062a \u0647\u0627 \u062f\u0631 \u062d\u0627\u0644\u062a \u0639\u0645\u0648\u062f\u06cc \u0648 \u0645\u0648\u0628\u0627\u06cc\u0644 \u0647\u0627\u06cc \u0628\u0627 \u0627\u0628\u0639\u0627\u062f \u0628\u0632\u0631\u06af \u062a\u0631\u060c \u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u06af\u0627\u0647 \u0628\u0627 \u062d\u062f\u0627\u0642\u0644 \u0639\u0631\u0636 \u06f7\u06f6\u06f8 \u067e\u06cc\u06a9\u0633\u0644 \u062a\u0627 \u0645\u0642\u062f\u0627\u0631 \u06f9\u06f9\u06f2 \u067e\u06cc\u06a9\u0633\u0644 \u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u06af\u0627\u0647 \u0647\u0627\u06cc \u0645\u062a\u0648\u0633\u0637 \u0627\u0632 \u062c\u0645\u0644\u0647 \u062a\u0628\u0644\u062a \u0647\u0627 \u062f\u0631 \u062d\u0627\u0644\u062a \u0627\u0641\u0642\u06cc \u0648 \u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u06af\u0627\u0647 \u0647\u0627\u06cc \u0628\u0627 \u062d\u062f\u0627\u0642\u0644 \u0639\u0631\u0636 \u06f9\u06f9\u06f2 \u067e\u06cc\u06a9\u0633\u0644 \u062a\u0627 \u0645\u0642\u062f\u0627\u0631 \u06f1\u06f2\u06f0\u06f0 \u067e\u06cc\u06a9\u0633\u0644 \u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u06af\u0627\u0647 \u0647\u0627\u06cc \u0628\u0632\u0631\u06af\u062a\u0631 \u0627\u0632 \u062c\u0645\u0644\u0647 \u0644\u067e \u062a\u0627\u067e \u0648 \u062f\u0633\u062a\u06a9\u062a\u0627\u067e \u0648 \u062f\u0633\u062a\u06af\u0627\u0647 \u0628\u0627 \u0639\u0631\u0636 \u062d\u062f\u0627\u0642\u0644 \u06f1\u06f2\u06f0\u06f0 \u067e\u06cc\u06a9\u0633\u0644 \u0628\u0647 \u0628\u0627\u0644\u0627 \u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u06af\u0627\u0647 \u0647\u0627\u06cc \u0628\u0627 \u0627\u0628\u0639\u0627\u062f \u0628\u0632\u0631\u06af\u062a\u0631 \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0642\u0631\u0627\u0631 \u0645\u06cc \u06af\u06cc\u0631\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n&lt;style&gt;\n.example {\n  padding: 20px;\n  color: white;\n}\n\/* Extra small devices (phones, 600px and down) *\/\n@media only screen and (max-width: 600px) {\n  .example {background: red;}\n}\n\n\/* Small devices (portrait tablets and large phones, 600px and up) *\/\n@media only screen and (min-width: 600px) {\n  .example {background: green;}\n}\n\n\/* Medium devices (landscape tablets, 768px and up) *\/\n@media only screen and (min-width: 768px) {\n  .example {background: blue;}\n} \n\n\/* Large devices (laptops\/desktops, 992px and up) *\/\n@media only screen and (min-width: 992px) {\n  .example {background: orange;}\n} \n\n\/* Extra large devices (large laptops and desktops, 1200px and up) *\/\n@media only screen and (min-width: 1200px) {\n  .example {background: pink;}\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;h2&gt;Typical Media Query Breakpoints&lt;\/h2&gt;\n&lt;p class=\"example\"&gt;Resize the browser window to see how the background color of this paragraph changes on different screen sizes.&lt;\/p&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/span><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"color: #000000; font-size: 16px;\">\u062d\u0627\u0644\u062a landscape <\/span><\/h3>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u062f\u0631 \u062d\u0627\u0644\u062a \u062f\u06cc\u06af\u0631\u06cc \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u062a\u0627 \u0634\u0645\u0627 \u0634\u0631\u0637\u06cc \u0628\u06af\u0630\u0627\u0631\u06cc\u062f \u06a9\u0647 \u062f\u0631 \u0635\u0648\u0631\u062a\u06cc \u06a9\u0647 \u06cc\u06a9 \u062f\u0633\u062a\u06af\u0627\u0647\u06cc \u0639\u0631\u0636 \u0622\u0646 \u0628\u0632\u0631\u06af\u062a\u0631 \u0627\u0632 \u0627\u0631\u062a\u0641\u0627\u0639 \u0622\u0646 \u0628\u0627\u0634\u062f\u060c \u0627\u0633\u062a\u0627\u06cc\u0644 \u0645\u062e\u0635\u0648\u0635 \u0628\u0647 \u0622\u0646 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0634\u0648\u062f. \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0627\u0631 \u0627\u0632 orientation \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f. \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u062f\u0648 \u0645\u0642\u062f\u0627\u0631 landscape \u0648 portrait \u0631\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u062f \u06a9\u0647 \u062f\u0631 \u062d\u0627\u0644\u062a landscape \u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u06af\u0627\u0647 \u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0639\u0631\u0636 \u0622\u0646 \u0628\u06cc\u0634\u062a\u0631 \u0627\u0632 \u0627\u0631\u062a\u0641\u0627\u0639 \u0622\u0646 \u0645\u06cc \u0628\u0627\u0634\u062f\u060c \u0627\u0633\u062a \u0648 \u062f\u0631 \u0645\u0648\u0631\u062f \u062f\u06cc\u06af\u0631\u060c \u0627\u0631\u062a\u0641\u0627\u0639 \u0627\u0632 \u0639\u0631\u0636 \u0628\u06cc\u0634\u062a\u0631 \u0628\u0627\u0634\u062f.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-size: 16px;\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/&gt;\n    &lt;style&gt;\n      body {\n        background-color: lightgreen;\n      }\n\n      @media only screen and (orientation: landscape) {\n        body {\n          background-color: lightblue;\n        }\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/span><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"color: #000000; font-size: 16px;\">media query \u0647\u0627<\/span><\/h3>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0645\u062e\u062a\u0644\u0641\u06cc \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 media query \u0647\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u062f\u0631 \u062f\u0633\u062a\u06af\u0627\u0647 \u0647\u0627 \u0648 \u0635\u0641\u062d\u0627\u062a \u0628\u0627 \u0627\u0628\u0639\u0627\u062f \u0645\u062e\u062a\u0644\u0641\u060c \u0627\u0644\u0645\u0627\u0646 \u0647\u0627 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0634\u0648\u0646\u062f \u0648 \u06cc\u0627 \u0627\u0633\u062a\u0627\u06cc\u0644 \u0647\u0627\u06cc \u0622\u0646 \u0647\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u06a9\u0646\u062f.<\/span><\/p>\n\n\n\n<p><span style=\"color: #000000; font-size: 16px;\">\u0622\u0645\u0648\u0632\u0634 css \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0628\u0647 \u067e\u0627\u06cc\u0627\u0646 \u0645\u06cc \u0631\u0633\u062f. \u062a\u0644\u0627\u0634 \u0634\u062f \u062a\u0627 \u062f\u0631 \u0633\u0644\u0633\u0644\u0647 \u0622\u0645\u0648\u0632\u0634 \u0647\u0627\u06cc css\u060c \u062a\u0627 \u062d\u062f \u062e\u0648\u0628\u06cc \u0627\u0628\u0639\u0627\u062f \u0645\u062e\u062a\u0644\u0641 css \u0648 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0622\u0646 \u062a\u0639\u0631\u06cc\u0641 \u0634\u0648\u062f. Css \u06a9\u0627\u0631\u0628\u0631\u062f\u0647\u0627\u06cc \u0628\u0633\u06cc\u0627\u0631\u06cc \u062f\u0627\u0631\u062f \u0648 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0622\u0646 \u06a9\u0627\u0631\u0647\u0627\u06cc \u0628\u0633\u06cc\u0627\u0631 \u0632\u06cc\u0627\u062f\u06cc \u0631\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0631 \u0631\u0648\u06cc \u0627\u0644\u0645\u0627\u0646 \u0647\u0627\u06cc html \u0627\u0639\u0645\u0627\u0644 \u06a9\u0646\u06cc\u062f.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0646\u062d\u0648\u0647\u200c\u06cc \u0627\u06cc\u062c\u0627\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0648 \u0627\u0646\u062a\u0642\u0627\u0644 \u062f\u0631 css \u062f\u0631 \u062f\u0648 \u0645\u0642\u0627\u0644\u0647\u200c\u06cc \u0642\u0628\u0644 \u0628\u0627 \u0628\u062e\u0634\u06cc \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u062f\u0631 css \u0622\u0634\u0646\u0627 \u0634\u062f\u06cc\u062f. \u0627\u06cc\u0646 \u0642\u0633\u0645\u062a \u0628\u0627 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u062a\u0631 \u0628\u06cc\u0634\u062a\u0631\u06cc \u0647\u0645\u0686\u0648\u0646 \u0646\u062d\u0648\u0647\u200c\u06cc \u0627\u06cc\u062c\u0627\u062f \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0648 \u0627\u0646\u062a\u0642\u0627\u0644 \u062f\u0631 css \u0622\u0634\u0646\u0627 \u0645\u06cc \u0634\u0648\u06cc\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u0645\u0628\u0627\u062d\u062b \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u062a\u0631 \u0628\u0627 \u0633\u0627\u06cc\u0631 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0628\u0627\u0642\u06cc \u0645\u0627\u0646\u062f\u0647 [&hellip;]<\/p>\n","protected":false},"author":17,"featured_media":5908,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-5801","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programming-and-it-training"],"_links":{"self":[{"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/posts\/5801","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/comments?post=5801"}],"version-history":[{"count":4,"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/posts\/5801\/revisions"}],"predecessor-version":[{"id":67441,"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/posts\/5801\/revisions\/67441"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/media\/5908"}],"wp:attachment":[{"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/media?parent=5801"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/categories?post=5801"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/tags?post=5801"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}