CSS 3 Fancy
Mit CSS 3 können nun fancy Style-Effekte mit wenig Code erzielt werden. Die brauchbarsten sind runde Ecken, Rahmen-Bilder, Schatten und Transparenz.
Proprietäre Prefixe
Einige dieser CSS Level 3 Vorschläge sind im Februar 2011 vom W3C zu 'Candidate Recommendation' erklährt worden.
Sie sind also ziemlich sicher, dass das so verabschiedet werden wird, aber der Standard ist noch nicht gültig.
Vorläufig haben die unterschiedlichen Browseranbieter den Style-Anweisungen
ihre spezifischen Prefixes vorangestellt (oder nachträglich bereits wieder entfernt).
Wenn ein Browser auf unbekannte Deklarationen trifft, ignoriert er sie einfach,
kennt er sie, setzt er sie um. Es ist demnach ein guter Tipp,
die zukünftig angestrebte W3C Norm ohne Prefixes den proprietären Anweisungen folgen zu lassen.
- -moz-
- FireFox von Mozilla
- -webkit-
- Google Chrome und Safari
- -khtml-
- Konqueror
- -o-
- Opera
- -ms-
- Microsoft Internet Explorer
- W3C ohne Prefix
Default Style für den Container, auf welchen einige Deklarationen im Folgenden angewendet werden:
/* default Style für einige Container */
.demobox {
width: 250px; height: 125px; padding: 10px; background-color: #ccff99;
float: left; margin-right: 30px; margin-bottom: 50px;
}
Abgerundete Ecken
border-radius
Die abgerundeten Ecken werden von fast allen Browsern, ausser FF, sogar schon ohne proprietären Prefix umgesetzt.
Wenn alle vier Ecken gleich sein sollen, genügt eine einfache Angabe: border-radius:10px;
Dieser Container sollte 4 abgerundete Ecken haben.
border-radius:10px;
Dieser Container sollte oben links und unten rechts abgerundete Ecken haben.
Der Radius ist mit 100px jedoch zu gross, 30px wären ok.
Dieser Container sollte oben rechts und unten links abgerundete Ecken haben, aber keinen Rahmen.
Wenn die Ecken einzeln angesprochen werden sollen, hat moz eine Extrawurst. Die anbieterspezifischen Deklarationen sind:
w3c: border-top-left-radius, -moz-border-radius-topleft
#nr-01 {
/* proprietäre */
-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
/* W3C CSS 3 */
border-radius:10px;
/* W3C CSS 2.1 */
border: 2px solid #669900;
}
#nr-02 {
/* mozilla deklariert die einzelnen Ecken in einem Wort am Ende */
-moz-border-radius-topleft:30px;
-moz-border-radius-bottomright:100px;
/* webkit schiebt die einzelnen Ecken dazwischen */
-webkit-border-top-left-radius:100px;
-webkit-border-bottom-right-radius:100px;
/* W3C CSS 3 schiebt die einzelnen Ecken dazwischen*/
border-top-left-radius:30px;
border-bottom-right-radius:100px;
/* W3C CSS 2.1 */
border: 1px solid #669900;
}
#nr-03 {
-moz-border-radius-topright:40px;
-moz-border-radius-bottomleft:40px;
/* W3C CSS 3 */
border-top-right-radius:40px;
border-bottom-left-radius:40px;
}
Elliptische Ecken
Es sind auch 2 Angaben je Ecke möglich, durch zwei Radien werden die Rundungen Elliptisch.
Dieser Container sollte elliptisch abgerundete Ecken haben, oben breitere und unten höhere.
Unterschiedliche Radien treffen auf unterschiedliche Rahmenstärken!
Die Anweisungen im CSS:
#nr-33 {
/* mozilla */
-moz-border-radius-topleft:80px 40px;
-moz-border-radius-topright:80px 40px;
-moz-border-radius-bottomleft:40px 80px;
-moz-border-radius-bottomright:40px 80px;
/* W3C CSS 3 */
border-top-left-radius:80px 40px;
border-top-right-radius:80px 40px;
border-bottom-left-radius:40px 80px;
border-bottom-right-radius:40px 80px;
}
#nr-333 {
/* mozilla */
-moz-border-radius-topleft:40px 100px;
-moz-border-radius-topright:100px 100px;
-moz-border-radius-bottomleft:100px 100px;
-moz-border-radius-bottomright:40px 100px;
/* W3C CSS 3 */
border-top-left-radius:40px 100px;
border-top-right-radius:100px 100px;
border-bottom-left-radius:100px 100px;
border-bottom-right-radius:40px 100px;
border: solid #669900;
/*Rahmenstärke im Uhrzeigersinn startet oben*/
border-width: 2px 20px 40px 20px;
}
Box Schatten
Boxschatten sind nicht auf div-Container beschränkt, auch Bilder können Schatten werfen,
ohne, dass sie in einer Box stecken und auch andere blockbildende Elemente wie z.B. Titel.
Die Anweisung box-shadow kennt der IE9 ohne Prefix, der FF benötigt noch -moz- davor.
Die anzugebenden Werte zum Boxschatten werden durch Leerschläge getrennt in folgender Reihenfolge angegeben:
- Horizontaler Versatz (seitlich, eine negative Zahl wirft den Schatten nach links)
- Vertikaler Versatz (eine negative Zahl wirft den Schatten nach oben)
- Unschärfe (optional, ohne Angabe wird der Schatten nicht unscharf (eher wie ein harter Rahmen), je höher die Zahl desto weicher der Schatten)
- Grösse des Schattens um Anzahl Pixel (optionaler Parameter, wird hier weggelassen, eine negative Zahl verkleinert ihn)
- Farbe (optional, die Farbe kann auch als rgba-Wert angegeben werden, das a steht für den Alphakanal und bestimmt die Transparenz)
- Inset zum Schluss der Deklaration (optional, durch die Angabe von 'inset' wird der Schatten in die Box, statt hinter die Box geworfen.)
Es können mehrere Schatten angegeben werden, die sich dann im Unschärfebereich farblich mischen,
jeder Schatten wird durch ein Komma abfetrennt, der erste Schatten liegt zuoberst.
Ein nachfolgendes Element kommt über den Schatten eines vorherigen Elements zu liegen,
es wirft auch seinen eigenen Schatten auf das vorherige Element.
Box-Schatten
Multi Box-Schatten inset
Hard multi Box-Schatten
box-shadow
<style type="text/css">
/* Box mit Schatten */
#nr-05 {
-moz-box-shadow: 12px 10px 12px -8px #999999;
}
/* Bild mit Schatten */
#nr-55 {
-moz-box-shadow: 12px 10px 12px -8px Gray;
width: 250px; height: 145px;
}
/* Kreis mit 3 Farbschatten */
#nr-555 {
width: 80px; height: 80px;
background-color: white;
text-align: center;
-moz-border-radius:60px;
-moz-box-shadow:-30px 20px 30px Yellow, 30px 20px 30px Blue, 0px -30px 30px Red;
}
/* Box mit Multifarbschatten nach innen */
#nr-06 {
background-color: white;
-moz-box-shadow:inset 30px 30px 20px plum, inset 60px -30px 20px orange, inset -30px -50px 20px yellowgreen;
}
/* Box mit Multifarbschatten hardedge */
#nr-07 {
background-color: white;
border: 1px solid #999999;
-moz-border-radius-bottomright:60px;
-moz-border-radius-bottomleft:60px;
-moz-box-shadow:100px 20px Palegreen, 70px 20px red, 50px 20px #999999, 30px 20px white, 10px 20px Orange;
}
/* Kreis abgehoben */
#nr-77 {
width: 80px; height: 80px;
background-color: white;
text-align: center;
-moz-border-radius:60px;
-moz-box-shadow:-15px 20px 30px Olive;
/* zentriert: */
/* -moz-box-shadow:0px 0px 30px Olive; */
}
/* Schalter */
#nr-7777 {
width: 80px; height: 40px;
background-color: white;
text-align: center;
-moz-border-radius:15px;
-moz-box-shadow: inset 0px 0px 20px darkgrey;
}
</style>
In den Schatten gestellt
Möglicherweise sind die Browser der Zukunft 3D-Rendermaschinen oder gar Hologrammgeneratoren.
Immerhin ist es bereits jetzt möglich, durch runde Ecken aus einem Quadrat einen Kreis zu machen.
Text Schatten
Den Textschatten gab's schon einmal in CSS 2, und im FF funktioniert er schon gut, ohne proprietäres Prefix -moz-; - im IEs 9 gibt es noch immer keinen text-shadow. Weil es sich hier um Text handelt, empfiehlt es sich statt Pixel die Masseinheit em zu verwenden.
- Horizontaler Versatz, em in Dezimalstellen nach dem Komma (eine negative Zahl wirft den Schatten nach links)
- Vertikaler Versatz (eine negative Zahl wirft den Schatten nach oben)
- Unschärfe (ohne Angabe wird der Schatten nicht unscharf, je höher die Zahl desto weicher der Schatten)
- Grösse des Schattens um Anzahl Pixel, optionaler Parameter (wird hier weggelassen, eine negative Zahl verkleinert ihn)
- Farbe zum Schluss oder am Anfang der Deklaration (die Farbe kann auch als rgba-Wert angegeben werden, das a steht für den Alphakanal und betsimmt die Transparenz)
Text-Schatten
Text-Schatten
Schnee-Kappen
Transparenz-Schatten
text-shadow
<style type="text/css">
#nr-04 h1 {
text-shadow: .08em .12em .1em #66cc33;
font-size:30px;
}
#nr-44 h1 {
text-shadow: 0em 0.8em 1.5em darkblue;
font-size:30px;
}
#nr-444 h1 {
text-shadow: 0em -0.15em 0em white;
font-size:30px;
}
#nr-4444 h1 {
text-shadow: 3px 3px 6px rgba(0,0,0,0.3);
font-size:30px;
}
</style>
Rahmen-Bilder
Ein Rand um ein Loch
Mir pesönlich haben ja als Kind die Risskanten an den Schatzkarten gut gefallen, vor allem wenn sie noch leichte Brandspuhren aufwiesen! Spezielle Ränder (Box-Kanten) nun als Rahmen machbar - durch ein Bilder im Rahmen. (Leider spielt IE9 auch da noch nicht mit.)
stretch, round und repeat zur Verfügung.
Ohne Loch in der Mitte, wäre der 'Rahmen' einfach wie ein Hintergrundbild, welches sich der Box anpasst.
HTML:
<div class="demobox" id="nr-111">
Pergamentrahmen für Textbox
</div>
Das Bild:
<img src="images/bild_03.jpg" class="demobox" id="nr-10" />
border-image
stretch, round, repeat
CSS:
<style type="text/css">
#nr-111 {
border:20px solid #fff;
background-color: #e2cda4;
-moz-border-image:url(images/pergament_rahmen.png) 54 round;
-webkit-border-image:url(images/pergament_rahmenseite.png) 54 round;
-o-border-image:url(images/pergament_rahmenseite.png) 54 round;
border-image:url(images/pergament_rahmen.png) 54 round;
}
}</style>
Rahmensegmente für Ecken
CSS 3 unterteilt den Rahmen in linke, rechte obere und untere Seiten und in linke-obere,
rechte-obere, linke untere und rechte-untere Ecken. In alle Rahmen-Teile können nun unterschiedliche Bilder eingefügt werden.
Die Idee der Rahmen-Ecken-Bilder entstand beim Workaround mittels Tabellen
oder mittels unzähligen, ineinander verschachtelten Containern, in die dann Bilder
oder Hintergrundbilder gelegt wurden.
Einfachere Hintergrundbild-Techniken werden auch künftig noch zum Tragen kommen,
wozu Effekt-Bilder erzeugt werden, wie bei z.B. Apple-Store-Spiegelungen oder Crunchy-Look-Klebstreifen.
Ecken ab (und hinzu)
Ich hätte da noch weitergehende Ideen, wie negative Radien, die wirken, als hätte man eine Ecke abgebissen (a).
Vor nicht allzulanger Zeit waren schräg abgeschnittene Ecken auch beliebt (b).
Und negative Ecken erzeugten so etwas wie Eselsohren (c).
Ups, das ist ja alles schon möglich, dank CSS3 Tranform.
a)
b)
c)
d) 
Und hier ein Schmankerl von Jeffrey Way bei net.tutsplus.com:
Ribbon
/* HTML */
<div id="ribbonbox">
<h1 class="ribbon"> Ribbon <span class="arrow"></span> </h1>
</div>
/* CSS3 */
/* By Jeffrey Way */
#ribbonbox {
background: #666;
margin: 0px;
width: 300px;
height: 100px;
padding-top: 30px;
font-family: helvetica, arial, sans-serif;
}
h1.ribbon {
background: #e3e3e3;
background: -moz-linear-gradient(top, #e3e3e3, #c8c8c8);
background: -webkit-gradient(linear, left top, left bottombottom, from(#e3e3e3), to(#c8c8c8));
padding: 10px 20px;
margin-left: -20px;
margin-top: 0;
position: relative;
width: 70%;
-moz-box-shadow: 4px 2px 6px #292929;
-webkit-box-shadow: 4px 2px 6px #292929;
box-shadow: 4px 2px 6px #292929;
color: #454545;
text-shadow: 0 1px 0 white;
}
/*
Der Spickel besteht aus dem oberen Rahmenteil
mit der Gehrung (Winkelhalbierende) zum transparenten linken Rahmenteil
als Schräge des dimensionslosen Span:
*/
.arrow {
width: 0; height: 0;
line-height: 0;
border-left: 20px solid transparent;
border-top: 14px solid #c8c8c8;
top: 104%;
left: 0;
position: absolute;
}
Transparenz
Transparenz funktioniert in IE und FF.
Durch Transparenz kann man Elemente ein- und ausblenden und zusammenführen,
es lohnt sich, mehrere Schichten übereinander zu legen.
Es gibt zwei Arten um Transparenz herzustellen:
- opacity: Auf ganze Container angewendet, wird alles darin befindliche gleich transparent.
- color: Der letzte Wert (das A) bei der RGBA und bei der HSLA Angabe steht für den Alphakanal und somit für Transparenz. Damit lässt sich die Transparenz einer Hintergrundfarbe oder Textfarbe separat steuern.
- filter: Der IE hat seine ganz eigenen Funktionen in der Sammlung 'filter', diese können auch Schatten werfen etc.
Opacity
Opacity wird ohne Prefix schon von FF dargestellt.
Opacity Opacity
Opacity Opacity
opacity
<style type="text/css">
#nr-08 {
font-size:30px;
/* css 3 */
-webkit-opacity: 0.5;
-o-opacity: 0.5;
-ms-opacity: 0.5;
opacity: 0.5;
}
#nr-09 {
font-size:30px;
/* css 3 */
-webkit-opacity: 0.3;
-o-opacity: 0.3;
-ms-opacity: 0.3;
opacity: 0.3;
/* css 2 */
background-color: black;
position:relative;
left:-195px;
}
</style>
Color
rgba und hsla werden auch schon von FF ab Version 3.1 dargestellt.
hsla
Color
rgba
Color
Color hsla und rgba
- Die hsla Angabe besteht aus 'hue' (Farbton) auf dem Farbkreis in Graden ohne Sorte 1-3stellig, 'saturation' (Sättigung) und 'lightness' (Helligkeit) in Prozenten mit %, und dem Alphawert von 0.0 bis 1.
- Die rgba Angabe besteht aus Rot, Gelb, Blau dreistellig, und dem Alphawert von 0.0 bis 1.
<style type="text/css">
#nr-081 {
font-size:30px;
/* css 3 */
background-color:hsla(0,100%,50%,0.5);
}
#nr-091 {
font-size:30px;
position:relative;
left:-195px;
/* css 3 */
background-color:rgba(204,204,0,0.5);
}
</style>
Filter
Die Alpha-Filter von IE haben meinen FF Browser zum Absturz gebracht:
/* filter:Alpha(opacity=50, finishopacity=50, style=2;) */
Die Kurzversion soll aber brauchbar sein:
filter:Alpha(opacity=50)
Mehr CSS3
Ein paar weniger spektakuläre Style-Ergänzungen durch CSS 3 betreffen die Selektoren, nachzulesen unter den Kapiteln 'Neue Attribut Selektoren in CSS 3' und 'Pseudoelemente und PseudoKlassen' auf der Seite syntax.php.
Ein wohl richtig populäres Pseudoelement wird :nth-child() werden, besprochen
bei der Zebra-Tabelle auf der Seite
tabellen.php.
CSS3 Überblick und Einsicht
Ich verweise auf ein paar Seiten, die einen wiederholten Besuch wert sind, weil dort das Fortschreiten des CSS3-Standards mitverfolgt werden kann:
- >> www.css3.info auch der Abschnitt Preview lohnt sich
Check den Code.