CSS3 Verlauf mit Fallback

berti · 03.10.2011, 18:00

Hallo,

ich will mittel CSS3 Background-Gradients einem Container einen Verlauf verpassen. Da nur neuere Browser die Sache unterstützen muss es eine Fallback-Lösung geben.

Code:

#breadcrumb {

	font-size: 11px;
	line-height: 26px;
/*	font: 11px/26px Helvetica, Arial, sans-serif;*/

	background: url('gradients.png') repeat-x 0 -112px #c6c6c6; /* Fallback */
	background-image: -webkit-gradient(linear, left top, left bottom, from(#c6c6c6), to(#eaeaea));
	background-image: -webkit-linear-gradient(top, #c6c6c6, #eaeaea);
	background-image: -moz-linear-gradient(top, #c6c6c6, #eaeaea);
	background-image: -o-linear-gradient(top, #c6c6c6, #eaeaea);
	background-image: -ms-linear-gradient(top, #c6c6c6, #eaeaea);
	background-image: linear-gradient(top, #c6c6c6, #eaeaea);

	height: 26px;

}

Leider macht mir die Fallback-Lösung noch ein paar Probleme. Ich habe alle Verläufe in einem Bild zusammengefasst und so muss ich dem Bild eine Hintergrund-Position als Bezugspunkt geben. Das Fallback alleine arbeitet einwandfrei. Leider wenden sich die Fabre, die Position und die Wiederholung auch auf die nachfolgenden CSS3 Verläufe an...

Das Ergebnis von Firebug sieht so aus:

Code:

#breadcrumb {
    background: -moz-linear-gradient(center top , #C6C6C6, #EAEAEA) repeat-x scroll 0 -112px #C6C6C6;
    font-size: 11px;
    height: 26px;
    line-height: 26px;
}

Das Ergebnis im Firefox ist ein grauer Kasten ohne Verlauf.

p4w3L · 05.10.2011, 10:04

Es ist klar, dass es nicht funktioniert.
Du setzt ein Hintergrundbild und genau darunter setzt du ein neues "Bild" für den Hintergrund. D.h. das erste wird überschrieben...

Du könntest mal Probieren mit zwei Elementen zu arbeiten.
Ich habe da an folgendes gedacht:

HTML-Code:

<div id="fallback">
	<div id="breadcrumb ">
		<!-- dein Inhalt -->
	</div>
</div>

auf #breadcrumb setzt du mit css3 den verlauf und auf #fallback setzt du das Hintergrundbild. Du musst aber darauf achten, dass die div's die gleiche höhe und breite haben, so dass sie sich überlagern.
Ich hoffe du konntest nachvollziehen, was ich damit gemeint habe.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Email Verwaltung Software - Verlauf usw..	PHP-Job	Off-Topic Diskussionen	1	27.07.2011 14:51
CSS - Hintergrundbild oben beschneiden	luks2com	HTML, Usability und Barrierefreiheit	6	09.09.2010 21:00
HTML5 + CSS3 schon jetzt ?	drsoong	Off-Topic Diskussionen	20	17.06.2010 08:17
automatische fallback bei sessions ohne cookies auf GET		PHP Tipps 2005	3	27.06.2009 08:18
Verlauf in Bild	dh1sbg	PHP Tipps 2006	2	15.09.2006 09:56
[Erledigt] CSS Verlauf + 100% Hintergrund		HTML, Usability und Barrierefreiheit	8	03.01.2006 16:27
AGBs anerkennen - checkbox kontrolliert verlauf		PHP Tipps 2005	5	20.01.2005 20:24
AGBs anerkennen - checkbox kontrolliert verlauf		HTML, Usability und Barrierefreiheit	2	20.01.2005 18:09
Session-IDs mit session.use_trans_sid als Fallback		PHP-Fortgeschrittene	5	17.10.2004 17:11
verlauf löschen		PHP Tipps 2004	3	29.09.2004 18:33

03.10.2011, 18:00
berti Benutzer Registriert seit: 21.02.2010 Beiträge: 31 PHP-Kenntnisse: Anfänger	CSS3 Verlauf mit Fallback Hallo, ich will mittel CSS3 Background-Gradients einem Container einen Verlauf verpassen. Da nur neuere Browser die Sache unterstützen muss es eine Fallback-Lösung geben. Code: #breadcrumb { font-size: 11px; line-height: 26px; /* font: 11px/26px Helvetica, Arial, sans-serif;/ background: url('gradients.png') repeat-x 0 -112px #c6c6c6; / Fallback */ background-image: -webkit-gradient(linear, left top, left bottom, from(#c6c6c6), to(#eaeaea)); background-image: -webkit-linear-gradient(top, #c6c6c6, #eaeaea); background-image: -moz-linear-gradient(top, #c6c6c6, #eaeaea); background-image: -o-linear-gradient(top, #c6c6c6, #eaeaea); background-image: -ms-linear-gradient(top, #c6c6c6, #eaeaea); background-image: linear-gradient(top, #c6c6c6, #eaeaea); height: 26px; } Leider macht mir die Fallback-Lösung noch ein paar Probleme. Ich habe alle Verläufe in einem Bild zusammengefasst und so muss ich dem Bild eine Hintergrund-Position als Bezugspunkt geben. Das Fallback alleine arbeitet einwandfrei. Leider wenden sich die Fabre, die Position und die Wiederholung auch auf die nachfolgenden CSS3 Verläufe an... Das Ergebnis von Firebug sieht so aus: Code: #breadcrumb { background: -moz-linear-gradient(center top , #C6C6C6, #EAEAEA) repeat-x scroll 0 -112px #C6C6C6; font-size: 11px; height: 26px; line-height: 26px; } Das Ergebnis im Firefox ist ein grauer Kasten ohne Verlauf.


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

05.10.2011, 10:04
p4w3L Neuer Benutzer Registriert seit: 05.10.2011 Beiträge: 5 PHP-Kenntnisse: Fortgeschritten	Es ist klar, dass es nicht funktioniert. Du setzt ein Hintergrundbild und genau darunter setzt du ein neues "Bild" für den Hintergrund. D.h. das erste wird überschrieben... Du könntest mal Probieren mit zwei Elementen zu arbeiten. Ich habe da an folgendes gedacht: HTML-Code: <div id="fallback"> <div id="breadcrumb "> <!-- dein Inhalt --> </div> </div> auf #breadcrumb setzt du mit css3 den verlauf und auf #fallback setzt du das Hintergrundbild. Du musst aber darauf achten, dass die div's die gleiche höhe und breite haben, so dass sie sich überlagern. Ich hoffe du konntest nachvollziehen, was ich damit gemeint habe.