Join Joseph Lowery for an in-depth discussion in this video Designing type gradients, part of Typography with CSS in Dreamweaver.
- View Offline
- Exercise Files
Gradients are often used as web page and element backgrounds to provide a…sense of depth and flair.…Experienced graphic designers are also able to combine gradients and text,…typically large-sized fonts to better show off the color transitions.…While you can create gradients in CSS3, you can't yet, with the exception of the…latest Safari browsers, integrate those gradients in text.…However, there's a very clever simple technique that works cross-browser even with IE 6.…Let me show you the final result of our work with gradients and text.…
I'll switch over to my final page here where you can see the Taste of California…title has a nice background gradient fading to white. Looks good.…Alright, let's go build it.…So I have open the tour_detail.htm file found in the Chapter 6 > 06_02 folder…and I'm in Live View.…Now before we get to the CSS, we'll need to put in just a little bit of…additional HTML markup.…We'll need to add an empty span tag within the h1 tag.…
So to do that I'll go to Split View and so I can quickly find that h1 tag, I'll…
- Modifying type in the CSS Styles panel
- Understanding the different type measurement unit options
- Allowing users to set page type size
- Employing web-safe fonts
- Exploring CSS 3 typeface options
- Setting up @font-face
- Applying color and transparency to type
- Styling the font weight, case, and letter spacing
- Inserting drop caps
- Rotating text with CSS transform
- Laying out text in multiple columns
- Incorporating ordered and unordered lists
- Targeting lists items with the nth-child selector
Skill Level Intermediate
Creative Inspirations: Doyald Young, Logotype Designerwith Doyald Young1h 41m Appropriate for all
1. Modifying Type in Dreamweaver
2. Establishing the Proper Type Unit
Working with pixels2m 34s
3. Choosing Site Typefaces
4. Integrating Color
Applying color to type4m 52s
5. Selecting Type Styles
6. Using Advanced CSS Text Effects
7. Structuring CSS Text
8. Defining Lists with HTML and CSS
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
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.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.