Designing Pages in Dreamweaver with CSS3
All the hype about HTML5 and CSS3 has Web designers chomping at the keyboard to make the Web more beautiful. With all of the warnings that these cool new features may not be ready for prime time, what should you do today? Here are a few of my favorite new CSS3 techniques that work well enough to put them to use right away.
1 USE ANY FONT ON YOUR WEBPAGES
Designers have been begging for years to have more fonts on the Web (without resorting to images). Now, thanks to CSS3, you can link to any font and use that font for any or all of the text on your webpages. This long-awaited feature already works in the most recent versions of most browsers, even Internet Explorer (since version 8). In older browsers, text reverts to the default font, but that’s what people with old browsers deserve anyway. Your hip friends and clients using Firefox, and even Safari on an iPhone or iPad, will see your fancy fonts.
2 TARGETING BROWSERS WITH CSS
The good news is a growing percentage of Internet users can view these new CSS features such as linked fonts. If you use a good traffic reporting service, such as Google Analytics (shown here), you can identify the browsers that visit your website—and design for your target audience. Firefox is now the most popular browser in the U.S., and other browsers that use WebKit (such as Safari) also support most of the new CSS3 features. Even Internet Explorer supports a growing number of HTML5 and CSS3 features with each new version.
3 ENHANCE DESIGNS WITH CSS3 TECHNIQUES
If you want to design for the future, without compromising the present, all of the CSS rules in this tutorial won’t break, even in older browsers. If you use something like a drop shadow or fancy font, an old browser simple won’t display it. So you have nothing to lose but a few minutes with this tutorial. The page shown here in Firefox was designed entirely with CSS, not an image on the page. The majority of the Web audience is using browsers that can display these new features already.
4 DREAMWEAVER WON’T DISPLAY HTML5/CSS3
If you know how to write the styles and other code, you can use any Web design program or text editor to create pages with HTML5 and CSS3. If you’re used to getting a good preview of your page designs in Dreamweaver, you may be disappointed that even Dreamweaver CS5 doesn’t support all of the new features of HTML5 and CSS3 (at least not yet). If you add the HTML5 Pack (shown in the next step) you can preview pages with these features, but in Design View in Dreamweaver, as you see here, linked fonts and drop shadows won’t display.
5 THE HTML5 EXTENSION FOR DREAMWEAVER
What you see here is the multiscreen display you get when you add the HTML5 Pack to Dreamweaver. (The HTML5 Pack is now part of the 11.0.3 update for Dreamweaver CS5). The HTML5 Extension adds a three-way split-screen preview that simulates how your pages will look in an iPhone, iPad, and any browser that supports HTML5. The extension also supports many new CSS3 enhancements, which is why you see the fancy fonts, rounded corners, and drop-shadow effects in this preview.
6 LINKING FONTS
You add the font link tag to the head area of an HTML page referencing where the font is hosted on a Web server. There are multiple ways to set up fonts on a server, and a growing list of online services, such as the Google Font Directory, that make fonts easy to use (if you’re willing to settle for limited font collections). Here’s the code generated to link to a font named Lobster in the Google Font Directory: . Just add this code to the top of any webpage and you can use the font in CSS styles.
7 USING LINKED FONTS IN CSS STYLES
Once you link a font to your page, you can use it in any CSS style rule. Here are two examples that use the Lobster font and the Molengo font from the Google Font Directory:
.molengo { font-family: ‘Molengo’, arial, serif; }
H1 {
font-family: “Lobster, arial, serif; font-size: large;
}
.
Finally, you need to apply a style to text in the page (like the ones shown in the image above and the example below):
<p class=”molengo”>. This is how you’d format the HTML to apply a class style like .molengo to use the Molengo font to format this sentence. </p>
8 GENERATE FONT CODE AT FONTSQUIRREL
Check out how FontSquirrel.com makes it easy to use free fonts or to generate the code you need for your website to use any font you can upload to their server. (You’ll find detailed instructions on how to use their Font-Face Generator on the site.) They also offer a collection of font kits that are ready for you to use. Essentially, they have collected all the best free fonts they could find (so you don’t have to worry about licensing issues, even on commercial projects). Similar to the Google Font Directory, you can generate the code you need from their site, but FontSquirrel has a bigger collection of fonts.
9 CREATE SIMPLE ROUNDED CORNERS
One of the simplest and most popular new options in CSS3 is the ability to create rounded corners without a lot of extra markup or that image trick we used to put in the corners of our divs. If the Web were a perfect, standards-based world, border-radius: is all the code you’d need, but if you want your rounded corners to work in Firefox, you’ll need to add a second line with -moz to create a style like this:
.rounded-corners { width: 225px; padding: 10px; border-radius: 15px; -moz-border-radius: 15px; border: 1px solid #333;}
10 CREATE COMPLEX ROUNDED CORNERS
Now, rounder corners can be created with a single line of the border-radius option in CSS and can be used to create a different style for each corner. Using the four border-radius properties (border-bottom-right-radius, border-top-right-radius, etc.) you can create more complex designs. For example, this code makes the two left corners rounded:
.two-rounded-corners { width: 200px; padding: 20px; margin: 10px; color: #fff; background-color: #999; border-top-left-radius: 50px 50px; border-bottom-left-radius: 50px 50px; -moz-border-radius: 50px 50px 0px 0px; }
11 ADD A DROP SHADOW TO TEXT
CSS3 finally eliminates the need for Photoshop when all you want to do is add a simple shadow. The text-shadow property can be used in a style rule. For example, this code adds a drop shadow to any text formatted with the H1 tag. You can adjust the color and spacing of drop shadows by changing the pixel size and hexadecimal color code in the example below:
h1 { text-shadow: 2px 2px 2px #999;}
12 COMBINE FONTS AND DROP SHADOWS
You can use the CSS rules in combination to create more elaborate text effects. In this example, we used a font face, text shadow, and contrasting text and background colors. Remember, you must first link a font to a page (see Step 6) before you can use a font in a style rule. Here’s the style:
.logo { font-size: 300%; color: #FFF; background-color: #930; padding: 10px; text-shadow: 2px 2px 2px #000; }
13 ADD A DROP SHADOW TO A DIV
You can also add drop shadows to div tags. Again, you can control the color and location of the shadow, and you can even control how big it is, but the code for this is a bit more complex when you add all of those options, and you’ll need to use three different variations on this code to create shadows that work in Firefox and WebKit browsers. The code for this example is included in the following step, where you can see how it looks in Safari (like the other features in this column, you won’t see the drop shadows in Dreamweaver).
14 VIEW SHADOWS IN FIREFOX AND SAFARI
To view most of these features, you’ll need to preview your pages in the latest version of Firefox or Safari. Here’s the example shown in Safari above (and in Dreamweaver in the previous step).
.drop-shadow {
width: 625px;
padding: 5px;
-webkit-box-shadow: #CCC 10px 10px 5px;
-moz-box-shadow: #CCC 10px 10px 5px;
box-shadow: #CCC 10px 10px 5px; }
