Webwork
/
CSS3

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:

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;"
Web page:



Source:
style="background:url(images/1.gif);
background-size:64px 64px;
background-repeat:repeat;"
Web page:



Text Effects

Text Shadows:

Source:
font-size: 36px; color: #345; text-shadow: 4px 4px 4px #999;
Web page:
This is some text.

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.
< Previous     Webwork Table of Contents     Next >
Re-Vision.com

projects:
Simple Truths (and Complex Lies)

The Built World
Semblance Portrait Project
Back to Square One
Changing Chicago
Chicago's Reliance Building
US
Along the Mississippi River
The Work of Antoni Gaudí
Graffiti

places:
Morocco 2023
Beecher, Illinois
Iceland 2017
Cuba 2015
Providence, Rhode Island
Greece 2013
Eastern Europe 2013
Israel 2010
Paris, France
Puebla, Mexico 2009
Puerto Rico 2009
Barcelona 2007
Rome, Italy 2006

archive:
Graphics, sounds, and other ancient
items from the dawn of the Web.


FWIW:
Biography

©
Jay Boersma