This challenge has got me craving a burger now!

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;
    }

Comments

[Peter Kim Frank]

Wow! The melting cheese is awesome 🧀

[Ben Halpern]

Agreed. Beautiful touch.

[Sukhpinder Singh]

Who knew dairy could be so poetic? 😄🧀

Thanks @ben

[Sukhpinder Singh]

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

Just kidding....Thanks @peter :)

[sahra 💫]

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

[Sukhpinder Singh]

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!" 😄

[sahra 💫]

😅 Sure did. Nicely done 👍

[Ben Halpern]

Epic!

[Michael Tharrington]

I didn't think CSS art could make me hungry, and then you went and made this. 🤤

[Sukhpinder Singh]

I didn't realize my CSS art had such mouthwatering effects! I'll have to add a "Do Not Eat Your Screen" disclaimer next time. 😄🖌️

Thanks @michaeltharrington

[Nabil Alamin]

now I'm hungry

[Sukhpinder Singh]

You're welcome

[Jitendra Choudhary]

The color combination is nice, Sukhpinder 👌

[Sukhpinder Singh]

Thanks @jitendrachoudhary

[Rahul]

Looking fabulous..!!

[Sukhpinder Singh]

Thanks @rahul0809