Join James Williamson for an in-depth discussion in this video Simulating submerged text, part of CSS: Advanced Typographic Techniques.
In this exercise, we want to simulate, sort of,…the blurry look of text being submerged under water.…So, to do that, we're going to have to blur…our bottom text and, and the secret, or the trick,…if you will, to creating blurred text Is to remove…or either seriously diminish the foreground color of the text.…And then use a really diffused text shadow to create the actual blur itself.…So, I'll be working with the submerged.htm…file in the 04_05 directory.…
And if I scroll down, I can see that I've added something to this one.…and what I have added is some default paragraph styling.…If I check that out in the browser, you can see, if…I scroll down, now I have a duplicate of the word submerge.…Same size.…Pretty much the same color everything and all that.…Maybe a little, it's actually using white instead of that sort…of off blue, bluish white that I'm using…for submerge on the top version of it anyway.…So it's almost an exact duplicate underneath it.…Okay.…So I need to add a couple of things to this.…
The first thing I want to do is change the foreground color.…
- 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.