✔ Bildschatten erstellen

[stain]

Hallo,
kann ich mit HTML, CSS oder JS einen Bildschatten erstellen?
Würd mich über ne Antwort freuen !
Stephan

 

[Gumbo]

Studiere mal „Onion Skinned Drop Shadows with JavaScript“. Damit lassen sich die Schlagschatten dynamisch einbinden.

 

[stain]

...hat das was mit PHP zu tun? Denn das unterstützt der Server nicht. Könntest du mir vielleicht mal ein fertiges Script geben?
Das währe wirklich sehr nett !
Stephan

 

[Maik]

Auf der von Gumbo empfohlenen Seite findest du doch ein gebrauchsfertiges Javascript und das dazugehörige CSS-Stylesheet.

Und nein, die vorgestellte Technik hat nichts mit PHP zu tun

 

[Gumbo]

Das ist eigentlich gar nicht so schwer. Erst einmal musst du dir das „behavior.js“-Skript runterladen und einbinden:

<script type="text/javascript" src="behavior.js"></script>

Danach kommt die Implementierung:

Behaviour.register({
  '.dropshadow' : function(element) {
    var wrap1 = document.createElement("div");
    wrap1.setAttribute("class", "wrap1");
    var wrap2 = document.createElement("div");
    wrap2.setAttribute("class", "wrap2");
    var wrap3 = document.createElement("div");
    wrap3.setAttribute("class", "wrap3");
    var outerNode = element.parentNode;
    outerNode.insertBefore(wrap1, element);
    wrap1.appendChild(wrap2);
    wrap2.appendChild(wrap3);
    outerNode.removeChild(element);
    wrap3.appendChild(element);    
  }
});

Hierbei ist es egal, ob es als als zusätzliche Quelle referenziert oder direkt ins Dokument eingebunden wird. Nun nur noch das zusätzliche Stylesheet:

.wrap1, .wrap2, .wrap3 {
  display:inline-table;
  /* \*/display:block;/**/
}
.wrap1 {
  float: left;
  background:url(/files/shadow.gif) right bottom no-repeat;
}
.wrap2 {
  background:url(/files/corner_bl.gif) -4px 100% no-repeat;
}
.wrap3 {
  padding:0 16px 16px 0;
  background:url(/files/corner_tr.gif) 100% -4px no-repeat;
}
.wrap3 img {
  display:block;
  border:1px solid #ccc;
  border-color:#efefef #ccc #ccc #efefef;
}

Schlussendlich fehlen noch die Grafiken, die den Schlagschatten darstellen. Hierbei gibt unterschiedliche Grafiken für unterschiedliche Schlagschatten (siehe Schlagschatten-Galerie).

 

[stain]

Hi,
ich glaube, dass meine Geschreibe langsam anfängt zu stöhren. Dafür will ich mich auch ausdrücklich entschuldigen. Aber da ich mit CSS (oder was das auch immer sein soll) nicht besonders gut auskenne, währe es zum Abschluss sehr nett, wenn du mir noch einmal ein Beispiel in einem kompletten HTML-Dokument vorführen könntest.
Darüber würde ich mich wahnsinnig freuen!
Stephan

 

[Gumbo]

Ist das wirklich so kompliziert? Ich hab doch alles Nötige beschrieben.

<script type="text/javascript" src="http://bennolan.com/behaviour/behaviour.js"></script>
<script type="text/javascript"><!--
Behaviour.register({
	'.dropshadow' : function(element) {
		var wrap1 = document.createElement("div");
		wrap1.setAttribute("class", "wrap1");
		var wrap2 = document.createElement("div");
		wrap2.setAttribute("class", "wrap2");
		var wrap3 = document.createElement("div");
		wrap3.setAttribute("class", "wrap3");
		var outerNode = element.parentNode;
		outerNode.insertBefore(wrap1, element);
		wrap1.appendChild(wrap2);
		wrap2.appendChild(wrap3);
		outerNode.removeChild(element);
		wrap3.appendChild(element);    
	}
});
//--></script>
<style type="text/css">
.wrap1, .wrap2, .wrap3 {
	display: inline-table;
	/* \*/display: block;/**/
}
.wrap1 {
	float: left;
	background: url(http://www.ploughdeep.com/onionskin/images/shadows/v2/shadow.gif) right bottom no-repeat;
}
.wrap2 {
	background: url(http://www.ploughdeep.com/onionskin/images/shadows/v2/corner_bl.gif) -4px 100% no-repeat;
}
.wrap3 {
	padding: 0 6px 6px 0;
	background: url(http://www.ploughdeep.com/onionskin/images/shadows/v2/corner_tr.gif) 100% -4px no-repeat;
}
.wrap3 img {
	display: block;
}
</style>

…

<img src="http://www.ploughdeep.com/onionskin/images/ball.jpg" class="dropshadow">

 

[stain]

Herzlichen Dank!

Die Antwort ging aber schnell.

Stephan

 

[Maik]

Wenn deine Frage beantwortet und/oder das Problem gelöst ist, markiere bitte zukünftig solch "gelöste" Fälle auch als erledigt, indem du rechts vom "Antworten"-Button auf den "Status"-Button des Themas klickst.