First look at CSS3 web design elements

By Ryan Boudreaux September 27, 2011 TechRepublic, Web Design

Along with the advent of HTML5, we are now seeing strides in CSS coding, better known as CSS3. There are several functions and features which can be utilized today to define the styling of such web design elements as display block rules, gradients, tables, fonts, columns, images, rounded corners, 3D text, and transitioning effects. Others include borders, backgrounds, color, text effects, user-interface, selectors, basic box models, generated content, and other modules. This post will demonstrate several of these CSS3 coding examples. Others will be demonstrated in later posts.

CSS3 Modules

CSS3 has been split into multiple modules by the W3C so that their progress can be tracked toward the recommended status, each at a different level as they advance in development. Currently no module has yet reached the Recommendation status. The CSS3.info module status table is updated regularly and includes proposed, candidate, last call, working draft, and announced modules.

CSS3 Display rule

Used in conjunction with HTML5 elements, the following display block styling should be added to your standard CSS file:

address, article, aside,

canvas, figcaption, figure,

footer, header, hgroup, nav,

section, summary {

display:block;

Browser prefixes in rules

The following prefixes used in the rules for the more popular browsers are listed below and will help ensure cross-browser support:

Web-kit is used for Chrome and Safari; syntax is -webkit-
Moz is used for Firefox and Mozilla; syntax is -moz-
Khtml is used for the KDE project and Konqueror; syntax is -khtml-
O is used for Opera; syntax is -o-
MS for IE; syntax is -ms-

In most cases the actual property of the rule needs to be the very last entry in the CSS style; as such, the webkit, moz, Khtml, MS, and O rules should be listed before the last property of the element of the same rule. For example purposes only, sample prefix rules are shown below in the blockquote border-radius styles:

.entry blockquote.right {

width: 200px; font-style: normal font-size: 1.3em;

margin: 0.3em 0 0.3em 15px padding: 0.3em 0;

border:thin;

border-color:#A0A0A4;

border-style:double;

border-radius: -moz-border-radius(3px double #aaa);

border-radius: -webkit-border-radius(3px double #aaa);

border-radius: -khtml-border-radius(3px double #aaa);

border-radius: -o-border-radius(3px double #aaa);

border-radius: 3px double #aaa;

border-width: 3px 0;

text-align: left; float: right;

This example HTML for the blockquote is below, followed by its display in Firefox 6.0 (Figure A).

<div>

<blockquote>

I still find each day too short for all the thoughts

I want to think, all the walks I want to take, all the books

I want to read, and all the friends I want to see.<br />

<strong>John Burroughs</strong>

</blockquote>

</div>

Figure A

CSS3 Gradients

Gradients in CSS3 can include color stops, including even stops, arbitrary stops, linear-gradients, linear backgrounds, radial centers and radial positions. In the example, CCS3 code below, note the fallback color and png image referenced before the prefix gradients, and then the prefix code lines for Safari, Chrome, Firefox, IE, and Opera are listed next.

.gradient1-bg {

/* fallback/image non-cover color  */

background-color:#CCFFFF;

/* fallback image    */

background-image: url(images/fallback-gradient1.png);

/* Safari 4+, Chrome 1-9 */

background-image: -webkit-gradient(linear, 0% 0%, 0% 0%, from(#CCCCFF), to(#CCFFFF));

/* Safari 5.1+, Mobile Safari, Chrome 10+ */

background-image: -webkit-linear-gradient(top, #CCCCFF, #CCFFFF);

/* Firefox 3.6+ */

background-image: -moz-linear-gradient(top, #CCCCFF, #CCFFFF);

/* IE 10+ */

background-image: -ms-linear-gradient(top, #CCCCFF, #CCFFFF);

/* Opera 11.10+ */

background-image: -o-linear-gradient(top, #CCCCFF, #CCFFFF);

The example below shows HTML code for the linear gradient followed by its rendering in Chrome 13.0.782 (Figure B).

<p><strong>Linear Gradient</strong> Top to bottom gradient</p>

<div></div>

Figure B

CSS3 Tables

Several styling options for tables include being able to use selectors for odd or even rows, or specifying exact rows such as “first”, “last”, “third” with special background colors.

Several samples are listed here:

The use of tr th[title=””], tbody and tfoot, and selectors, as in tr:nth-child(odd) or (even) allows styling for every other row in a table, for example. Others are: (first) or (last), (third) or (fourth). Here is an on hover example:

tbody tr:nth-child(even):hover td

{background:rgb(254,255,249); color:rgb.....}

Take a look at this CSS3 styling example:

tr th[title="Table Examples"] {

      color:rgb(150, 0, 0);

tbody td {

      font-family: "Courier New", Courier, monospace;

      background: rgb(175, 170, 150);

      padding-top:5px;

tbody tr;nth-child(odd) td {

      background: rgb(150, 140, 120);

      color: rgb(240, 240, 240);

tbody tr:nth-child(even) td {

      background: rgb(200, 210, 200);

      color: rgb(50, 50, 50);

      height:20px;

tbody tr:nth-child(odd)td,tbody tr:nth-child(even) td{

      height:20px:

tbody tr:nth-child(odd) :hover td, tbody tr:nth-child(even) :hover td {

      background: rgb(250, 255, 245);

      color: rgb(55, 45, 35);

With the CSS3 code above the following HTML code results in a table as displayed in Chrome 13.0.782 in Figure C.

 <table>

      <tbody>

            <tr>

               <td>Row 1</td>

                <td>&nbsp;</td>

                <td>&nbsp;</td>

                <td>&nbsp;</td>

            </tr>

            <tr>

               <td>Row 2</td>

                <td>&nbsp;</td>

                <td>&nbsp;</td>

                <td>&nbsp;</td>

            </tr>

             <tr>

               <td>Row 3</td>

                <td>&nbsp;</td>

                <td>&nbsp;</td>

                <td>&nbsp;</td>

            </tr>

        </tbody>

 </table>

Figure C

CSS3 Fonts

Most likely I could devote an entire post on CSS3 fonts, and probably will in the future, but for now I will just touch lightly on the subject. Fonts for print are not the same for web fonts, so in general, you will need to purchase fonts and put them on your web server making sure they are properly licensed for use. Conversely the @font-face rule first introduced with CSS2 was implemented with IE 5; however, it relied on the Embedded Open Type (EOT) or .eot font file format, and no other browsers used it at the time. Since Safari 3.1, web developers have been able to use any licensed TrueType font (TTF) .ttf font file type on their websites.

As specified by the W3C the @font-face rule allows for linking to fonts that are automatically activated when needed. This allows web authors to select a font that closely matches the design goals for a given page rather than limiting the font choice to a set of fonts available on all platforms. A set of font descriptors define the location of a font resource, either locally or externally, along with the style characteristics of an individual face. Multiple @font-face rules can be used to construct font families with a variety of faces. Using CSS font matching rules, a user agent can selectively download only those font faces that are needed for a given piece of text.

The general form of an @font-face rule is:

@font-face { <font-description> } where <font-description> has the form:

descriptor: value;

descriptor: value;

[...]

descriptor: value;

For example to use a downloadable font called Retrospective the styling would look something like this:

@font-face {

  font-family: Retrospective;

  src: url(http://example.com/fonts/Retrospective.ttf);

Then call the rule using font family:

p { font-family: Retrospective, san-serif; }

In a future segment on CSS3, I will review formatting columns, images, creating rounded corners, 3D text, and transitioning among other features. And later this week, I will post a review of a favorite CSS3 resource of mine, highlighting several preferred features.