Join James Williamson for an in-depth discussion in this video Working with drop shadows, part of CSS: Advanced Typographic Techniques.
At this point, our mast head is coming together.…I'd really like to add some depth to the text, though.…And, using drop shadow is a great way to do that.…So, I'm going to be working in the speed file, in the 03_04 directory.…We're just picking up right where we left off.…And, I'm going to work with two types of drop shadows, one…that specifically designed for text, which we used in our previous, project.…And then a new one which we haven't used yet in this title,…which is for the elements themselves, the, the box properties.…And it's called Box shadow.…All right, so let's start of with a Text shadow.…
So I'm going to do Text shadow.…And what we're going to do here is negative one pixel, negative one pixel.…So, x and y offsets of negative one pixel,…so it's going to move it to the left, and up.…Not very much but just a little bit, very subtle,…two pixels for the blur so still at very sharp shadow.…And RGBA value of…0 comma 0 comma 0 which is black comma 0.6 which is semi opaque.…So I'm going to save this, go back out to the browser and…
- Controlling font rendering with CSS
- Using web fonts
- Adjusting kerning
- Adding dimension to text
- Working with gradients and drop shadows
- Using 2D and 3D transforms
- Applying perspective
- Aligning split text
- Creating and triggering transitions
- Enabling animations
- Extending CSS with Lettering.js and Modernizr
Skill Level Intermediate
1. Getting Started
2. Using Lettering.js
3. Creating Dimensional Text
4. Creating Refracted Text
5. Animating Text
6. Using Modernizr
Additional resources2m 11s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.