Design

Farbverläufe und Masken

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

image.jpg

© Internet Magazin

Lineare Schatten zählen zu den am weitesten implementierten CSS3- Eigenschaften für kreative Textgestaltung; CSS3-Konturen sind dagegen derzeit noch Zukunftsmusik - auch wenn Webkit-Browser diese bereits erfolgreich rendern.

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.

Mehr zum Thema

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden Ergebnissen…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste einspannen.…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…