CSS Styles im Forum
Kapitel 4 : Buttons mit Farbverlauf - CSS Styles und HTML im Forum
Kapitel 3 : CSS & HTML im Forum
|
CSS Styles im Forum
Kapitel 4 : Buttons mit Farbverlauf - CSS Styles und HTML im Forum
|
|
|
| User Tutorial zu CSS Styles & HTML im Forum | ||||
Kapitel 4 : Buttons mit Farbverlauf (nur IE) Farbverlauf erzeugen (nur IE)
Ist einem der Button immernoch zu langweilig, kann man mit Hilfe von so gennanten Filtern einen interessanten Farbverlauf auf dem Button erzeugen. Beachten muss man hier jedoch, dass diese Filter nur im IE zu Verfügung stehen. Dies ist auch der Grund, warum diese Button Varianten so in unserem Forum nicht benutzt werden können, selbst für die Buttons der Sport Ergebnisse> oder z.B. dem Liveticker wäre das nicht sinnvoll. Auch wenn gestalterisch bestens geeignet sind aber die Browser Arten der User zu verschieden (viele Forum User oftmals nicht IE sondern andere Browser). Wir verwenden hier wieder die zuvor vorgestellen Css Varianten : a) Button Styles im Quelltext ein Attribut style hinzufügen b) Button Styles im Header-Bereich die Style-Anweisungen definieren c) im Header-Bereich die Style-Anweisungen definieren und zusätzlich die Stylesheeht-Klasse angeben Farb-Button Variante a) Hier wird der Style direkt im HTML-Element "button" festgelegt, weshalb dieser Style dann auch NUR FüR DAS ELEMENT gilt.
<button style="color : #005500;
background-color : #FFEEDD;
font-weight : bold;
font-family : 'Trebuchet MS', Arial, Helvetica, sans-serif;
border-width : 1px;
border-style : solid;
border-color : #005500;
filter : progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#115500',EndColorStr='#FFFF00')">
Sportwetten
</button>
Farb-Button Variante b) Hier wird der Style global festgelegt. Das "button" vor der geschweiften Klammer bedeutet, dass die eingeschlossenen Styles auf alle Elemente des Typs "button" angewendet werden.
<style type="text/css">
button
{
color : #005500;
background-color : #FFEEDD;
font-weight : bold;
font-family : 'Trebuchet MS', Arial, Helvetica, sans-serif;
border-width : 1px;
border-style : solid;
border-color : #005500;
filter : progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#115500',EndColorStr='#FFFF00')
}
</style>
Farb-Button Variante c) Hier wird der Style ebenfalls global festgelegt. Zudem wird hier mit dem Zeichen "." nach dem "button"-Element auf eine Stylesheet-Klasse referenziert. In unserem Beispiel wird also die Stylesheet-Klasse "test" verwendet --> "button.test". Nun können wir bei den Buttons, bei denen der Style angewendet werden soll, diese Stylesheet-Klasse auswählen, so dass auch nur diese Elemente entsprechend des Styles angepasst werden. Hat man also zwei oder mehrere Buttons auf seiner Seite, versieht man jeden Button, der den zuvor definierten Style anwenden soll mit dem attribut "class" und als Wert setzt man den Namen der zu verwendenen Stylesheet-Klasse.
<style type="text/css">
button.test
{
color : #005500;
background-color : #FFEEDD;
font-weight : bold;
font-family : 'Trebuchet MS', Arial, Helvetica, sans-serif;
border-width : 1px;
border-style : solid;
border-color : #005500;
filter : progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#115500',EndColorStr='#FFFF00')
}
</style>
Das dazugehörige "button"-Element zu unserem Beispiel sieht dann so aus:<button class="test">Sportwetten</button> Abschliessend ist festzustellen, das in einem Wettforum wie schon oben bemerkt diese, wenn auch hübsche Variante aufgrund der Browsereinschränkung nicht nutzbar ist. Die Button Variante ohne Filter Farbverlauf findet dagegen vom z.B. Fussball Forum über die Hilfe bis hin zu den Livescores usw. im Forum Anwendung. Alle Varianten des Buttons bewirken das folgende Ergebnis:
Zurürck zur CSS Tutorial Übersicht : CSS & HTML im Forum |
| Wettpoint Übersicht und Forum Index | ||
|---|---|---|
 Forum & allgemeine Diskussion Sportwetten Tipps Wettforum und Wett-Tipps
Archiv |
Sport allgemein Statistiken
Bonus Angebote & Vergleich |
 Fussball aktuell Tennis aktuell Eishockey aktuell
 Basketball aktuell |
 © 2010 Sportwetten Forum & Tipps Wettpoint.com |