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