Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Creating a Skew Style
There are many ways to approach defining styles for a website. I consistently argue for the value of saving styles to an external style sheet, and we'll adopt that approach here. An external style sheet (CSS file) saves formatting in a discrete file. Styles saved to that CSS file can be applied repeatedly, to any number of web pages. We'll build an external CSS file for the styles we use to apply 2D effects, and then we'll attach that style sheet to an HTML page to explore and test those effects.
The first step is to create a new CSS file in Dreamweaver. Follow these steps:
- Choose File > New. The New Document dialog opens.
- Choose CSS in the Page Type category and then click the Create button. Save the CSS file. If you're following my recipe here, use the filename 2d.css. A blank CSS page opens. It doesn't look like much, and it isn't very inviting. But you can begin to create styles for this CSS file without coding.
- Choose Window > CSS Styles to display the CSS Styles panel (if it's not visible). Click the New CSS Rule button at the bottom of the CSS Styles panel to launch the New CSS Rule dialog box.
- From the Selector Type pop-up, choose ID. In the Rule Definition pop-up, choose (This Document Only). In the Selector Name box, type skew.
- Use the Add Property link in the bottom half of the CSS Styles panel, and choose the following properties and values (see Figure 1):
- background-color : #FF0
- border: 1px red solid
- float: left
- height: 200px
- margin: 10px 20px
- padding: 10px
- width: 150px
)
Figure 1 Defining an ID style.
With these parameters, we've created a container for content (text or image) that is 200 pixels high, 150 pixels wide, will align left, has a thin red border, a yellow background, a margin of 10 pixels above and below the box and 20 pixels on either side, and 10 pixels of padding inside the box.
Now let's add skewing attributes. To do that, we'll need to enter code in the CSS file—and we'll need separate code for Safari, Firefox, and Opera. But we'll get help with all that coding from the HTML5 Pack's code hints. Follow these steps:
- Place your cursor after the semicolon (;) following the last line of CSS for the skew style.
- Press Return (Mac) or Enter (Windows) to create a new line of CSS code for the style. The code hint pop-up appears.
- Scroll down the code hint pop-up until you see "-webkit-transform" in the list.
- Double-click this code to add it. In the new pop-up, scroll down to "skew(,)" and double-click it to append this parameter to the CSS style.
- Replace the parentheses and comma (,) in the code with this:
(-15deg)
The line of code should read as follows:
-webkit-transform:skew(-15deg);
The -15deg parameter will skew the content of the Div "tilted" 15 degrees counterclockwise (because a negative value skews counterclockwise, and a positive value skews clockwise), with the left edge of the box formed by a diagonal line that runs down and left from the upper-left corner of the Div. (You'll see how this looks shortly.)
Feel free to experiment with your own parameters after you get the hang of defining skew effects.
The -webkit version of the skew parameters will affect how the style displays in Safari. To enable this effect in Firefox, we need to add a new line of code. Using the technique you just learned for selecting and adding code by using code-hints, add the following line of code below the last line you just created:
-moz-transform:skew(-15deg);
Finally, add this line to make the effect visible in the Opera browser:
-o-transform:skew(-15deg);
The entire style definition should read like this:
#skew {
float:left;
width:150px;
height:200px;
margin:10px 20px;
padding:10px;
border:1px red solid;
float:left;
-webkit-transform:skew(-15deg);
-moz-transform:skew(-15deg);
-o-transform:skew(-15deg);
background-color: #FF0;
}