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

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
Film Amazon Prime Instant Video Warner Bros Emily Browning
Vorschau auf Film- und Serien-Highlights

Prime Instant Video lockt im Oktober mit Highlights wie "Sucker Punch", "Fifty Shades of Grey", "Spotlight" und der zweiten Staffel von "Ash vs. Evil…