Join James Williamson for an in-depth discussion in this video Structuring HTML, part of CSS: Advanced Typographic Techniques.
- View Offline
- Exercise Files
Usually, I try to keep my markup as clean as…I can, but there are going to be times when…you have to put a little bit of non-semantic markup…in your HTML in order to achieve the desired effect.…Now, such is the case here as we're going to need containers for…both the text and the generated content that we're going to be styling.…So, essentially how this is going to work is…the word submerged isn't going to be just one word.…If I scroll down and look at the HTML Right…now, this is how I would normally mark something like this up.…Very, very clean, we have a section that has a…class, a submerge and then a paragraph that just says submerge.…
Okay, well it is physically, unfortunately, impossible…to split one word into horizontal halves.…Lord knows I tried but you just can't do it.…So I'm going to have to have two copies of the text, essentially.…Now I could just go ahead and change my HTML markup…to reflect that and just type two of them in here.…But in a real world scenario that would be rather difficult to maintain,…
- 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.