CSS3 is the newest version of the Cascading Style Sheets reference. It is still under development and browsers do not fully support it yet but this is rapidly changing.
In conjunction with HTML5, CSS3 provides a whole new tool kit for building interactive Web content. Though CSS3 is totally backwards compatible, it is now broken up into modules. some of these contain the old CSS pieces and others are new:
- Backgrounds and Borders
- Selectors
- The Box Model
- Text Effects
- 2D and 3D Transformations
- Animations
- Multiple-Column Layout
- User Interface
The material presented here is simply a broad overview of some of CSS3's new capabilities. As usual, there is much more information available at w3schools.com.
Backgrounds and Borders
Rounded corners, without having to resort to four little corner graphics:
Source:
<style>
.rounded
{
border:2px solid #c99;
padding:10px 40px;
background:#eed;
border-radius:10px;
}
</style>
<div class="rounded">The border-radius property in action.</div>
Web page:
The border-radius property in action.
Drop shadows without graphics:
Source:
<style>
.roundedwithshadow
{
border:2px solid #c99;
padding:10px 40px;
background:#eed;
border-radius:10px;
box-shadow: 7px 7px 10px #888;
}
</style>
<div class="roundedwithshadow">The border-radius property with drop-shadow added.</div>
Web page:
The border-radius property with drop-shadow added.
Additional background properties:
Background size:
Source:
style="background:url(images/1.gif);
background-size:32px 32px;
background-repeat:repeat;"
Source:
style="background:url(images/1.gif);
background-size:64px 64px;
background-repeat:repeat;"
Text Effects
Text Shadows:
Source:
font-size: 36px; color: #345; text-shadow: 4px 4px 4px #999;
Word Breaks:
Source:
font: normal 18px/24px 'trebuchet ms', sans-serif;
Web page:
These are some long words:
aerographeraerologicalaeromagnetic
aeromechanicaeromechanics
aeromedicalaeromedicine
aerometeorographaeronautical
aeroneurosisaeronomical
aeropropulsionaerosolisation
aerostaticsaerostation
aerothermodynamics
Source:
word-break:break-word; font: normal 18px/24px 'trebuchet ms', sans-serif;
Web page:
These are some long words:
aerographeraerologicalaeromagnetic
aeromechanicaeromechanics
aeromedicalaeromedicine
aerometeorographaeronautical
aeroneurosisaeronomical
aeropropulsionaerosolisation
aerostaticsaerostation
aerothermodynamics
There are many more text effects on the way but they are not supported by browsers yet.
Fonts
CSS3 makes it possible to upload fonts to your server and then reference them in your Web pages. For this to work with all browsers, both .ttf and .eot font types must be uploaded.
Source:
<style>
@font-face
{
font-family: webFontTest;
src: url('http://re-vision.com/webwork/p56css3/BebasNeue-webfont.ttf'), /* Everybody except IE */
url('http://re-vision.com/webwork/p56css3/BebasNeue-webfont.eot'); /* IE9+ */
}
</style>
<div style="font: 42px/42px webFontTest, sans-serif; ">
This is a test of webFontTest ("BebasNeue") font.</div>
Web page:
This is a test of webFontTest ("BebasNeue") font.
Transformations
CSS3 allows you to move, scale, turn, spin and stretch elements.
Source:
<div style="width: 200px;
border: #0f0 solid 1px;
padding: 20px;
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */">
This div is rotated 30 degrees. The one above left is rotated -30 degrees.
</div>
Web page:
This div is rotated 30 degrees. The one above left is rotated -30 degrees.
The above are 2D rotate transformations. Other 2D transformations are translate, scale, skew and matrix.
CSS3 also defines 3D transformations but browsers (IE and Opera) do not support these yet.
Multiple Columns
Another one that doesn't work in Internet Explorer, multi-column text is a feature the Web has needed for a long time.
Source:
<style>
.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}
</style>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
