Zurück   Flashforum > Alternative Technologien > HTML und CSS

Antwort
 
LinkBack Themen-Optionen Ansicht
Alt 31-10-2010, 20:16   #1 (permalink)
°
 
Benutzerbild von echo5-7
 
Registriert seit: Aug 2002
Ort: Baden-Baden
Beiträge: 4.330
Wie geht das?

Dmig 5

Ok, jetzt muss ich doch mal fragen. Wenn man scrollt, sieht man ja, dass das Headerbild fixed ist. Was mich aber irritiert ist dieser Maskeneffekt, der zustande kommt auch wenn man Javascript deaktiviert. Scroll ich nach unten, wird der Hintergrund anders.

Wie geht das denn. Hab ich da irgendwas verpasst? Das ist doch kein HTML5 sondern normales (richtig schlechtes) XHTML, oder?

Gruß
echo
__________________

LRRM | BLOG | FACEBOOK | TWITTER | G+ | INSTACANV.AS
echo5-7 ist gerade online   Mit Zitat antworten
Alt 31-10-2010, 20:41   #2 (permalink)
mod_rewrite
 
Benutzerbild von sonar
 
Registriert seit: Feb 2003
Ort: München
Beiträge: 15.750
Hab's mir jetzt nicht sooo genau angeschaut, aber das sind halt Spielereien mit z-index/position:fixed und so.

Und ja, das ist HTML 5.
__________________
RTFM
Wie man Fragen richtig stellt.

Money makes the world go round, fear makes it turn much faster.
(New Model Army)
sonar ist offline   Mit Zitat antworten
Alt 31-10-2010, 20:52   #3 (permalink)
°
 
Benutzerbild von echo5-7
 
Registriert seit: Aug 2002
Ort: Baden-Baden
Beiträge: 4.330
hm, selbst wenn ich das mit dem z-index berücksichtige seh ich nicht wie das funktionieren könnte. hat html5 masken mit drin?
__________________

LRRM | BLOG | FACEBOOK | TWITTER | G+ | INSTACANV.AS
echo5-7 ist gerade online   Mit Zitat antworten
Alt 31-10-2010, 21:17   #4 (permalink)
Inventar
 
Benutzerbild von Nightflyer
 
Registriert seit: Jul 2002
Beiträge: 7.031
Zitat:
Zitat von echo5-7 Beitrag anzeigen
hm, selbst wenn ich das mit dem z-index berücksichtige seh ich nicht wie das funktionieren könnte. hat html5 masken mit drin?
Das sind ganz einfach nur PNG's mit Transparenzkanal
http://www.designmadeingermany.de/ma...cover-illu.png
__________________
(\__/)
(='.'=)
(")_(")
Nightflyer ist offline   Mit Zitat antworten
Alt 31-10-2010, 21:27   #5 (permalink)
mod_rewrite
 
Benutzerbild von sonar
 
Registriert seit: Feb 2003
Ort: München
Beiträge: 15.750
Oh ja, Masken …
Schnell mal zusammengetackert: Your Titel Goes Here
__________________
RTFM
Wie man Fragen richtig stellt.

Money makes the world go round, fear makes it turn much faster.
(New Model Army)
sonar ist offline   Mit Zitat antworten
Alt 31-10-2010, 21:35   #6 (permalink)
°
 
Benutzerbild von echo5-7
 
Registriert seit: Aug 2002
Ort: Baden-Baden
Beiträge: 4.330
ja, das seh ich auch. was mich irritiert, ist der erste schwarze block, da wo "einleitung" steht. hinter diesem block ist ein weiteres bild. dieses wird erst mit dem scrollen aufgedeckt, bleibt aber dann bestehen. ich versteh nicht, wie das erst mit dem scrollen aufgedeckt werden kann. ich habs grade probiert mit nem div (fixed) in einem anderem div mit overflow hidden. hat aber nicht funktioniert.
__________________

