CSS Plate for Your Recipe App
Tags: css, beginners
Published: 2020-12-12 03:17:26

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](https://dhintz89.github.io/whats_cookin_frontend/) 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:
![Empty Plate](https://dev-to-uploads.s3.amazonaws.com/i/3thmhdv2eul2qjoqmnnf.png)

And here's how it looks once it's filled with a recipe:
![Filled Plate](https://dev-to-uploads.s3.amazonaws.com/i/eld41sweszlhyl65sp1w.png)

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](https://dev-to-uploads.s3.amazonaws.com/i/d561ndl9az2zx1pzrho7.png)

After:
![Whats Cookin Website Plates](https://dev-to-uploads.s3.amazonaws.com/i/d6lmcc636la9o41p5mwu.png)

Pretty neat, huh?