{"id":3865,"date":"2022-09-02T00:48:32","date_gmt":"2022-09-02T00:48:32","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3865"},"modified":"2023-06-10T11:35:23","modified_gmt":"2023-06-10T11:35:23","slug":"css-card-paper-design-menu","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/css-card-paper-design-menu\/","title":{"rendered":"CSS Card &#8211; Paper Design Menu"},"content":{"rendered":"<p>CSS Card &#8211; Paper Design Menu refers to a specific design style that can be applied to a menu on a webpage using CSS (Cascading Style Sheets).<\/p>\n<p>This design style is inspired by the material design principles introduced by Google, which emphasize the use of subtle shadows, depth, and layers to create a visual hierarchy and enhance the user experience.<\/p>\n<p>In a paper design menu, the menu items are displayed as cards with a shadow effect that gives the illusion of depth and makes the items appear as if they are floating above the background.<\/p>\n<p>To create a paper design menu using CSS, you would typically use a combination of box-shadow, padding, and background-color to create the card effect.<\/p>\n<p><iframe style=\"width: 100%;\" title=\"CSS Card - Paper Design Menu\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/dyqvZqR?default-tab=result&amp;theme-id=dark\" height=\"650\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><span style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" data-mce-type=\"bookmark\" class=\"mce_SELRES_start\">\ufeff<\/span><span style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" data-mce-type=\"bookmark\" class=\"mce_SELRES_start\">\ufeff<\/span><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/dyqvZqR\"><br \/>\nCSS Card &#8211; Paper Design Menu<\/a> by Rengga Gumilar (<a href=\"https:\/\/codepen.io\/renggagumilar\">@renggagumilar<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<p>&nbsp;<\/p>\n<p>Here&#8217;s an example of CSS code that could be used to create a paper design menu:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">*,\r\n*::before,\r\n*::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n.main {\r\n  max-width: 1200px;\r\n  margin: 0 auto;\r\n}\r\n\r\n.cards {\r\n  display: grid;\r\n  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));\r\n  list-style: none;\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n.cards_item {\r\n  display: flex;\r\n  padding: 1rem;\r\n}\r\n\r\n.card_image {\r\n  height: calc(13*1.2rem);\r\n  padding: 1.2rem 1.2rem 0;\r\n  position:relative;\r\n}\r\n.card_image:before,\r\n.card_image:after{\r\n  content: \"\";\r\n  position: absolute;\r\n  width: 20px;\r\n  left: 60%;\r\n  top: 0;\r\n  height: 45px;\r\n  background: #e6e6e6b8;\r\n  transform: rotate(45deg);\r\n}\r\n.card_image:after{\r\n  transform: rotate(-45deg);\r\n  top:auto;\r\n  bottom:-22px;\r\n  left:40%;\r\n}\r\n.card_image img {\r\n  width:100%;\r\n  height:100%;\r\n  object-fit:cover;\r\n}\r\n\r\n.cards_item {\r\n  filter:drop-shadow(0 0 5px rgba(0, 0, 0, 0.25));\r\n}\r\n\r\n\r\n.card {\r\n  background-color: white;\r\n  border-radius: 0.25rem;\r\n  display: flex;\r\n  flex-direction: column;\r\n  overflow: hidden;\r\n  padding-left: 30px;\r\n  background: repeating-linear-gradient(#0000 0 calc(1.2rem - 1px),#66afe1 0 1.2rem) right bottom \/100% 100%,linear-gradient(red 0 0) 30px 0\/2px 100% #fff;\r\n  background-repeat: no-repeat;\r\n  line-height: 1.2rem;\r\n  -webkit-mask:radial-gradient(circle .8rem at 2px 50%,#0000 98%,#000)0 0\/100% 2.4rem;\r\n}\r\n\r\n.card_content {\r\n  padding: 1.2rem;\r\n}\r\n\r\nh2.card_title,p {\r\n  margin: 1.2rem 0;\r\n}\r\nh2.card_title {\r\n    font-size: 1.3em;\r\n}\r\nbody {\r\n  font-family:monospace;\r\n  background:#eee;\r\n}\r\n\r\nhtml {\r\n  font-size:15px;\r\n}<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS Card &#8211; Paper Design Menu refers to a specific design style <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/css-card-paper-design-menu\/\" title=\"CSS Card &#8211; Paper Design Menu\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":3866,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[461,462,463,103,392],"newstopic":[],"class_list":{"0":"post-3865","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-html-css","8":"tag-css-card","9":"tag-item-hover-color-background","10":"tag-paper-design-menu","11":"tag-web-design","12":"tag-web-design-2023"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3865","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=3865"}],"version-history":[{"count":1,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3865\/revisions"}],"predecessor-version":[{"id":3867,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3865\/revisions\/3867"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3866"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=3865"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=3865"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=3865"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=3865"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}