Archiv für die Kategorie „CSS 3“

CSS 3: text-shadow – Schatten für Text

Montag, 22. März 2010

Hier auch noch mal eine Notiz (für mich selber) wie das mit CSS 3 und dem Text-Schatten funktioniert.

text-shadow: 2px 2p 2px #000;

Dabei stehen die Werte für folgende Eigenschaften:

  1. die X-Verschiebung
  2. die Y-Verschiebung
  3. Stärke des Weichzeichnungs-Effekts (Blur)
  4. Farbe des Schattens

Und hier noch 2 ganz schicke Beispiele (geklaut von kremalicious.com)

Beispiel 1:

color: #000;
background: #666;
text-shadow: 0px 1px 1px #fff;

Ich sehe ein wenig aus, wie eingravierter Text.

Beispiel 2:

color: #666;
background: #000;
text-shadow: 0px 1px 0px #ccc;

Ich bin grauer Text mit weißem Schatten auf fast schwarzem Hintergrund.

CSS 3: border-radius – abgerundete Ecken

Montag, 22. März 2010

Da ich in letzter Zeit jedes mal wieder bei google suchen musste, wie nun die genaue Syntax für abgerundete Ecken mit CSS 3 ist, werde ich mir das hier mal selber notieren.

Hinzu kommt auch noch, dass jeder echte Browser das zwar schon interpretiert, allerdings ist da auch für (fast) jeden die Syntax anders. Opera beispielsweise hält sich schon jetzt an das vom w3c vorgeschlagene „border-radius“, während Mozilla und Webkit da (noch) ihr eigenes Süppchen brauen.

CSS 3 Standard (Opera 10.5):

border-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;

Mozilla (Firefox):

-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;

Webkit (Safari, Chrome):

-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;

und alles zusammen:

border-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;