CSS Image Preloader

Es wird ein Hintergrundbild für IMG Tags eingeblendet solange das Bild nicht komplett geladen wurde.

img {  
  background:url(images/preloader.gif) no-repeat 50% 50%;  
}

CSS Text Shadow

Mit Hilfe von CSS3 lassen sich für Textelemente stilvolle Schatteneffekte realisieren. Im Trend leigt derzeit die Darstellung von eingestanzten Text.

.class {
  text-shadow: 1px 1px 0 #000;
}

1. Wert: horizontale Ausrichtung
2. Wert: vertikale Ausrichtung
3. Wert: Unschärfe (Blur)
4. Wert: Farbe des Schattens

CSS Box Shadow

CSS3 bietet uns eine Menge neuer Features. Unter anderem die neuen Box Shadows mit denen sich schöne Effekte erzielen lassen:

Ausserhalb:

.class {
  box-shadow: 5px 5px 5px 5px #000;
  -moz-box-shadow: 5px 5px 5px 5px #000;
  -webkit-box-shadow: 5px 5px 5px 5px #000;
}

Innerhalb:

.class {
  box-shadow: inset 0 0 8px #000;
  -moz-box-shadow: inset 0 0 8px #000;
  -webkit-box-shadow: inset 0 0 8px #000;
}

1. Wert: horizontaler Versatz
2. Wert: vertikaler Versatz
3. Wert: Unschärfe Radius
4. Wert: Ausdehnung
5. Wert: Farbe des Schattens

CSS: Einbettung von @font-face

@font-face {
  font-family: 'MyFontFamily';
    src: url('myfont-webfont.eot#') format('eot'), 
    url('myfont-webfont.woff') format('woff'), 
    url('myfont-webfont.ttf')  format('truetype'),
    url('myfont-webfont.svg#svgFontName') format('svg');
}

Resize Button bei Textarea abschalten (CSS3)

Resize-Funktion bei einer Textarea unterdrücken:

CSS:

textarea { resize:none; }