CSS Plate for Your Recipe App

#css #beginners

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>

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;
}

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;
}

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: