Like this article? We recommend
Applying a Skew
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Applying a Skew
Next, let's apply this style to some content on an HTML page:
- 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.
- Save the file in your site's root folder as 2d.html.
- 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).
- 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).
- 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.
){kind=small}
Figure 2 Attaching a style sheet.
){kind=small}
Figure 3 Inserting the skew Div tag.
)
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.