Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- 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
Slowly but surely, the advantages print designers held over the lowly web designer are being eliminated. The ability to control the transparency of type is one such feature. Now, almost all modern browsers support additional color specification as well as the traditional hexadecimal color values. One such spec is RGBA where the A stands for alpha-transparency. Let's take a look. So I have opened here the file semi_ chateau.htm from Chapter 4 > 04_03 folder, and as you can see here, I have white type right in the center here, and this is an h1 heading in my wrapper.
I'll go ahead and turn on Live View here, so that you can see it represented fully. So now, we can go in to where the color is specified, and actually change that to an RGBA value. So instead of #fff, we'll type-in rgba, open parentheses, and then each of the values for each of the color channels separated by commas. So the equivalent to the hexadecimal f is 255.
So it will be 255,255,255, one more comma and now you put-in the alpha-transparency value that you want. The fully opaque value is 1. So you want to put-in a value between 0 and 1. In this case, let's just try it as half so 0.5, and then I'll close off the parentheses, and hit Return. I'll scroll back down. Now you can see pretty clearly how the alpha-transparency is having its effect.
You can clearly see the shadows of the other trees reflected in the type. That will work for either Dreamweaver CS5, or Dreamweaver CS5.5. If you are a Dreamweaver CS5.5 user, you can actually switch the Color Picker to always work with the RGBA notation. This is how you do it. Open up the Color Picker and then move over to the Options button, and then scroll down past all the palettes to the new entry of color format. And again, this is only in Dreamweaver CS5.5 and up, so you'll see all the various formats available.
The default one is Three-digit Hex. But you can also choose from any of the others listed, including RGBA. So let's select that, and now, if I go over and decide to choose one of the values from the Color Picker, you can see that the alpha-transparency is set to 1. However, I can make another choice here of a different color. Let's sample just the sky up here. Now, you can see that the color has changed to a shade of blue, and Dreamweaver remembers the alpha-transparency value that I entered in before at 0.5.
So I still have my shadows showing up there. Of course, you can vary this. Let's bring it down even lower, and I'll make it 0.25, and we'll scroll down and now you can see it is very faded, but you can really see how the transparency takes place. You'll be happy to hear that browser support for RGBA is pretty robust. It's supported in Firefox and Safari 3 and higher, Opera 10 and up, and IE 9. The capability to control transparency once again extends the range of what's possible with type on the web.