From the course: CSS: Enhancing Website Graphics
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Create a text shadow - CSS Tutorial
From the course: CSS: Enhancing Website Graphics
Create a text shadow
- [Instructor] In this chapter of our video tutorials, we'll examine how to make your content jump off the page with 3D shadows. This first video explores how CSS can be used to add shadows to any string of text on your webpage. Text shadows are created using the text shadow property, where color defines the color of the shadow, offset X sets the horizontal position of the shadow relative to the text, offset Y sets the vertical position of the shadow, and blur sets the radius or extent of the shadow. Let's look at some examples. Here's a simple text shadow, in which a black shadow is set at a distance of three pixels from the text in both the horizontal and vertical direction. Blur radius of zero pixels creates a distinct shadow with hard edges. Positive offset X values move the shadow to the right of the text, while negative offset X values move the shadow to the left. In the same way, positive offset Y values move the shadow below the text and negative offset Y values move the…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.