From the course: CSS: Advanced Typographic Techniques

Unlock the full course today

Join today to access over 22,500 courses taught by industry experts or purchase this course individually.

Creating blurred text

Creating blurred text - jQuery Tutorial

From the course: CSS: Advanced Typographic Techniques

Start my 1-month free trial

Creating blurred text

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…

Contents