Do you want fries with that?

#frontendchallenge #devchallenge #css

This is a submission for DEV Challenge v24.03.20, CSS Art: Favorite Snack.

Inspiration

If you are familiar with the cult classic movie by Tarantino, this needs no introduction, and yes, it is an actual burger in France. Being Dutch myself, I can also confirm that we do in fact dunk our french fries in mayonnaise and we just don't care, we're loving it.
We also have venue's called 'snackbars' and you can get your fries and burgers there, so we're going with a very broad definition of snacks from here on out.

Demo

Journey

Even if I do not consider myself to be much of a CSS artist, when learning about this challenge, something told me that I could probably pull off a burger in pure CSS. Just start with stacking some simple shapes:

Buns & burger

A reliable trick to get rounded corners is using border-radius, that works for the buns and the burger itself. To add the illusion of depth box-shadow can be used, by applying inset the shading will be placed inside of the element. Soft shades can be achieved by setting the color to black and the alpha to be about half opacity.

  box-shadow: inset 10px 10px 10px #00000066;

For the bottom bun, the shadow needs to be at the bottom. So negative values were used for the X and Y offset.

Lettuce & cheese

This would pose a challenge, I knew from the start. My go-to solution here would be to use SVG, as stated in my previous article, I do love SVG and even though the challenge allows it: that just feels like cheating.

Surely there must be a way to visualize a sine wave in CSS? Well, turns out: there is even a generator for it. It's very clever in how it uses a mask to create the wavy shape. An added bonus is that gradients can be used, by mixing lighter and darker greens you get an illusion of depth as well.

I had planned on creating 2 half squares and rotate it so the tip would point down for the cheese. However, by lowering the frequency of the wave and changing the color, it panned out to be a pretty nice effect for this purpose too.

Seeds

The last detail would be the sesame seeds on the bun, I thought this would be easy. But I sure was wrong about that! Creating the 'pill' shape is just a variation of the border-radius trick again, but then you got it either facing vertically or horizontally. That is not going to look organic on the bun.

Using the rotate function of transform will angle it, but then things start to get messy: every element placed afterwards will have the rotation applied to it as well. That makes positioning the element very interesting because: when rotated enough, left starts to become more like up or down. There are ways to reset it, but I decided to just have fun with it.

By placing a rotate(5deg) in the seed class:

.seed {
  background: #FFDEB3CC;
  border-radius: 50%;
  position: absolute;
  transform: translate(8px, -8px) rotate(5deg);
}

.horizontal {
  width: 16px;
  height: 8px;
}

.vertical {
  width: 8px;
  height: 16px;
}

Will take the rotation from the previous HTML element and add another 5 degrees on top of that. The translate function is one of the ways to make sure the seeds will not be packed to much together, but by including a negative offset it will also act as a counter from the curve (a donut shape) that will start to form when enough elements are added.

Two variations of the seed are used, one with a horizontal aspect and one vertical. Since the added rotation is just a tiny bit and elements are mostly placed from left to right, it becomes very noticeable when two of them are placed close to each other. By switching orientation, this breaks things up just enough to appear random.

4 classes are used to scatter the seeds in a somewhat random pattern with different spacing between them. I just numbered them but they are mostly used without any specific order:

.n1 {
  top: 50px;
  left: 60px;
}

There is a fixed number of seeds I could place on the bun though. For some reason scrollbars start to appear when there are too many placed. I think this is because the browser still calculates the elements on the original position before taking the rotate function into account. Indeed, when removing the rotate function from the CSS, the seeds appear starting to crawl slowly up and out of the screen.

Background

I used a template for a gradient called 'rastafari'. I wanted to use bright colors that were reminiscent of the colors that the big burger chains use. The clown with the big arches uses red and yellow and the king uses green and yellow. Does rastafari fit in with the theme? The munchies? It's a stretch. I know.

It did need some tweaking: the colors interfered with the ones used in the burger, green matching with the lettuce, yellow flowing to red turns to the same orange used for the buns. Plus a background should not try to steal the show. Setting the opacity to 60% did fix that, but now it looked too faded. Setting the body to black made it too dark. Brown, however, a color already used for the burger gives it a swirl of that dated retro vibe. Exactly the kind that Tarantino purposely tends to use in his movies.

Font

The movie uses: 'Tom Carnase’s ITC Busorama' for the title, with several of the original alternates. That's not free to use though. The Arvo font from google, if stretched enough vertically, will start to look fairly similar:

.shadow {
  color: #F6C10B;
  font-family: Arvo;
  font-weight: bold;
  text-shadow:
    -3px -3px 0 #222,
    3px -3px 0 #222,
    -3px 3px 0 #222,
    3px 3px 0 #222;
  line-height: 0.8em;

  transform: scaleY(1.5);
  -webkit-transform: scaleY(1.5);
  -moz-transform: scaleY(1.5);
  position: fixed;
}