Sukhpinder Singh

Posted on Mar 20, 2024 • Edited on Mar 31, 2024

This challenge has got me craving a burger now!

#frontendchallenge #devchallenge #webdev #css

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

Inspiration

Alright, I'm diving into the world of CSS wizardry to whip up a burger that'll make you drool—complete with melty cheese and veggies dancing on top! 🍔

This challenge has got me craving a burger now!

Demo

Journey

Designed the "Burger", converted sketches to HTML/CSS, focused on details like colors and shapes, learned CSS techniques, proud of attention to detail, aiming to improve efficiency in future projects.

Absolute Positioning:

Imagine you’re building a burger with different layers (bun, tomato, onion, etc.). Absolute positioning is like placing each ingredient exactly where you want it on the burger.
In CSS, it’s like saying, “Put the tomato slice right here, on top of the bun.”

Example:

    .tomato {
      position: absolute;
      top: 20px;
      left: 50px;
    }

Container Styling:

Think of the burger as being inside a box (the container).
We make sure the box has a fixed size (200px by 200px) and is centered both horizontally and vertically on the table.

Example:

    .container {
      margin: auto;
      width: 200px;
      height: 200px;
    }

Burger Components Styling:

Each part of the burger (like the bun, cheese, and ham) gets its own special look.
For example, we give the bun a textured appearance to mimic sesame seeds or a baked texture.

Example:

    .bun {
      background-image: radial-gradient(rgba(255, 255, 255, 0.7) 7%, transparent 8%);
    }

Pseudo-elements (:before and :after):

Pseudo-elements are like invisible helpers that add extra details to an element.
In our burger, we use them to create eyes and a mouth for the face.

Example

    .face:before,
    .face:after {
      position: absolute;
      content: '';
    }

Box Shadow and Inset Shadow:

The .ham class applies a box shadow with an inset effect to create a shadowed appearance for the ham patty.

Example

    .ham {
      box-shadow: inset -5px -5px 5px rgba(68, 68, 68, 0.3);
    }

CSS Animation (@keyframes):

An animation named melting is defined using @keyframes.
The .melt class applies this animation to create a melting cheese effect that translates (moves) vertically.

Example

    @keyframes melting {
      100% {
        transform: translateY(15px);
      }
    }
    .melt {
      animation: 5s melting ease infinite;
    }

Top comments (16)

Peter Kim Frank • Mar 20 '24

Wow! The melting cheese is awesome 🧀

Ben Halpern • Mar 20 '24

Agreed. Beautiful touch.

Sukhpinder Singh • Mar 21 '24

Who knew dairy could be so poetic? 😄🧀

Thanks @ben

Sukhpinder Singh • Mar 21 '24

Watching cheese melt is like witnessing a deliciously slow-motion lava flow! 🌋🧀 Just try not to drool too much

Just kidding....Thanks @peter :)

sahra 💫 • Mar 20 '24

This is amazing work. Now I'm craving a burger 😅

Sukhpinder Singh • Mar 20 '24

Haha, sure! Basically, you went from admiring something cool to suddenly really wanting a burger. It's like your brain said, "Wow, that's nice... but you know what would be even nicer? A delicious burger!" 😄