DEV Community

Munin Borah
Munin Borah

Posted on

Day 16/200 (Full stack)

#webdev #programming #javascript #beginners

🌟 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)