Join James Williamson for an in-depth discussion in this video Creating blurred text, part of CSS: Advanced Typographic Techniques.
In our previous project, we Blurred a text…to simulate the text itself being sort of underwater.…Now we're going to start our animation projects by…performing a similar Blur on our animated text…so they can go from being sort of focused to that unfocused look that we have.…so to start off I'm going to be working in…the focus.htm file, found in zero five, zero two.…And if I scroll down, let's just take a look at what we have.…We've got a, a div tag with a paragraph inside of it.…And the paragraph has a class of focus and…of course we have the text that says stay focused.…
Sort of the default styling if you will, the color of the…text is white, we got some font sizing and stuff going on.…just looking at it within the browser, you can see…it's just big white text that says stay focused, easy enough.…Okay, so now what we need to do is blur this.…Now, because we have lettering, I'm going on again and it's…targeting that focused text, I'm going to go into the span selector…here, it's going to target all of those spans that surround the letters.…
- 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.