- View Offline
- 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
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 just highlight it over here in Live View, and there it is, so I'll put in span, close off the tag, and then use Dreamweaver's code completion to actually finish that off. Notice it's just an empty tag, but this is very important because we're going to use this span tag and place a background image in it, that will give the gradient effect. Now the next thing I want to do is just identify this h1 tag a bit.
So I'm going to give it a class of gradientText, because we might want to use this effect elsewhere on the page. Now the reason we need to add a class is because we're going to have to set up a new CSS Rule that includes the position relative property, and that is done because the span tag which is inside of the h1 with a class of gradientText, will need to be positioned absolutely. So now we're ready to go back over to our CSS panel and create a few rules.
So to write my new CSS Rule, I'm going to go ahead and select the h1.gradientText that you see here from the Tag Selector and then at the bottom of the CSS Styles panel choose New CSS Rule. I'm going to make this a little bit less specific and you'll notice that unfortunately Dreamweaver did not pick up the h1, so we'll add that in manually. So we have h1.gradientText and I'll click OK. Now we go to the Positioning category and just add the one property we need, which is Position relative.
I'll click OK, and now we're ready to create the Rule for the span tag, and if I wanted to find that quickly, I could open up into Split View, put my code into the empty span. You won't be able to choose it in Live View or Display View, because it is empty, but now that I have it identified, I can go to New CSS Rule and there you see my gradientText span there. I'm going to go ahead and add in that h1 again, just so that we know that we're targeting that properly.
Click OK, and first I'm going to bring in the background image. I'll go to the Background category and then click Browse next to the Background-image property and you'll find this image in the 06_02 folder in _images and it's called text_ gradient.png. Click Choose. Now this gradient is only about 10 pixels wide, so we'll need to repeat it along the x axis.
So under Background-repeat we'll choose repeat-x, and then we need to move to the Positioning category, where we can set the Position to absolute. Now we need to set the size, so we can do that in the Box category, and the Width that we're going to set is 50% and I'll show you why in just a moment. We'll make it the same height as the text itself which is 36 pixels. Now because this is a span, which is normally in line, we want to instead make sure that it displays as a block element, so that it goes directly over that.
So we'll switch to the Block category and from the Display property, choose block. We're good to go here. So I'll go ahead and click OK, and there you see the gradient instantly applied. Now let me go to Full Design View so I can show you the reason that we went to 50%. As you can see here there is on the same line an orange tab that says, TAKE AN ONLINE TOUR. If we had the width set at 100%, which I can demonstrate right here, you can see that it would overlap that.
So we'll just set it to 50 so that it covers just the text. This effect works fine in all modern browsers as is. In fact, I can even drop out of Live View and you can see it in Dreamweaver's Design View. However, for it to work in Internet Explorer 6, you'll have to add in a conditional comment with a IE-specific filter. So let's go back to our Source Code and I'll go right to Code View and scroll up to the bottom of the head tag, and now I want to put in a conditional comment.
Conditional comments are only visible to Internet Explorer and you can even target them for specific versions. Dreamweaver actually has a couple of snippets built-in to help get you started. So let's go to Window>Snippets and I'll bring that up some, so we can see it more fully, and then open up the Comments category and here we see, If IE 6 Conditional Comment. I'll just double-click on that to insert it, and there you can see the syntax for the conditional comment. Other browsers just recognize it as a comment itself.
So now we'll put in a style tag and I'll close that off. You'll note that Dreamweaver's tag completion doesn't work within conditional comments. You'll have to enter in the closing style tag manually. So let me get rid of that little white space. So now I'm going to write out a CSS Rule for the span tag with a couple of different properties. So you remember that it's h1. gradientText span, and then I'll open and close my CSS, and in the middle we'll put in a background of none.
And that's to make sure that in Internet Explorer 6, the background image is not reproduced. Instead, what we'll need to do is put in what's called a Filter. So you type in the word filter, with a colon, and then the first term is called progid:, and then you put in which one that is, and in this case, it's the DXImageTransform.Microsoft.AlphaImageLoader.
Okay, that's quite a mouthful. DXImageTransform.Microsoft. AlphaImageLoader, and you follow that with an open paren ( and you put in the source for the file. So src=' and now we put in the path to the image itself: _images/text_gradient.png. Close off the single quote and add a comma for the final property which is sizing method.
So sizingMethod= and in single quotes the keyword scale. Close off that parenthesis and close off the whole thing with a semicolon. Alright, that's the full code for the IE 6 workaround, and now your gradientText is good to go across browsers. This technique also works really well when you have a light text against a solid background and a similarly colored gradient.
Sign up for a Premium Membership to download courses for Internet-free viewing.
Watch offline with your iOS, Android, or desktop app.Start Your Free Trial
After signing up, download the course here or from the iOS/Android App.