 |
 |
BasicsCSS3 - Beyond CSS
Stepping up in Design
CSS3 may be viewed as moving from College101 to the 200 series. Some of the CSS3 features are not available in DreamWeaver and will have to be coded directly. There are many resources and tutorials for learning an using CSS3; one is w3school.com
Text Effects
Although with the many options of setting the color, size, family and other features of text, CSS3 offers drop shadows. Some versions of Dreamweaver do not include the shadow as a feature and therefore direct coding in HTML is necessary. The coding would appear much like below either in the <head> or a separate CSS document. The variables are the offset to the right and down, the blur and the color.
.myshadow
One can also control the font-family even on the client side with CSS that defines and applies the font.
One would find special fonts online, download them into one's own folders and then define and reference them in the style sheet in a manner similar to the following. The hollavetica font was found at dafont.com
{
text-shadow: 2px 4px 5px #FF0000;
}
<style type="text/css">
@font-face
{
font-family: myNewFont;
src: url('images/hollavetica.ttf')
,url('images/hollavetica.eot'); /* IE9+ */
}
.newfont
{
font-family:myNewFont;
}
</style>
Borders and Backgrounds
Segments of text can to put in a box and round the corners.
Code for rounding corners would look something like below. The above sample was applied to a <span class="roundcorners"> tag.
.roundcorners
Boxes may also have shadows.
{
border:3px solid #0000CC;
padding:10px 20px;
background:#dddddd;
width:300px;
border-radius:15px;
-moz-border-radius:15px; /* Firefox 3.6 and earlier */
}
.boxshadow
Boxes may also have fancy borders.
{
background:#dddddd;
box-shadow: 10px 10px 5px #888888;
}
.fancyborder
{
border-image:url(images/akmoose4.gif) 30 30 round;
-moz-border-image:url(images/akmoose4.gif) 30 30 round; /* Firefox */
-webkit-border-image:url(images/akmoose4.gif) 30 30 round; /* Safari and Chrome */
-o-border-image:url(images/akmoose4.gif) 30 30 round; /* Opera */
}
Transformations
CSS3 may be viewed as moving from College101 to the 200 series. Some of the CSS3 features are not available in DreamWeaver and will have to be coded directly.
Animations
CSS3 may be viewed as moving from College101 to the 200 series. Some of the CSS3 features are not available in DreamWeaver and will have to be coded directly.
Columns and User Interface
CSS3 may be viewed as moving from College101 to the 200 series. Some of the CSS3 features are not available in DreamWeaver and will have to be coded directly.