LRRM | BLOG | FACEBOOK | TWITTER | G+ | INSTACANV.AS
echo5-7 ist gerade online   Mit Zitat antworten
Alt 31-10-2010, 21:49   #7 (permalink)
Neuer User
 
Benutzerbild von :: RK ::
 
Registriert seit: Jan 2002
Beiträge: 5.445
Das ist doch stink normales XHTML + CSS. Wozu braucht man denn da HTML5
geschweige denn Javascript oder irgendwelche Maskeneffekte? Das kannst du
doch mit z-index lösen, sonar war ja so fix und liefert dir sogar n beispiel .

PS: der Threadtitel ist nicht sehr vorbildlich gewählt
__________________
Das Glück im Leben hängt von den guten Gedanken ab, die man hat.

Easing_Equations / Flash Kontaktformular / FlashPlugin W3C konform / Nützliche Beiträge zu FAQs
:: RK :: ist offline   Mit Zitat antworten
Alt 31-10-2010, 22:00   #8 (permalink)
°
 
Benutzerbild von echo5-7
 
Registriert seit: Aug 2002
Ort: Baden-Baden
Beiträge: 4.330
jungs, mich interessiert nicht der aufmacher mit der schrift. ich weiß auch das ich das mit ner png und z-index machen kann.

nochmal:
warum deckt der einleitungsblock ein anderes hintergrundbild auf?

aufgemalt was ich meine
__________________

LRRM | BLOG | FACEBOOK | TWITTER | G+ | INSTACANV.AS
echo5-7 ist gerade online   Mit Zitat antworten
Alt 31-10-2010, 22:31   #9 (permalink)
Inventar
 
Benutzerbild von Nightflyer
 
Registriert seit: Jul 2002
Beiträge: 7.031
Ich hab sonars Beispiel etwas erweitert:
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Your Titel Goes Here</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="Describe me a sheep" />
<meta name="robots" content="index,follow" />

<meta name="generator" content="Eclipse and lots of coffee" />

<style type="text/css" media="screen">
/* <![CDATA[ */
body {
	height		:	1000px;
	padding-top	:	100px;
	width		:	100%;
}

#bg {
	width		:	600px;
	height		:	600px;
	position	:	absolute;
	left		:	250px;
	z-index		:	10;
	background	:	url(http://ff.gisht.com/dmig/img/cover-dmig.png) center center no-repeat;
}

#mg {
	width		:	800px;
	height		:	900px;
	z-index		:	20;
	position	:	fixed;
	left		:	200px;
	top			:	0;
	background	:	url(http://ff.gisht.com/dmig/img/cover-illu.png);
}

#fg {
	width		:	600px;
	height		:	600px;
	position	:	absolute;
	left		:	300px;
	z-index		:	30;
	background	:	url(http://ff.gisht.com/dmig/img/cover-5.png) center center no-repeat;
}
#new {
	width		:	600px;
	height		:	600px;
	position	:	absolute;
	left		:	300px;
	top			: 	600px;
	z-index		:	30;
	background	:	url(http://www.designmadeingermany.de/magazin/wp-content/themes/5/ordnung.png) center bottom no-repeat;
	background-attachment:fixed
}
/* ]]> */
</style>

<script type="text/javascript">
/* <![CDATA[ */
/* ]]> */
</script>
</head>

<body id="body">
	<div id="bg"></div>
	<div id="mg"></div>
	<div id="fg"></div>
	<div id="new"></div>
</body>
</html>
Sieht zwar nicht toll aus, ist aber der gewünschte Effekt. Das neue div hat schlichtweg die Eigenschaft "background-attachment:fixed" und ist bottom-Ausgerichtet
__________________
(\__/)
(='.'=)
(")_(")
Nightflyer ist offline   Mit Zitat antworten
Alt 01-11-2010, 08:04   #10 (permalink)
°
 
Benutzerbild von echo5-7
 
Registriert seit: Aug 2002
Ort: Baden-Baden
Beiträge: 4.330
Zitat:
Zitat von Nightflyer Beitrag anzeigen
Ich hab sonars Beispiel etwas erweitert:
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Your Titel Goes Here</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="Describe me a sheep" />
<meta name="robots" content="index,follow" />

