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 - jQuery Tutorial
From the course: CSS: Advanced Typographic Techniques
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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
(Locked)
Project overview1m 25s
-
(Locked)
Structuring HTML3m 16s
-
(Locked)
Using generated content3m 40s
-
(Locked)
Giving text a 3D look5m 22s
-
(Locked)
Simulating submerged text5m 59s
-
(Locked)
Clipping text6m 40s
-
(Locked)
Applying perspective5m 4s
-
(Locked)
Using 3D transforms7m 55s
-
(Locked)
Aligning split text3m 47s
-
(Locked)
-
-
-