Willkommen, Gast ( Anmelden | Registrierung )     [ Hilfe | Mitglieder | Suche ]

 
Reply to this topicStart new topic
> Farbverlauf per CSS
webmasterFF
Beitrag Fri. 28. March 2014, 17:45
Beitrag #1


Advanced Member
*******

Gruppe: AdvancedMembers
Beiträge: 282
Mitglied seit: 14.05.2009
Mitglieds-Nr.: 1.885



Hallo Cracks,

ich habe mal wieder eine Frage an die Erfahrenen Programmierer hier. Also: Ich habe mich das erste mal getraut mein Layout auf CSS-Basis zu erstellen und bin mit meinem CSS-Ergebnis recht zurfieden. Da ich Hobby-Designer bin, dürfte mein Ergebnis aus ausreichen... .

Trotzdem würde ich gerne ein DIV mit einem Farbverlauf versehen, und zwar von Weiß nach Transparent. Bislang habe ich nur eine funktionierende Lösung für den Firefox gefunden, möchte aber, wenn möglich, eine Browserübergreifende Lösung einbauen.

Hat dazu jemand einen Rat, der möglichst auch den IE ab Version 8 berücksichtigt?


Hier mal der Auszaug aus meinen CSS und das zugehörige DIV um das es geht:
QUELLTEXT
#topbar
{
    width:1000px;
    height:200px;}


--------------------
Es dankt und grüßt
webmaster FF

--------------------
Sefrengo v.1.6.0
ES LEBE SEFRENGO - denn du hast tausende von Möglichkeiten !!
Go to the top of the page
 
+Quote Post
webmasterFF
Beitrag Sun. 30. March 2014, 13:09
Beitrag #2


Advanced Member
*******

Gruppe: AdvancedMembers
Beiträge: 282
Mitglied seit: 14.05.2009
Mitglieds-Nr.: 1.885



Nachdem hier im Forum wieder deutlich zu viel Ruhe einkehrt, poste ich dann mal die Antwort aus einem anderen Forum und hoffe dazu beizutragen, hier wieder für mehr Leben zu sorgen...

QUELLTEXT
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );



Für ältere Browser muss ein Fallback mittels Bild vorgesehen werden... .


--------------------
Es dankt und grüßt
webmaster FF

--------------------
Sefrengo v.1.6.0
ES LEBE SEFRENGO - denn du hast tausende von Möglichkeiten !!
Go to the top of the page
 
+Quote Post
Skylab
Beitrag Mon. 31. March 2014, 08:14
Beitrag #3


Advanced Member
*****

Gruppe: Neustart-Moderator
Beiträge: 176
Mitglied seit: 03.02.2007
Mitglieds-Nr.: 625



Farbverlauf ohne Bild habe ich noch nie umgesetzt, muss ich gestehen.
Webmaster, wie ist die Darstellungsqualität, Performance des Seitenaufbaus und vor allem, wie sehen halbtransparente Flächen darüber aus (z index)??

Grüße, Sky

Go to the top of the page
 
+Quote Post
webmasterFF
Beitrag Mon. 31. March 2014, 17:48
Beitrag #4


Advanced Member
*******

Gruppe: AdvancedMembers
Beiträge: 282
Mitglied seit: 14.05.2009
Mitglieds-Nr.: 1.885



Schaut ganz ordentlich aus. Ich habe es jetzt mit folgender CSS-Mathode glöst:

QUELLTEXT
background: -moz-linear-gradient(bottom, rgba(255,255,255,1) 25%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear, left bottom, left top, color-stop(25%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(bottom, rgba(255,255,255,1) 25%,rgba(255,255,255,0) 100%);
background: -o-linear-gradient(bottom, rgba(255,255,255,1) 25%,rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(bottom, rgba(255,255,255,1) 25%,rgba(255,255,255,0) 100%);
background: linear-gradient(to top, rgba(255,255,255,1) 25%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );



Ist barrierefrei und browserübergreifend. Der Z-Index muss entsprechend angepasst werden, da sich der Farbverlauf mit Transparenz ja auf dem vorhandenen Hintergurnd (Bild oder Farbe des Body oder des dahinterliegenden DIV) entfalten soll.
Als Fallback kann man noch ein Bild für ganz alte Browserversionen einfügen - das habe ich jetzt mal gelassen.


--------------------
Es dankt und grüßt
webmaster FF

--------------------
Sefrengo v.1.6.0
ES LEBE SEFRENGO - denn du hast tausende von Möglichkeiten !!
Go to the top of the page
 
+Quote Post

Reply to this topicStart new topic
1 Besucher lesen dieses Thema (Gäste: 1 | Anonyme Besucher: 0)
0 Mitglieder:

 



RSS Vereinfachte Darstellung Aktuelles Datum: 19.7.19 - 11:44

Sefrengo ist ein eingetragenes Markenzeichen und urheberrechtlich geschützt.
Copyright 2009 Design & Daten, Alle Rechte vorbehalten.