Step 70
Now that the markers have the correct colors, it's time to build the marker sleeves. Start with the red marker.
Inside the red marker
div
, create a newdiv
and give it a class ofsleeve
.<div class="marker red"> <div class="sleeve"></div> </div>
Step 71
Create a new CSS rule that targets the class
sleeve
. Set thewidth
property to110px
, and theheight
property to25px
..sleeve{ width:110px; height:25px; }
Step 72
To make the marker look more realistic, give the sleeve a transparent white color.
First, set the sleeve element's
background-color
towhite
..sleeve { width: 110px; height: 25px; background-color:white; }
Step 73
Opacity describes how opaque, or non-transparent, something is. For example, a solid wall is opaque, and no light can pass through. But a drinking glass is much more transparent, and you can see through the glass to the other side.
With the CSS
opacity
property, you can control how opaque or transparent an element is. With the value0
, or 0%, the element will be completely transparent, and at1.0
, or 100%, the element will be completely opaque like it is by default.In the
.sleeve
CSS rule, set theopacity
property to0.5
..sleeve { width: 110px; height: 25px; background-color: white; opacity:0.5; }
Step 74
Another way to set the opacity for an element is with the alpha channel. Similar to the
opacity
property, the alpha channel controls how transparent or opaque a color is.You've already set sleeve's opacity with a named color and the
opacity
property, but you can add an alpha channel to the other CSS color properties.Inside the
.sleeve
rule, remove theopacity
property and value..sleeve { width: 110px; height: 25px; background-color: white; }
Step 75
You're already familiar with using the
rgb
function to set colors. To add an alpha channel to anrgb
color, use thergba
function instead.The
rgba
function works just like thergb
function, but takes one more number from0
to1.0
for the alpha channel:rgba(redValue, greenValue, blueValue, alphaValue);
In the
.sleeve
rule, use thergba
function to set thebackground-color
property to pure white with 50% opacity..sleeve { width: 110px; height: 25px; background-color:rgba(255,255,255,50%); }
Step 76
Your sleeve is looking good, but it would look even better if it was positioned more toward the right side of the marker. One way to do that is to add another element before the sleeve to push it to the right.
Add a new
div
with the classcap
before the sleevediv
element.<div class="marker red"> <div class="cap"></div> <div class="sleeve"></div> </div>
Step 77
Create a new CSS rule to target the class
cap
. In the new rule, set thewidth
property to60px
, and theheight
to25px
..cap{ width:60px; height:25px; }
Step 78
It looks like your sleeve disappeared, but don't worry -- it's still there. What happened is that your new cap
div
is taking up the entire width of the marker, and is pushing the sleeve down to the next line.This is because the default
display
property fordiv
elements isblock
. So when twoblock
elements are next to each other, they stack like actual blocks. For example, your marker elements are all stacked on top of each other.To position two
div
elements on the same line, set theirdisplay
properties toinline-block
.Create a new rule to target both the
cap
andsleeve
classes, and setdisplay
toinline-block
..cap,.sleeve{ display:inline-block; }
Step 79
In the last project, you learned a little bit about borders and the
border-color
property.All HTML elements have borders, though they're usually set to
none
by default. With CSS, you can control all aspects of an element's border, and set the border on all sides, or just one side at a time. For a border to be visible, you need to set its width and style.In the
.sleeve
CSS rule, add theborder-left-width
property with the value10px
..sleeve { width: 110px; height: 25px; background-color: rgba(255, 255, 255, 0.5); border-left-width:10px; }
Step 80
Borders have several styles to choose from. You can make your border a solid line, but you can also use a dashed or dotted line if you prefer. Solid border lines are probably the most common.
In the
.sleeve
CSS rule, add theborder-left-style
property with the valuesolid
..sleeve { width: 110px; height: 25px; background-color: rgba(255, 255, 255, 0.5); border-left-width: 10px; border-left-style:solid; }
Step 81
Your border should be visible now. If no color is set, black is used by default.
But to make your code more readable, it's better to set the border color explicitly.
In the
.sleeve
CSS rule, add theborder-left-color
property with the valueblack
..sleeve { width: 110px; height: 25px; background-color: rgba(255, 255, 255, 0.5); border-left-width: 10px; border-left-style: solid; border-left-color:black; }
Step 82
The
border-left
shorthand property lets you to set the left border's width, style, and color at the same time.Here is the syntax:
border-left: width style color;
In the
.sleeve
CSS rule, replace theborder-left-width
,border-left-style
, andborder-left-color
properties with theborder-left
shorthand property. The values for the width, style, and color of the left border should be the same..sleeve { width: 110px; height: 25px; background-color: rgba(255, 255, 255, 0.5); border-left:10px solid black; }
Step 83
Your marker is looking good. But to make it look even more realistic, you can change the border style to double solid borders.
For the
border-left
shorthand property, change the border style value fromsolid
todouble
..sleeve { width: 110px; height: 25px; background-color: rgba(255, 255, 255, 0.5); border-left: 10px double black; }
Step 84
The black color of your border looks pretty harsh against the more transparent sleeve. You can use an alpha channel to lower the opacity of the black border.
For the
border-left
shorthand property, use thergba
function to set the color value to pure black with 75% opacity..sleeve { width: 110px; height: 25px; background-color: rgba(255, 255, 255, 0.5); border-left: 10px double rgba(0,0,0,75%) }
Step 85
Awesome. Your red marker is looking good. Now all you need to do is add the caps and sleeves to your other markers.
Add a cap and sleeve to both the green and blue markers. You can just copy the
div
elements from the red marker and paste them into the other two markers.<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>
Step 86
The last thing you'll do is add a slight shadow to each marker to make them look even more realistic.
The
box-shadow
property lets you apply one or more shadows around an element. Here is basic syntax:box-shadow: offsetX offsetY color;
Start by adding a simple shadow to the red marker.
In the
.red
CSS rule, add thebox-shadow
property with the values5px
foroffsetX
,5px
foroffsetY
, andred
forcolor
..red { background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); box-shadow:5px 5px red; }
Step 87
As you can see, you added a simple red shadow around your marker that's 5 pixels to the right, and 5 pixels down.
But what if you wanted to position your shadow on the opposite side? You can do that by using negative values for
offsetX
andoffsetY
.Update the values for the
box-shadow
property, and setoffsetX
to-5px
, andoffsetY
to-5px
..red { background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); box-shadow: -5px -5px red; }
Step 88
Notice that the edges of the shadow are sharp. This is because there is an optional
blurRadius
value for thebox-shadow
property:box-shadow: offsetX offsetY blurRadius color;
If a
blurRadius
value isn't included, it defaults to0
and produces sharp edges. The higher the value ofblurRadius
, the greater the blurring effect is.In the
.green
CSS rule, add thebox-shadow
property with the values5px
foroffsetX
,5px
foroffsetY
,5px
forblurRadius
, andgreen
forcolor
..green { background: linear-gradient(#55680D, #71F53E, #116C31); box-shadow:5px 5px 5px green; }
Step 89
But what if you wanted to expand the shadow out further? You can do that with the optional
spreadRadius
value:box-shadow: offsetX offsetY blurRadius spreadRadius color;
Like
blurRadius
,spreadRadius
defaults to0
if it isn't included.Practice by adding a 5 pixel shadow directly around the blue marker.
In the
.blue
CSS rule, add thebox-shadow
property with the values0
foroffsetX
,0
foroffsetY
,0
forblurRadius
,5px
forspreadRadius
, andblue
forcolor
..blue { background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); box-shadow:0 0 0 5px blue; }
Step 90
Now that you're familiar with the
box-shadow
property you can finalize the shadows, starting with the one for the red marker.In the
.red
CSS rule, update the values for thebox-shadow
property sooffsetX
is0
,offsetY
is0
,blurRadius
is20px
,spreadRadius
is0
, andcolor
isred
..red { background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); box-shadow: 0 0 20px 0 red; }
Step 91
Next, update the
color
value of the red marker'sbox-shadow
property.Replace the named color with the
rgba
function. Use the values83
for red,14
for green,14
for blue and0.8
for the alpha channel..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); }
Step 92
The shadows for your green and blue markers will have the same position, blur, and spread. The only difference will be the colors.
In the
.green
and.blue
CSS rules, update the values for thebox-shadow
properties sooffsetX
is0
,offsetY
is0
,blurRadius
is20px
, andspreadRadius
is0
. Leave the colors asgreen
andblue
for now..green { background: linear-gradient(#55680D, #71F53E, #116C31); box-shadow: 0 0 20px 0 green; } .blue { background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); box-shadow: 0 0 20px 0 blue; }
Step 93
For the green marker's
box-shadow
property, replace the named color with a hex color code. Use the values3B
for red,7E
for green,20
for blue, andCC
for the alpha channel..green { background: linear-gradient(#55680D, #71F53E, #116C31); box-shadow: 0 0 20px 0 #3B7E20CC; }
Step 94
Finally, for the blue marker's
box-shadow
property, replace the named color with thehsla
function. Use the values223
for hue,59%
for saturation,31%
for lightness, and0.8
for the alpha channel.And with that, your set of colored markers is complete! Well done.
.blue { background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); box-shadow: 0 0 20px 0 hsla(223,59% ,31%, 0.8); }