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)
Wow! The melting cheese is awesome 🧀
Agreed. Beautiful touch.
Who knew dairy could be so poetic? 😄🧀
Thanks @ben
Watching cheese melt is like witnessing a deliciously slow-motion lava flow! 🌋🧀 Just try not to drool too much
Just kidding....Thanks @peter :)
This is amazing work. Now I'm craving a burger 😅
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!" 😄
😅 Sure did. Nicely done 👍
Epic!
I didn't think CSS art could make me hungry, and then you went and made this. 🤤
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
now I'm hungry
You're welcome
The color combination is nice, Sukhpinder 👌
Thanks @jitendrachoudhary
Looking fabulous..!!
Thanks @rahul0809