CSS 3 element test based on the W3C recommendations

CSS 3, Cascading Style Sheets 3 test

Test your browser with Cascading Style Sheets 3 (CSS 3) elements @font-face, text-shadow, border-radius, box-shadow and opacity. The samples use the syntax of the W3C CSS Working Drafts. No browser specified functions are used.

CSS Fonts Module Level 3 @font-face

Using other fonts as XHTML standard fonts.

This is a hand writing text.

  @font-face {
  font-family: 'Thommy Handwrite';
  src: url('thommy_handwrite.eot');
  src: local('Thommy Handwrite'),
         url('thommy_handwrite.otf') format('opentype'),
         url('thommy_handwrite.ttf') format('truetype'),
         url('thommy_handwrite.svg#ThommyHandwrite') format('svg');
  }
  

CSS3 element text-shadow

Add a shadow for headlines or text.

Simple text with shadow

  .showshadow {
    font-size: 1em; 
    color: #a52a2a;
    background-color: #ffffff; 
    text-shadow: #cccccc 2px 3px;
  }
  

CSS3 element border-radius

Give content ares or tables rounded corners.

  .roundedcorner {
    display: block;
    text-align: center;
    color: #aaaaaa;
    background-color: #ffffff;
    padding: 0.1em;
    border: 2px solid #ff8001;
    border-radius: 15pt 15pt;
  }
  

CSS3 element box-shadow

This sample show a box with rounded corners and a matching shadow at bottom. It use the CSS3 element "border-radius" for the rounded corners and the CSS3 element "box-shadow" for the shadow.

  .roundboxshadow {
    display: block;
    text-align: center;
    color: #aaaaaa;
    background-color: #ffffff;
    padding: 0.1em;
    border: 1px solid #aaaaaa;
    border-radius: 15pt 15pt;
    box-shadow: 0.3em 0.3em #cccccc;  
  }
  

CSS3 element opacity

Opacity can be used to make an element transparent against the current background. Possible values are 0.0 (fully transparent) to 1.0 (fully opaque)

  .opacity-box09 {
    margin: 1em; 
    float: left; 
    height: 100px; 
    width: 100px; 
    color: #800000; 
    background-color: #808000; 
    opacity: 0.9;
  }