This week I put together this cute little Pen for the Dessert CodePen challenge!

I’m pleased with it, overall. There were some really funky things I ran into with positioning, but I got to try a few new techniques on this Pen. I used this Dribbble post for art-style inspiration, and ran with it!

Texture

First of all, that texture! I have attached to this post the texture that I used for the entire Pen. I rarely use images in my CSS projects, but I wanted to experiment with multiple backgrounds and thought this would be a fun way to try. Layering the backgrounds involved some variation of these two lines across the whole CSS file:

background:
	url(felt.jpg) (0 0) / (10em 10em),
	[background color behind image];
background-blend-mode: hard-light;

Throughout the CSS you can see that sometimes I have just a plain color for the background color, sometimes I have a radial gradient, and I also change the size of that background as well in those parenthesized parts. Changing the size led to similar (but different!) variations of the pattern, which was fun to play around with.

Clip paths

Another interesting thing that was really fun to work with was the clip paths. Each of those little rice balls have a clip path that cuts off the bottom of them when they’re “in” the syrup, and it animates with @keyframes to move the path around. I almost always use this CSS clip-path tool to start off my paths. It’s a really helpful starting ground and from there I just hand-edited the animations for each of the balls there. I admit I had never animated clip-paths before, and it worked better than I expected!

Animations

Animating all of the different parts involved working on the more subtle things. If you’ll notice, the two non-scooped rice balls bob a little faster than the spoon and the third rice ball move, to make the syrup seem a little more liquid.

The spoon was a funky one where I kind of had to debated if I wanted to change the transform-origin (I ended up not after playing with it), and I wanted it to go straight up and then scoot to the left, to feel like I was more naturally “spooning up” the rice ball. The scooped up rice ball has a few different animations on it, where you can see we’re increasing the eye size and shrinking the mouth as it’s lifted, changing the position with the spoon (which was incredibly manual to do since I had to adjust for both the spoon position and rotation), and then rotating the face slightly to make it look like the ball moved with the spoon. All of these keyframes are at the bottom of the file for you to check out! With the exception of the “bobbing” rice balls, all of the rest are 3 seconds long.

Gradients and overflow quirks

I mentioned this back in previous posts, but for gradients on my Pens, I almost always start by using this CSS Gradient Generator and adjusting from there. This one was no exception, where almost everything was a gradient! Most of my experimentation in this Pen was positioning the radial gradients to make things look more round and natural (the syrup and the spoon in particular were fun to make and layer with everything). Interestingly enough, the rice balls actually are the only things that use just solid backgrounds. I relied on inset box-shadows to give them depth.

And finally, the weirdest part of the Pen: on mobile, I discovered that using overflow: hidden on an absolutely positioned element doesn’t always work! I use that property to make the syrup and the rice balls fit “inside” the bowl. If you look at the .contents class you’ll see how I kind of hacked a transparent mask for those around the bowl’s lip. Luckily I had everything positioned to the window anyway, so I could easily change the absolute positioning to fixed and didn’t have to worry about that breaking everything. I admit I don’t fully understand the issue, but hey, it works!

Anyway, check out the code, let me know if you have questions, and thanks for reading!