Home / Articles / Adobe Dreamweaver / Using the Dreamweaver CS5 HTML5 Pack to Create CSS3 Transforms

Using the Dreamweaver CS5 HTML5 Pack to Create CSS3 Transforms

Article Description

By using CSS3 style sheets, you can apply some pretty cool visual effects to content in your web pages. David Karlins, author of Adobe Creative Suite 5 Web Premium How-Tos: Essential Techniques, shows how to work with a few of these effects in Dreamweaver CS5.
Applying a Skew

Applying a Skew

Next, let's apply this style to some content on an HTML page:

  1. Choose File > New to reopen the New Document dialog. This time, we're not creating a new CSS file; instead, we're creating a blank web page. Select Blank Page in the left column, HTML from the Page Type column, <none> from the Layout column, and click Create.
  2. Save the file in your site's root folder as 2d.html.
  3. Click the Attach Style Sheet button at the bottom of the CSS Styles panel. (It should still be visible; if not, choose Window > CSS Styles.) Use the Browse button in the Attach External Style Sheet dialog box to browse to and select the 2d.css file. Make sure that the Link option button is selected (see Figure 2).
  4. Figure 2 Attaching a style sheet.

  5. With the style sheet attached, choose Insert > Layout Object > Div Tag. In the Insert Div Tag dialog, choose skew from the ID pop-up (see Figure 3).
  6. Figure 3 Inserting the skew Div tag.

  7. Click the Live View button (or choose File > Preview in Browser if you're using Dreamweaver CS3). You can see the effect applied to the sample text (see Figure 4). Try substituting your own image and/or text inside the Div.
  8. Figure 4 Previewing a skewed Div tag.

The basic technique we just used to create a skew style can be adapted to create styles that rotate, rescale, and translate (move) objects. You could even apply combinations of these effects to a single block of content. In the next section, I'll walk you through how to change the skew effect to apply rotation, scaling, and translation.