CSS3 Elemente Test für Internet Browser nach den Empfehlungen des W3C

CSS 3, Cascading Style Sheets 3 Test

Einfache Beispiele für die Cascading Style Sheets Version 3 (CSS 3) Elemente @font-face, text-shadow, border-radius, box-shadow und opacity. Alle hier verwendeten Elemente entsprechen der Syntax, die in den CSS Working Drafts des W3C angegeben sind. Es werden keine browserspezifische Funktionen eingesetzt.

CSS Font Element Level 3 @font-face

Texte mit einen anderen Font als die XHTML Standard Fonts darstellen.

Dieser Text sollte als handgeschriebener Text dargestellt werden.

  @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

Texte oder Überschriften mit einem Schatten unterlegen.

Dieser Text ist mit einem Schatten unterlegt

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

CSS3 Element border-radius

Design-, Inhalts- oder Tabellenbereiche mit abgerundeten Ecken darstellen.

  .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

Um die Möglichkeiten des CSS3 Elements "box-shadow" zu zeigen, wurde hier auch das CSS3 Element "border-radius" verwendet, um eine Box mit abgerundeten Ecken und einem passenden Schatten hierzu darzustellen.

  .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

Transparenz für Elemente die über dem Hintergrund liegen. Durch Angabe eines Wertes zwischen 0 und 1 kann die Deckkraft reguliert werden.

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