Design
Farbverläufe und Masken
- Kreative Textgestaltung mit CSS3
- Farbverläufe und Masken
- Weitere Möglichkeiten
Farbverläufe und Masken
Webkit-Browser (darunter Safari ab der Version 4.0) bieten mit der Eigenschaft:
-webkit-mask-image
eingebaute Unterstützung für Masken, wobei sich hier als eine Maske sowohl ein Bild als auch ein Verlauf einsetzen lässt. Mittels
-webkit-mask-image: -webkit-gradient
können Sie auf Text in Webkit-Browsern anstatt einer einheitlichen Textfarbe einen transparenten Verlauf anwenden (siehe dazu "Effektkompositionen, Verläufe und RGBa").Sollte der Verlauf auch in anderen Webbrowsern funktionieren, müssen Sie ihn allerdings anders umsetzen. Eine Möglichkeit besteht darin, den Text mit einem absolut positionierten Bild zu überlagern. Hierzu wird erst einmal dieses Markup benötigt:
<h1><span></span>Eine Ueberschrift mit
einem Verlauf</h1>
Der Verlauf auf dem Text entsteht mittels:
h1 {
font: bold 330%/100% "Lucida Grande";
position: relative;
color: #464646;
}
h1 span {
background: url(Verlauf.png)
repeat-x;
position: absolute;
display: block;
width: 100%;
height: 32px;
}
Der Text bleibt nach wie vor auswählbar.
CSS-Übergänge
Schließlich können Sie auf den Text in modernen Browsern CSS3-Übergänge anwenden. Bei CSS-Übergängen liegt zwar erst noch ein Entwurf der Spezifikation und kein finaler Standard vor, doch Übergänge werden bereits in Apple Safari seit der Version 3.1 und in iPhone OS seit der Version 2.0, in Google Chrome und in Opera seit der Version 10.5 unterstützt.Firefox hat eine eigene Implementierung von CSS-Übergängen seit der Version 3.7 alpha in Arbeit und für die Version 4 fest zugesagt. Microsoft hat derzeit keine Pläne für die Unterstützung von CSS3-Übergängen in IE9; hier können Sie am ehesten auf Microsofts Matrix-Filter ausweichen.Mithilfe von CSS-Übergängen können Sie unter anderem verschiedene Eigenschaften von Textverknüpfungen und auch etwa CSS-basierte Navigationsmenüs animieren.
Fazit
Einige Eigenschaften, die noch nicht Teil des offiziellen Entwurfs der CSS-Spezifikation sind, werden durch die Webbrowser erst experimentell unterstützt. Dazu zählen unter anderem Konturen für Textzeichen, Masken und CSS-Übergänge. Dennoch verfügen Sie bereits um genügend Spielraum, um kreative Texteffekte mit reinem CSS umzusetzen.Möglichkeit 1: Effektvolle Übergänge auf Text anwendenDie Gestaltung von CSS-Übergängen erfordert, dass mindestens eine Eigenschaft des betreffenden Elementes in zwei Zuständen der Interaktivität zwei unterschiedliche Werte einnimmt. Diese Interaktivitätszustände werden mithilfe dynamischer Pseudoklassen definiert. Zusätzlich zu dem normalen Zustand eines Elementes stehen Ihnen also :link (noch nicht besuchte Links), :visited (bereits besuchte Links), :hover (Schweben der Maus über einem beliebigen Element), :active (Anklicken eines beliebigen Elementes) und :focus (Auswählen eines beliebigen Elementes) zur Verfügung.Damit eine h1-Überschrift auf die Zustände :hover und :active mit CSS3-Übergangseffekten reagiert, definieren Sie die betreffenden Eigenschaften für diese Zustände abweichend und fügen Sie die Übergänge dem h1-Selektor hinzu, zum Beispiel wie folgt:
h1 {
padding: 5px 10px;
opacity: 0.2;
color:#000;
background:white;
-webkit-transition-property: all
1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
h1:hover, h1:focus, h1:active {
opacity: 1;
color:#white;
background-color: #CCC;
}
Dadurch entsteht beim Wechsel zwischen den Zuständen ein Übergang für jede der unterstützten Eigenschaften (transitionproperty:all). Diesen Übergang zwischen den Grenzwerten der einzelnen Zustände berechnet der Browser anhand einer sogenannten Übergangsfunktion (transition-timing-function:).Derzeit verfügbare Übergangsfunktionen beinhalten ease, linear, ease-in, ease-out, ease-inout und cubic-bezier. Sie können im Übrigen einem einzigen Element auch mehrere Übergänge zuweisen. Die einzelnen Übergänge für die verschiedenen CSS-Eigenschaften des betreffenden Elementes müssen in einer einzigen CSS-Deklaration erfasst sein, zum Beispiel so:
a:hover {
color: red;
background-color: rgb(235,235,185);
-webkit-transition: color .25s
linear, background-color .15s linear
.1s;
transition: color .25s linear,
background-color .15s linear .1s;
}
Die einzelnen Übergänge werden durch Kommata getrennt. Würden Sie diese Übergänge in separaten Regeln erfassen, würde die nächste Regel die jeweils vorhergehende aufheben und der Browser würde jeweils nur die letzte Regel ausführen.
