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.
Aligning split text - jQuery Tutorial
From the course: CSS: Advanced Typographic Techniques
Aligning split text
We have just one more small task to perform before we're finished with our submerged text. We need to align, the blurred, the transform blurred text, a little bit more closely to each letter of the submerged text itself. So I've got the submerged file open from the 04, zero 09 directory. And what I'm going to do is just I'm going to scroll down here, past the span selector and here is where we are going to target each individual letter. This is again where lettering js is going to help us out a little bit. And I'm going to create my first select here, character one or char1 and I'm just going to give it a left value of ten pixels. Now, that really doesn't mean anything right now. So one thing I haven't done is, is told all of these individual characters to have a position of relative so this left offset will work. I could use negative margins here. I can certainly do that. But I really like using offsets instead. So I could every, single character tell it position: relative, position,…
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)
-
-
-