User Tutorial zu CSS Styles & HTML im Forum
 

Kapitel 4 : Buttons mit Farbverlauf (nur IE)

Forum 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:


ohne Farbverlauf/Filtermit Farbverlauf/Filter

 
 
Zurürck zur CSS Tutorial Übersicht : CSS & HTML im Forum
 
 
Wettpoint ‹bersicht und Forum Index
Wetten Forum & allgemeine Diskussion
Wetten Sportwetten Tipps
Wettforum und Wett-Tipps Wettforum und Wett-Tipps
Archiv Archiv
Wetten Sport allgemein
Wetten Statistiken
Wetten Bonus Angebote & Vergleich
Fussball Fussball aktuell
Tennis Tennis aktuell
Eishockey Eishockey aktuell
Basketball Basketball aktuell
CSS Forum   Valid HTML 4.01 Transitional
Sportwetten Forum © 2011 Sportwetten Forum & Tipps Wettpoint.com