Special Effects
In CSS, there are a number of CSS properties aimed at creating specific interesting visual effects. Among them are rounded corners and shadows.
Two Kinds of Shadows
In CSS, shadows can be added to either an element's outer box using box-shadow, or directly to text using text-shadow. The value syntax for both are identical.
Box Shadow
box-shadow places a shadow on an element's outer box (the invisible box behind an element that is made visible when background-color is applied).
The property takes multiple terms for its value in the following order:
[x-offset]— How much the shadow is shifted on the horizontal axis. Positive numbers shift the shadow to the right, and negative numbers shift it to the left.[y-offset]— How much the shadow is shifted on the vertical axis. Positive numbers shift the shadow downward, and negative numbers shift it upward.[blur amount]— How much the shadow is feathered or blurred at the edges. Higher values result in a blurrier edge. No value results in a shadow with a hard edge.[spread amount]— Positive values cause the shadow to grow larger than the element box. Negative values cause it to shrink. No value results in a shadow the same size as the element box.[color]— Determines the color of the shadow.inset— Including this keyword causes the shadow to be placed inside the element box.
In the example above, see if you can figure out how to make the edge of the shadow blurrier. Can you make the shadow bigger overall? Try changing the color. What happens if you add the inset keyword to the end of the value?
Text Shadow
Similarly, text-shadow places a shadow directly behind the letterforms of text.
As with box-shadow, text-shadow takes multiple terms for its value in the following order: [x-offset] [y-offset] [blur amount] [color]. The [spread] and inset values cannot be used for text-shadow.
Can you shift the shadow so that it sits to the top and left of the text instead of the bottom right? Can you remove the blur from the shadow so that it is hard-edged?
Rounded Corners
The CSS border-radius allows the creation of rounded corners on an element box. Any border or background present on the element will honor the rounded corners
border-radius accepts any measurement value to determine the size to which the corners are rounded. This single property is actually a shorthand for individual border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius. As a shorthand, different numbers of values have different meanings:
- One value: all four corners.
- Two values: top-left & bottom-right together, top-right & bottom-left together.
- Three values: top-left, top-right & bottom-left together, bottom-right.
- Four values: top-left, top-right, bottom-right, bottom-left (clockwise around from top-left).
In the demo above, can you figure out how to round the corners of the first box enough to form an actual oval? Can you make the only top-left corner of the second box a pointed corner?
Video Lesson
Of the topics covered in this chapter, this video only covers box-shadow and text-shadow.
The following video demo is fully interactive. You can pause at any time to directly edit the code, and resume playback to restore to where you left off.