CSS Art

<!-- HTML -->
<div class="sunset">
  <div class="sunset-sky"></div>
  <div class="sunset-sun"></div>
  <div class="sunset-cloud"></div>
  <div class="sunset-water"></div>
  <div class="sunset-reflection"></div>
</div>

/* CSS */
.sunset { width: 300px; height: 220px; position: relative; overflow: hidden; border-radius: 12px; background: #0d1117; }
.sunset-sky { position: absolute; inset: 0; background: linear-gradient(180deg, #1a1a2e 0%, #16213e 30%, #e94560 60%, #f97316 80%, #fbbf24 100%); animation: sunsetShift 8s ease-in-out infinite alternate; }
.sunset-sun { position: absolute; bottom: 35%; left: 50%; transform: translateX(-50%); width: 60px; height: 60px; border-radius: 50%; background: #fbbf24; box-shadow: 0 0 40px #fbbf24, 0 0 80px #f97316; animation: sunPulse 4s ease-in-out infinite; }
.sunset-cloud { position: absolute; top: 25%; left: -80px; width: 80px; height: 24px; background: rgba(255,255,255,0.15); border-radius: 20px; animation: cloudDrift 12s linear infinite; }
.sunset-water { position: absolute; bottom: 0; left: 0; right: 0; height: 30%; background: linear-gradient(180deg, #0f3460, #16213e); opacity: 0.8; }
.sunset-reflection { position: absolute; bottom: 5%; left: 50%; transform: translateX(-50%); width: 40px; height: 50px; background: linear-gradient(180deg, #fbbf2460, transparent); filter: blur(4px); animation: reflectionWave 3s ease-in-out infinite; }
@keyframes sunsetShift { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(15deg); } }
@keyframes sunPulse { 0%,100% { box-shadow: 0 0 40px #fbbf24, 0 0 80px #f97316; } 50% { box-shadow: 0 0 60px #fbbf24, 0 0 100px #f97316; } }
@keyframes cloudDrift { from { transform: translateX(0); } to { transform: translateX(500px); } }
@keyframes reflectionWave { 0%,100% { transform: translateX(-50%) scaleX(1); } 50% { transform: translateX(-50%) scaleX(1.3); } }

<!-- HTML -->
<div class="coffee">
  <div class="coffee-steam steam-1"></div>
  <div class="coffee-steam steam-2"></div>
  <div class="coffee-steam steam-3"></div>
  <div class="coffee-cup">
    <div class="coffee-liquid"></div>
    <div class="coffee-handle"></div>
  </div>
  <div class="coffee-saucer"></div>
</div>

/* CSS */
.coffee { position: relative; width: 120px; height: 140px; }
.coffee-cup { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); width: 70px; height: 60px; background: #f5f5f5; border-radius: 0 0 20px 20px; border: 3px solid #ddd; border-top: none; overflow: hidden; }
.coffee-liquid { position: absolute; bottom: 0; left: 0; right: 0; height: 80%; background: linear-gradient(180deg, #6f4e37, #3c2415); border-radius: 0 0 16px 16px; }
.coffee-handle { position: absolute; bottom: 10px; right: -18px; width: 20px; height: 30px; border: 3px solid #ddd; border-left: none; border-radius: 0 12px 12px 0; }
.coffee-saucer { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); width: 90px; height: 8px; background: #eee; border-radius: 50%; border: 2px solid #ddd; }
.coffee-steam { position: absolute; bottom: 85px; width: 2px; height: 20px; background: rgba(255,255,255,0.4); border-radius: 10px; animation: steamRise 2s ease-in-out infinite; }
.steam-1 { left: 40%; }
.steam-2 { left: 50%; animation-delay: 0.5s; }
.steam-3 { left: 60%; animation-delay: 1s; }
@keyframes steamRise { 0% { transform: translateY(0) scaleX(1); opacity: 0.6; } 50% { transform: translateY(-15px) scaleX(2); opacity: 0.3; } 100% { transform: translateY(-30px) scaleX(1); opacity: 0; } }

<!-- HTML -->
<div class="rocket">
  <div class="rocket-body">
    <div class="rocket-nose"></div>
    <div class="rocket-window"></div>
    <div class="rocket-fin fin-left"></div>
    <div class="rocket-fin fin-right"></div>
  </div>
  <div class="rocket-flame"></div>
  <div class="star star-1"></div>
  <div class="star star-2"></div>
  <div class="star star-3"></div>
</div>

/* CSS */
.rocket { position: relative; width: 80px; height: 160px; background: #0d1117; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.rocket-body { position: relative; width: 36px; height: 80px; background: linear-gradient(180deg, #f5f5f5, #ddd); border-radius: 18px 18px 8px 8px; animation: rocketHover 2s ease-in-out infinite; }
.rocket-nose { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); border-left: 18px solid transparent; border-right: 18px solid transparent; border-bottom: 20px solid #e94560; }
.rocket-window { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: 14px; height: 14px; border-radius: 50%; background: #3465cd; border: 2px solid #aaa; }
.rocket-fin { position: absolute; bottom: -4px; width: 12px; height: 24px; background: #e94560; border-radius: 0 0 4px 4px; }
.fin-left { left: -6px; transform: skewX(10deg); }
.fin-right { right: -6px; transform: skewX(-10deg); }
.rocket-flame { position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); width: 20px; height: 30px; background: linear-gradient(180deg, #f97316, #fbbf24, transparent); border-radius: 50% / 60% 60% 40% 40%; animation: flameFlicker 0.2s infinite alternate; }
.star { position: absolute; width: 3px; height: 3px; background: white; border-radius: 50%; animation: starTwinkle 1.5s ease-in-out infinite; }
.star-1 { top: 10%; left: 15%; }
.star-2 { top: 40%; right: 10%; animation-delay: 0.5s; }
.star-3 { bottom: 15%; left: 20%; animation-delay: 1s; }
@keyframes rocketHover { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes flameFlicker { 0% { transform: translateX(-50%) scaleX(0.9); } 100% { transform: translateX(-50%) scaleX(1.1); } }
@keyframes starTwinkle { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }

<!-- HTML -->
<div class="vinyl">
  <div class="vinyl-disc">
    <div class="vinyl-groove groove-1"></div>
    <div class="vinyl-groove groove-2"></div>
    <div class="vinyl-groove groove-3"></div>
    <div class="vinyl-label"></div>
    <div class="vinyl-hole"></div>
  </div>
</div>

/* CSS */
.vinyl { position: relative; width: 140px; height: 140px; display: flex; align-items: center; justify-content: center; }
.vinyl-disc { width: 130px; height: 130px; border-radius: 50%; background: #111; position: relative; animation: vinylSpin 4s linear infinite; box-shadow: 0 0 20px rgba(0,0,0,0.5); }
.vinyl-disc:hover { animation-duration: 1.5s; }
.vinyl-groove { position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,0.06); top: 50%; left: 50%; transform: translate(-50%,-50%); }
.groove-1 { width: 90%; height: 90%; }
.groove-2 { width: 70%; height: 70%; }
.groove-3 { width: 50%; height: 50%; }
.vinyl-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #e94560, #7c3aed); }
.vinyl-hole { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 8px; height: 8px; border-radius: 50%; background: #0d1117; }
@keyframes vinylSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

<!-- HTML -->
<div class="bonsai">
  <div class="bonsai-leaves leaf-1"></div>
  <div class="bonsai-leaves leaf-2"></div>
  <div class="bonsai-leaves leaf-3"></div>
  <div class="bonsai-trunk"></div>
  <div class="bonsai-pot"></div>
</div>

/* CSS */
.bonsai { position: relative; width: 120px; height: 140px; }
.bonsai-pot { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); width: 50px; height: 30px; background: #8b5e3c; border-radius: 4px 4px 8px 8px; border-top: 4px solid #a0522d; }
.bonsai-trunk { position: absolute; bottom: 38px; left: 50%; transform: translateX(-50%); width: 8px; height: 50px; background: linear-gradient(180deg, #5c3d2e, #8b5e3c); border-radius: 4px; }
.bonsai-leaves { position: absolute; border-radius: 50%; background: radial-gradient(circle, #22c55e, #15803d); animation: leafSway 3s ease-in-out infinite; }
.leaf-1 { top: 20px; left: 50%; transform: translateX(-50%); width: 50px; height: 35px; }
.leaf-2 { top: 30px; left: 20%; width: 35px; height: 25px; animation-delay: 0.5s; }
.leaf-3 { top: 35px; right: 15%; width: 30px; height: 22px; animation-delay: 1s; }
@keyframes leafSway { 0%,100% { transform: translateX(-50%) rotate(0); } 25% { transform: translateX(-50%) rotate(2deg); } 75% { transform: translateX(-50%) rotate(-2deg); } }

<!-- HTML -->
<div class="gameboy">
  <div class="gameboy-body">
    <div class="gameboy-screen">
      <div class="pixel pixel-1"></div>
      <div class="pixel pixel-2"></div>
      <div class="pixel pixel-3"></div>
    </div>
    <div class="gameboy-dpad"></div>
    <div class="gameboy-btn btn-a"></div>
    <div class="gameboy-btn btn-b"></div>
  </div>
</div>

/* CSS */
.gameboy { position: relative; width: 100px; height: 150px; }
.gameboy-body { position: absolute; inset: 0; background: linear-gradient(180deg, #d4d4d8, #a1a1aa); border-radius: 10px; padding: 12px; }
.gameboy-screen { width: 100%; height: 55%; background: #9bbc0f; border-radius: 4px; border: 3px solid #555; position: relative; overflow: hidden; }
.pixel { position: absolute; background: #306230; animation: pixelBlink 2s steps(1) infinite; }
.pixel-1 { width: 8px; height: 8px; top: 30%; left: 30%; }
.pixel-2 { width: 8px; height: 8px; top: 50%; left: 55%; animation-delay: 0.5s; }
.pixel-3 { width: 12px; height: 4px; top: 70%; left: 25%; animation-delay: 1s; }
.gameboy-dpad { position: absolute; bottom: 28px; left: 18px; width: 28px; height: 28px; background: #333; clip-path: polygon(33% 0%,66% 0%,66% 33%,100% 33%,100% 66%,66% 66%,66% 100%,33% 100%,33% 66%,0% 66%,0% 33%,33% 33%); }
.gameboy-btn { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #881337; }
.btn-a { bottom: 30px; right: 16px; }
.btn-b { bottom: 38px; right: 34px; }
@keyframes pixelBlink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }