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 tofit-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:
And here's how it looks once it's filled with a recipe:
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.
Pretty neat, huh?
Top comments (0)