{"id":49,"date":"2023-04-23T13:02:40","date_gmt":"2023-04-23T10:02:40","guid":{"rendered":"http:\/\/author"},"modified":"2024-10-28T17:59:46","modified_gmt":"2024-10-28T14:59:46","slug":"css-superpowers","status":"publish","type":"post","link":"https:\/\/coding-academy.org\/blog\/css-superpowers\/","title":{"rendered":"\u05db\u05d5\u05d7\u05d5\u05ea \u05d4\u05e2\u05dc \u05e9\u05dc CSS"},"content":{"rendered":"\n<p>\u05d9\u05e9 \u05e2\u05dc\u05d9\u05d9\u05d4 \u05de\u05d3\u05d4\u05d9\u05de\u05d4 \u05d1\u05e9\u05d9\u05de\u05d5\u05e9 \u05d1\u05d8\u05db\u05e0\u05d5\u05dc\u05d5\u05d2\u05d9\u05d5\u05ea \u05d0\u05d9\u05e0\u05d8\u05e8\u05e0\u05d8, \u05d5\u05de\u05e4\u05ea\u05d7\u05d9 \u05e4\u05e8\u05d5\u05e0\u05d8\u05d0\u05e0\u05d3 \u05d8\u05d5\u05d1\u05d9\u05dd \u05d4\u05dd \u05d0\u05d7\u05d3 \u05d4\u05ea\u05e4\u05e7\u05d9\u05d3\u05d9\u05dd \u05d4\u05e7\u05e9\u05d9\u05dd \u05d1\u05d9\u05d5\u05ea\u05e8 \u05dc\u05d2\u05d9\u05d5\u05e1, CSS \u05d4\u05d9\u05d0 \u05e1\u05d9\u05d1\u05d4 \u05de\u05e9\u05de\u05e2\u05d5\u05ea\u05d9\u05ea \u05dc\u05db\u05da.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/vyaron.github.io\/ca-blog\/img\/css-punes\/1.png\" alt=\"titanic\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/vyaron.github.io\/ca-blog\/img\/css-punes\/11.png\" alt=\"CSS titanic\"\/><\/figure>\n\n\n\n<p>\u05d9\u05e9 \u05d4\u05e1\u05d1\u05d5\u05e8\u05d9\u05dd \u05d1\u05d8\u05e2\u05d5\u05ea \u05e9CSS \u05d6\u05d4 \u05d1\u05e1\u05da \u05d1\u05db\u05dc \u05e6\u05d1\u05e2\u05d9\u05dd \u05d5\u05e4\u05d9\u05e7\u05e1\u05dc\u05d9\u05dd \u05d5\u05e2\u05e0\u05d9\u05d9\u05e0\u05d9\u05dd \u05d4\u05e7\u05e9\u05d5\u05e8\u05d9\u05dd &#8220;\u05e8\u05e7 \u05dc\u05e2\u05d9\u05e6\u05d5\u05d1&#8221; \u05d5\u05dc\u05d0 \u05dc\u05ea\u05db\u05e0\u05d5\u05ea, \u05dc\u05de\u05e2\u05e9\u05d4 \u2013 \u05e9\u05d9\u05de\u05d5\u05e9 \u05e0\u05db\u05d5\u05df \u05d1CSS \u05d4\u05d9\u05d0 \u05de\u05d9\u05d5\u05de\u05e0\u05d5\u05ea \u05d4\u05e0\u05d3\u05e1\u05d9\u05ea \u05de\u05d5\u05e8\u05db\u05d1\u05ea.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/vyaron.github.io\/ca-blog\/img\/css-punes\/2.png\" alt=\"bermuda\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/vyaron.github.io\/ca-blog\/img\/css-punes\/22.png\" alt=\"CSS bermude\"\/><\/figure>\n\n\n\n<p>\u05d0\u05dd \u05e0\u05e2\u05e9\u05d4 \u05e0\u05db\u05d5\u05df, \u05d4\u05db\u05d5\u05d7 \u05e9\u05dc CSS \u05de\u05d0\u05e4\u05e9\u05e8 \u05dc\u05d1\u05e0\u05d5\u05ea \u05de\u05d5\u05e6\u05e8\u05d9\u05dd \u05d9\u05e4\u05d9\u05e4\u05d9\u05d9\u05dd, \u05e9\u05de\u05e2\u05e0\u05d9\u05e7\u05d9\u05dd \u05d7\u05d5\u05d5\u05d9\u05d9\u05ea \u05de\u05e9\u05ea\u05de\u05e9 \u05d8\u05d5\u05d1\u05d4 \u05d5\u05de\u05d3\u05d5\u05d9\u05e7\u05ea, \u05dc\u05d4\u05d5\u05d1\u05d9\u05dc \u05d0\u05ea \u05d4\u05de\u05e9\u05ea\u05de\u05e9 \u05d1\u05e7\u05dc\u05d5\u05ea \u05d0\u05dc \u05d4\u05e4\u05e2\u05d5\u05dc\u05d4 \u05d4\u05de\u05d1\u05d5\u05e7\u05e9\u05ea, \u05d5\u05dc\u05d4\u05d5\u05e1\u05d9\u05e3 \u05de\u05e9\u05d7\u05e7\u05d9\u05d5\u05ea \u05d5\u05e2\u05e0\u05d9\u05d9\u05df.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/vyaron.github.io\/ca-blog\/img\/css-punes\/4.png\" alt=\"big-bang\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/vyaron.github.io\/ca-blog\/img\/css-punes\/44.png\" alt=\"CSS big-bang\"\/><\/figure>\n\n\n\n<p>\u05d0\u05e4\u05dc\u05d9\u05e7\u05e6\u05d9\u05d5\u05ea \u05de\u05d5\u05d3\u05e8\u05e0\u05d9\u05d5\u05ea \u05e0\u05e8\u05d0\u05d5\u05ea \u05e0\u05d4\u05d3\u05e8 \u05d5\u05d9\u05db\u05d5\u05dc\u05d5\u05ea \u05dc\u05d4\u05d9\u05d5\u05ea \u05de\u05d0\u05d5\u05d3 \u05d0\u05d9\u05e0\u05e4\u05d5\u05e8\u05de\u05d8\u05d9\u05d1\u05d9\u05d5\u05ea \u05e2\u05dc \u05de\u05e1\u05da \u05d2\u05d3\u05d5\u05dc, \u05d1\u05e0\u05d5\u05e1\u05e3 \u05e2\u05dc\u05d9\u05d4\u05df \u05dc\u05d4\u05d9\u05d5\u05ea \u05de\u05d5\u05ea\u05d0\u05de\u05d5\u05ea \u05d5\u05dc\u05d4\u05e6\u05d9\u05d2 \u05de\u05de\u05e9\u05e7 \u05de\u05e9\u05ea\u05de\u05e9 \u05de\u05d9\u05e0\u05d9\u05de\u05dc\u05d9\u05e1\u05d8\u05d9 \u05d5\u05de\u05de\u05d5\u05e7\u05d3 \u05d9\u05d5\u05ea\u05e8 \u05db\u05d0\u05e9\u05e8 \u05d4\u05dc\u05e7\u05d5\u05d7 \u05de\u05e9\u05ea\u05de\u05e9 \u05d1\u05d8\u05d0\u05d1\u05dc\u05d8, \u05d1\u05d8\u05dc\u05e4\u05d5\u05df \u05d0\u05d5 \u05e2\u05dc \u05de\u05e1\u05da \u05e9\u05e2\u05d5\u05df.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/vyaron.github.io\/ca-blog\/img\/css-punes\/5.png\" alt=\"pisa tower\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/vyaron.github.io\/ca-blog\/img\/css-punes\/55.png\" alt=\"CSS pisa tower\"\/><\/figure>\n\n\n\n<p>CSS \u05d8\u05d5\u05d1 \u05d4\u05d5\u05d0 \u05db\u05d6\u05d4 \u05e9\u05e0\u05d9\u05ea\u05df \u05dc\u05d4\u05ea\u05d0\u05d9\u05dd \u05d0\u05d5\u05ea\u05d5 \u05d1\u05e7\u05dc\u05d5\u05ea \u05d2\u05dd \u05dc\u05d3\u05e8\u05d9\u05e9\u05d5\u05ea \u05d4\u05e2\u05e1\u05e7\u05d9\u05d5\u05ea \u05d4\u05de\u05e9\u05ea\u05e0\u05d5\u05ea, \u05d5\u05e2\u05d3\u05d9\u05d9\u05df \u05dc\u05d4\u05d9\u05e9\u05d0\u05e8 \u05e7\u05d8\u05df, \u05de\u05d5\u05d3\u05d5\u05dc\u05e8\u05d9 \u05d5\u05dc\u05d0 \u05d9\u05e7\u05e8 \u05de\u05d1\u05d7\u05d9\u05e0\u05ea \u05d4\u05ea\u05d7\u05d6\u05d5\u05e7\u05d4 \u05d5\u05d4\u05d4\u05ea\u05e4\u05ea\u05d7\u05d5\u05ea \u05dc\u05d0\u05d5\u05e8\u05da \u05d7\u05d9\u05d9 \u05d4\u05de\u05d5\u05e6\u05e8.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/vyaron.github.io\/ca-blog\/img\/css-punes\/6.png\" alt=\"ninja\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/vyaron.github.io\/ca-blog\/img\/css-punes\/66.png\" alt=\"CSS ninja\"\/><\/figure>\n\n\n\n<p>\u05d1\u05e9\u05d9\u05de\u05d5\u05e9 \u05dc\u05d0 \u05e0\u05db\u05d5\u05df, \u05d4-CSS \u05e9\u05dc \u05d4\u05de\u05d5\u05e6\u05e8 \u05d9\u05d4\u05e4\u05d5\u05da \u05dc\u05e1\u05d9\u05d5\u05d8 \u05d4\u05de\u05d0\u05d5\u05d7\u05e1\u05df \u05d1\u05e7\u05d1\u05e6\u05d9\u05dd, \u05d0\u05d6\u05d5\u05e8 \u05de\u05d0\u05de\u05d1\u05d5-\u05d2&#8217;\u05d0\u05de\u05d1\u05d5-\u05e7\u05e1\u05dd-\u05e9\u05d7\u05d5\u05e8 \u05e9\u05de\u05e4\u05ea\u05d7\u05d9\u05dd \u05e0\u05de\u05e0\u05e2\u05d9\u05dd \u05de\u05de\u05e0\u05d5, \u05e2\u05dd \u05e8\u05d2\u05e8\u05e1\u05d9\u05d5\u05ea \u05e8\u05d1\u05d5\u05ea \u05d5\u05d4\u05e9\u05e4\u05e2\u05d4 \u05dc\u05d0 \u05e6\u05e4\u05d5\u05d9\u05d4 \u05d1\u05e2\u05ea \u05d1\u05d9\u05e6\u05d5\u05e2 \u05e9\u05d9\u05e0\u05d5\u05d9\u05d9\u05dd.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/vyaron.github.io\/ca-blog\/img\/css-punes\/7.png\" alt=\"muscles\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/vyaron.github.io\/ca-blog\/img\/css-punes\/77.png\" alt=\"CSS muscles\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">\u05d4\u05e0\u05d4 \u05db\u05de\u05d4 \u05de\u05e9\u05d7\u05e7\u05d9\u05dd \u05d7\u05d1\u05d9\u05d1\u05d9\u05dd \u05e9\u05de\u05d0\u05e4\u05e9\u05e8\u05d9\u05dd \u05dc\u05d4\u05ea\u05e0\u05e1\u05d5\u05ea \u05d1\u05db\u05dc\u05d9\u05dd \u05d7\u05e9\u05d5\u05d1\u05d9\u05dd \u05d1\u05e9\u05e4\u05ea CSS:<\/h2>\n\n\n\n<ul>\n<li><a target=\"_blank\" href=\"http:\/\/flukeout.github.io\/\" rel=\"noreferrer noopener\">Know your CSS Selectors<\/a><\/li>\n\n\n\n<li><a target=\"_blank\" href=\"https:\/\/cssgridgarden.com\/\" rel=\"noreferrer noopener\">Create any layout with a CSS Grid<\/a><\/li>\n\n\n\n<li><a target=\"_blank\" href=\"http:\/\/flexboxfroggy.com\/\" rel=\"noreferrer noopener\">Master the flexbox<\/a><\/li>\n<\/ul>\n\n\n\n<p>Funny image ideas taken from&nbsp;<a target=\"_blank\" href=\"https:\/\/saijogeorge.com\/css-puns\/\" rel=\"noreferrer noopener\">here<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u05d4\u05d1\u05d9\u05e7\u05d5\u05e9 \u05d4\u05d2\u05d5\u05d1\u05e8 \u05dc\u05de\u05ea\u05db\u05e0\u05ea\u05d9 \u05e4\u05e8\u05d5\u05e0\u05d8\u05d0\u05e0\u05d3 \u05de\u05e2\u05d5\u05dc\u05d9\u05dd, \u05d4\u05de\u05e1\u05d5\u05d2\u05dc\u05d9\u05dd \u05dc\u05d1\u05e0\u05d5\u05ea \u05d0\u05e4\u05dc\u05d9\u05e7\u05e6\u05d9\u05d5\u05ea \u05e9\u05e0\u05e8\u05d0\u05d5\u05ea \u05de\u05dc\u05d9\u05d5\u05df \u05d3\u05d5\u05dc\u05e8 \u05d1\u05db\u05dc DEVICE: \u05de\u05d7\u05e9\u05d1, \u05d8\u05dc\u05e4\u05d5\u05df, \u05d8\u05dc\u05d5\u05d9\u05d6\u05d9\u05d4 \u05d0\u05d5 \u05e9\u05e2\u05d5\u05df<\/p>\n","protected":false},"author":2,"featured_media":220,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/coding-academy.org\/blog\/wp-json\/wp\/v2\/posts\/49"}],"collection":[{"href":"https:\/\/coding-academy.org\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coding-academy.org\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coding-academy.org\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/coding-academy.org\/blog\/wp-json\/wp\/v2\/comments?post=49"}],"version-history":[{"count":2,"href":"https:\/\/coding-academy.org\/blog\/wp-json\/wp\/v2\/posts\/49\/revisions"}],"predecessor-version":[{"id":3325,"href":"https:\/\/coding-academy.org\/blog\/wp-json\/wp\/v2\/posts\/49\/revisions\/3325"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/coding-academy.org\/blog\/wp-json\/wp\/v2\/media\/220"}],"wp:attachment":[{"href":"https:\/\/coding-academy.org\/blog\/wp-json\/wp\/v2\/media?parent=49"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coding-academy.org\/blog\/wp-json\/wp\/v2\/categories?post=49"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coding-academy.org\/blog\/wp-json\/wp\/v2\/tags?post=49"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}