Posted on Dec 12, 2020

CSS Plate for Your Recipe App

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: