DEV Community

Munin Borah
Munin Borah

Posted on

Day 16/200 (Full stack)

๐ŸŒŸ Day 16 of 200 Days of Code: Keeping It Light, Staying Consistent

Not every day has to be packed with hours of coding and dozens of new concepts. Today was light, but consistent โ€” and thatโ€™s what truly matters in a long-term journey like this one.

On Day 16 of my full-stack journey, I focused on just two powerful features in CSS:

  • Box shadows using the box-shadow property
  • CSS variables (also called custom properties)

Even in just a short session, I learned how these small tools can make a big visual difference and improve my workflow.


โ˜๏ธ Adding Depth with CSS box-shadow

The box-shadow property lets you add drop shadows to elements, giving them a sense of depth and elevation โ€” a simple way to make your UI look more polished.

๐Ÿ“Œ Syntax:

box-shadow: offset-x offset-y blur-radius color;
Enter fullscreen mode Exit fullscreen mode

You can also add spread and inset values:

box-shadow: offset-x offset-y blur-radius spread-radius color inset;
Enter fullscreen mode Exit fullscreen mode

โœ… Basic Example:

.card {
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
}
Enter fullscreen mode Exit fullscreen mode

This adds a soft gray shadow offset 4px to the right and 4px down.

๐ŸŽจ Multiple Shadows:

You can even stack multiple shadows!

button {
  box-shadow: 2px 2px 5px rgba(0,0,0,0.1),
              -2px -2px 5px rgba(255,255,255,0.7);
}
Enter fullscreen mode Exit fullscreen mode

This creates a subtle 3D, neumorphic-style effect.

๐Ÿ” Inset Shadow:

input {
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.1);
}
Enter fullscreen mode Exit fullscreen mode

inset makes the shadow appear inside the element, often used in inputs or cards for inner glow effects.


๐ŸŽฏ Introducing CSS Variables (Custom Properties)

CSS variables allow you to define values once and reuse them across your styles โ€” a game-changer for consistency and maintainability in large projects.

๐Ÿ“Œ Syntax:

:root {
  --primary-color: #3498db;
  --card-padding: 20px;
}

.card {
  background-color: var(--primary-color);
  padding: var(--card-padding);
}
Enter fullscreen mode Exit fullscreen mode

โœ… Why CSS Variables Are Awesome:

  • Easy to update theme colors or layout settings
  • Great for dark/light modes
  • Reduces repetition in your code

๐Ÿ’ก Local vs Global Variables:

/* Global */
:root {
  --text-color: #333;
}

/* Local */
.container {
  --text-color: #000;
  color: var(--text-color); /* uses local value */
}
Enter fullscreen mode Exit fullscreen mode

The value of a CSS variable can be overridden within a specific selector, making them very flexible.


๐Ÿง˜โ€โ™‚๏ธ A Small Win Is Still a Win

Some days are for big breakthroughs, others are just about showing up. Today, I learned something new, practiced what I learned, and kept the momentum going. Thatโ€™s what progress looks like.

โ€œYou donโ€™t have to be extreme, just consistent.โ€

Tomorrow, I might dig deeper into CSS transitions or responsive design โ€” but for now, Iโ€™m glad I kept the streak alive.


๐Ÿ’ก Quick Recap

  • โœ… Learned how to use box-shadow to create depth and style
  • โœ… Explored CSS variables for more maintainable and scalable code

๐Ÿ“š Resources to Dive Deeper


๐Ÿ‘€ What's Next?

Have you used box-shadow creatively in your projects? Tried out CSS variables in theming? Let me know in the comments or share your tips!

Until tomorrow, happy coding! ๐Ÿ’ป


Image description

#CSS #WebDevelopment #FrontendDev #100DaysOfCode #CodingJourney #LearnToCode


Top comments (0)