<meta name="generator" content="Eclipse and lots of coffee" />

<style type="text/css" media="screen">
/* <![CDATA[ */
body {
	height		:	1000px;
	padding-top	:	100px;
	width		:	100%;
}

#bg {
	width		:	600px;
	height		:	600px;
	position	:	absolute;
	left		:	250px;
	z-index		:	10;
	background	:	url(http://ff.gisht.com/dmig/img/cover-dmig.png) center center no-repeat;
}

#mg {
	width		:	800px;
	height		:	900px;
	z-index		:	20;
	position	:	fixed;
	left		:	200px;
	top			:	0;
	background	:	url(http://ff.gisht.com/dmig/img/cover-illu.png);
}

#fg {
	width		:	600px;
	height		:	600px;
	position	:	absolute;
	left		:	300px;
	z-index		:	30;
	background	:	url(http://ff.gisht.com/dmig/img/cover-5.png) center center no-repeat;
}
#new {
	width		:	600px;
	height		:	600px;
	position	:	absolute;
	left		:	300px;
	top			: 	600px;
	z-index		:	30;
	background	:	url(http://www.designmadeingermany.de/magazin/wp-content/themes/5/ordnung.png) center bottom no-repeat;
	background-attachment:fixed
}
/* ]]> */
</style>

<script type="text/javascript">
/* <![CDATA[ */
/* ]]> */
</script>
</head>

<body id="body">
	<div id="bg"></div>
	<div id="mg"></div>
	<div id="fg"></div>
	<div id="new"></div>
</body>
</html>
Sieht zwar nicht toll aus, ist aber der gewünschte Effekt. Das neue div hat schlichtweg die Eigenschaft "background-attachment:fixed" und ist bottom-Ausgerichtet
ich fass es nich, ich hab was gelernt. ich kannte das "background-attachment" gar nicht.... krass. da ergeben sich ja echt mal neue möglichkeiten... coool danke!
__________________

LRRM | BLOG | FACEBOOK | TWITTER | G+ | INSTACANV.AS
echo5-7 ist gerade online   Mit Zitat antworten
Alt 01-11-2010, 13:13   #11 (permalink)
Neuer User
 
Registriert seit: Nov 2010
Beiträge: 1
Wurd jetzt zwar schon beantwortet, aber hier vielleicht noch der Blogpost dazu: Der Backgroundtrick
Martin Rack ist offline   Mit Zitat antworten
Alt 01-11-2010, 14:06   #12 (permalink)
°
 
Benutzerbild von echo5-7
 
Registriert seit: Aug 2002
Ort: Baden-Baden
Beiträge: 4.330
klasse! danke! wer lesen kann ist klar im vorteil
__________________

LRRM | BLOG | FACEBOOK | TWITTER | G+ | INSTACANV.AS
echo5-7 ist gerade online   Mit Zitat antworten
Antwort

Lesezeichen

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks sind an
Pingbacks sind an
Refbacks sind an


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Stagesize runtime beeinflussen; geht´s oder geht´s nicht? A_D Flash CS3 Professional 10 13-12-2008 11:42
mc._alpha=0> geht, mc._visible=false geht nicht – warum nur? hossa-hossa Flash Einsteiger 2 18-03-2008 13:27
verlinkung mit loadMovie geht irgendwie ned! bitte helfen wenns geht! la-nightlife.de Flash Einsteiger 2 24-10-2006 14:36
load.Movie problem - 1x geht 1x geht nicht? thejumpingflame Flash MX 2004 4 29-09-2005 18:21
js-popup + Variable mit Umlauten = geht/geht nicht reifue HTML und CSS 4 19-12-2003 13:35


Alle Zeitangaben in WEZ +1. Es ist jetzt 14:29 Uhr.

Domains, Webhosting & Vserver von Host Europe
Unterstützt das Flashforum!
Adobe User Group


Copyright ©1999 – 2014 Marc Thiele