From the course: CSS: Advanced Typographic Techniques

Unlock the full course today

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

Clipping text

Clipping text - jQuery Tutorial

From the course: CSS: Advanced Typographic Techniques

Start my 1-month free trial

Clipping text

At the moment we have two copies of our text. We need to simulate a single word by clipping them, so that the top and bottom halves are all that displays. And then by aligning them so that the edges meet in and they can join together. So I'm be working in the submerge file again. This time from the 04 > 06 directory. And this time it's going to be all about defining heights and moving, using some offsets to move things up. We're also going to pay attention to the HTML structure that we created earlier. Alright and we're going to take advantage of the fact that we have all these different elements that we can work with in terms of clipping content. Okay. First thing that I'm going to do is right above the text selector, I'm going to create a brand new selector that targets all the divs on the page. So, we've got a couple of divs, I've got three of them actually. And this is going to target two of them, because the text selector that's underneath it is a class selector. And because it…

Contents