Colored Markers

CSS Color Practice

Source Code

index.html
styles.css

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colored Markers</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>CSS Color Markers</h1>
    <div class="container">
      <div class="marker red">
        <div class="cap"></div>
        <div class="sleeve"></div>
      </div>
      <div class="marker green">
        <div class="cap"></div>
        <div class="sleeve"></div>
      </div>
      <div class="marker blue">
        <div class="cap"></div>
        <div class="sleeve"></div>
      </div>
    </div>
  </body>
</html>

h1 {
  text-align: center;
}

.container {
  background-color: rgb(255, 255, 255);
  padding: 10px 0;
}

.marker {
  width: 200px;
  height: 25px;
  margin: 10px auto;
}

.cap {
  width: 60px;
  height: 25px;
}

.sleeve {
  width: 110px;
  height: 25px;
  background-color: rgba(255, 255, 255, 0.5);
  border-left: 10px double rgba(0, 0, 0, 0.75);
}

.cap, .sleeve {
  display: inline-block;
}

.red {
  background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
  box-shadow: 0 0 20px 0 rgba(83, 14, 14, 0.8);
}

.green {
  background: linear-gradient(#55680D, #71F53E, #116C31);
  box-shadow: 0 0 20px 0 #3B7E20CC;
}

.blue {
  background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
  box-shadow: 0 0 20px 0 blue;
}

What I Learned:

CSS syntax and selector structure
Using class-based styling for reusable components
display: inline-block for horizontal layout while maintaining block features
Understanding the box model: width, height, margin
Applying different color models:
rgb() for red-green-blue definitions
rgba() for transparency control
hex for compact color values
hsl() for hue-saturation-lightness control
Creating linear gradients with linear-gradient()
Using box-shadow for depth and highlight effects
Structuring HTML with nested divs to simulate real-world components
Importance of separating visual parts into semantic building blocks (cap, sleeve, body)

Interesting takeaway: Learning how to combine gradients with shadows to simulate lighting and 3D effects was particularly engaging. It helped solidify the idea that CSS is not just for color but also for mood and dimension.

Time: 3 hours 5 min of learning + 46 min of documentation and comments

Personal Note: This exercise reminded me of skeuomorphism, an interface style I’ve always been fond of. As a child, I had an iPod Touch running iOS 5, with an interface full of realistic visual details and textures that I found fascinating. I still remember when I jailbroke the device — a process that allowed me to customize and modify the system in ways not intended by Apple. That experience sparked my curiosity for customization and design.

Next: Learn HTML Forms by Building a Registration Form

Source Code​

Source Code