DEV Community

loading...
Cover image for CSS Plate for Your Recipe App

CSS Plate for Your Recipe App

Daniel Hintz
Junior full-stack developer with focus in JavaScript (ES6) and Ruby. Experience with React, Redux, Rails, among others.
・3 min read

I was short on time this week, so I've decided to do a short and simple post - I'm going to build a plate design using CSS. I will be using it in my recipe website to house the returned recipes, the idea is that it'll look like each recipe is sitting on a plate.

Starting out, I want to use the least html as possible so that I don't need to keep track of the extra elements. I'm going to have a plate div, which will serve as a wrapper and the rim of the plate, and an inner_plate span that will be the center of the plate and will hold the content.

<div class="plate">
  <span class="inner_plate"></span>
</div>
Enter fullscreen mode Exit fullscreen mode

Next I'll add the CSS to make the design come to life. There are a few key highlights here to notice:

  • Each recipe will have an image, which is what will dictate the sizing, and I set each image size to 240x150 in the imported html. Because of this, each plate should be fairly uniform in size and shape (it might elongate a little with a really long recipe title due to wrapping, which is okay for my purposes).
  • By then setting .plate and .inner_plate size to fit-content I can rely on padding and margins to give a flexible shape to each design.
  • Setting font-size on the plate element allows me to use em/rem to provide flexible sizing for the box-shadows (since they can't use percentage values).
  • The outer box-shadow provides the shadow effect that makes the plate look 3D, while the inner shadow makes is what makes it look like there's a sloping edge from the rim to the main part of the plate.
.plate {
  position: relative;
  display: inline-flex; // inline so plates can organize next to one another
  flex-direction: column;
  height: fit-content;
  width: fit-content;
  background-color: #e4e4e4;
  border-radius: 50%;
  justify-content: center;
  font-size: 15px;
  box-shadow: 2px 2px 8px 2px #000;
  padding: 30px;
  margin: 20px;
}

.inner_plate {
  align-self: center;
  border-radius: 50%;
  height: fit-content;
  width: fit-content;
  border: #dddddd solid 2px;
  background-color: #d2d2d2;
  font-size: 1rem;
  box-shadow: 0 0 10px 10px #cfcfcf;
  justify-content: center;
  padding: 25px;
  text-align: center;
}

.inner_plate img {
    margin-top: 5px;
    max-width: 100%;
    max-height: 150px;
    border-radius: 40%;
    z-index: 1;
    position: relative;
    margin: 25px 2px;
}

.inner_plate h3 {
    max-width: 250px;
    padding: 0 15px;
}
Enter fullscreen mode Exit fullscreen mode

Finally, I want to add a lighting effect to my plate to go along with the shadow that I gave it. Since I'm keeping HTML to a minimum, I'll use an ::after pseudo-element to add a glare. An offset box-shadow will give it that soft glare-like edge and it can scale along with the inner-plate because it's all set relative to the inner-plate sizing (size is percentage of inner_plate size & box-shadow is percentage of font-size).

.inner_plate::after {
  content: "";
  position: absolute;
  background-color: #e3e3e3;
  height: 40%;
  width: 20%;
  display: block;
  border-radius: 50%;
  transform: rotate(34deg);
  right: 21%;
  top: 42%;
  font-size: inherit;
  box-shadow: -.6em .2em 1em 1em #e3e3e3;
}
Enter fullscreen mode Exit fullscreen mode

And there it is! When empty, you can really see how the subtle lighting effect makes it look more realistic and makes the shadow look real:
Empty Plate

And here's how it looks once it's filled with a recipe:
Filled Plate

I think this little effect makes my site a lot more fun and engaging. Here what it looks like when you search for recipes on the site.

Before:
Whats Cookin Website Cards

After:
Whats Cookin Website Plates

Pretty neat, huh?

Discussion (0)