CSS Card – Paper Design Menu

CSS Card – Paper Design Menu refers to a specific design style that can be applied to a menu on a webpage using CSS (Cascading Style Sheets).

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.

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.

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.

Here’s an example of CSS code that could be used to create a paper design menu:

*,
*::before,
*::after {
  box-sizing: border-box;
}

.main {
  max-width: 1200px;
  margin: 0 auto;
}

.cards {
  display: grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.cards_item {
  display: flex;
  padding: 1rem;
}

.card_image {
  height: calc(13*1.2rem);
  padding: 1.2rem 1.2rem 0;
  position:relative;
}
.card_image:before,
.card_image:after{
  content: "";
  position: absolute;
  width: 20px;
  left: 60%;
  top: 0;
  height: 45px;
  background: #e6e6e6b8;
  transform: rotate(45deg);
}
.card_image:after{
  transform: rotate(-45deg);
  top:auto;
  bottom:-22px;
  left:40%;
}
.card_image img {
  width:100%;
  height:100%;
  object-fit:cover;
}

.cards_item {
  filter:drop-shadow(0 0 5px rgba(0, 0, 0, 0.25));
}


.card {
  background-color: white;
  border-radius: 0.25rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-left: 30px;
  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;
  background-repeat: no-repeat;
  line-height: 1.2rem;
  -webkit-mask:radial-gradient(circle .8rem at 2px 50%,#0000 98%,#000)0 0/100% 2.4rem;
}

.card_content {
  padding: 1.2rem;
}

h2.card_title,p {
  margin: 1.2rem 0;
}
h2.card_title {
    font-size: 1.3em;
}
body {
  font-family:monospace;
  background:#eee;
}

html {
  font-size:15px;
}