DEV Community

Cover image for This challenge has got me craving a burger now!
Sukhpinder Singh
Sukhpinder Singh

Posted on • Updated on

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;
    }
Enter fullscreen mode Exit fullscreen mode

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;
    }
Enter fullscreen mode Exit fullscreen mode

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%);
    }
Enter fullscreen mode Exit fullscreen mode

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: '';
    }
Enter fullscreen mode Exit fullscreen mode

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);
    }
Enter fullscreen mode Exit fullscreen mode

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;
    }
Enter fullscreen mode Exit fullscreen mode

Top comments (16)

Collapse
 
peter profile image
Peter Kim Frank

Wow! The melting cheese is awesome 🧀

Collapse
 
ben profile image
Ben Halpern

Agreed. Beautiful touch.

Collapse
 
ssukhpinder profile image
Sukhpinder Singh

Who knew dairy could be so poetic? 😄🧀

Thanks @ben

Collapse
 
ssukhpinder profile image
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 :)

Collapse
 
sarahokolo profile image
sahra 💫

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

Collapse
 
ssukhpinder profile image
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!" 😄

Collapse
 
sarahokolo profile image
sahra 💫

😅 Sure did. Nicely done 👍

Collapse
 
ben profile image
Ben Halpern

Epic!

Collapse
 
michaeltharrington profile image
Michael Tharrington • Edited

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

Collapse
 
ssukhpinder profile image
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

Collapse
 
arndom profile image
Nabil Alamin

now I'm hungry

Collapse
 
ssukhpinder profile image
Sukhpinder Singh

You're welcome

Collapse
 
jitendrachoudhary profile image
Jitendra Choudhary

The color combination is nice, Sukhpinder 👌

Collapse
 
ssukhpinder profile image
Sukhpinder Singh
Collapse
 
rahul0809 profile image
Rahul

Looking fabulous..!!

Collapse
 
ssukhpinder profile image
Sukhpinder Singh

Thanks @rahul0809