✔ Div + Schlagschatten

Status
Nicht offen für weitere Antworten.
J

Jantz

Erfahrenes Mitglied
Hallo,

ich habe diesen Effekt schon öfters gesehen. Ich meine Folgendes.

http://www.aliengaming.de
http://www.team64.de

um nur einige Beispiele zu geben. Dort umgibt die "Content boxen" einen Auslaufenden Schatten.

Hab jetzt schon einiges Probiert aber habe keinen Lösungweg gefunden. Der Schatten 4 only IE möchte ich ungern verwenden.

Habt ihr eine Idee?

Gruß Jan
 
hallo,

ja die Variante kenne ich auch. Es ist jedoch nicht das, was ich mir vorstelle. Ich würde gerne einen Farbverlauf mit einbinden.

Hab solangsam das Gefühl, dass es so nicht mit css zu realisieren ist. Wäre schade wenn ich dafür extra wieder Grafiken anwenden müsste 8[

trotzdem danke!

gruß Jan
 
Ich beziehe mich auf die dritte Seite :
Also irgendwie habe ich damit noch Probleme, kann vielleicht jemand die css und die html posten, weil bei mir sieht das so aus:

CSS-Code
Code: 
body {margin-top: 0%; margin-left: 10%;}
.wrap1, .wrap2, .wrap3 {
display:inline-table;
/* \*/display:block;/**/
}
#wrap1 {
border: 10px;
float:left;
background:url(shadow.jpg) right-bottom no-repeat;
}
#wrap2 {
background:url(corner_bl.gif) left »
bottom no-repeat;
}
#wrap3 {
display:block;
padding:0 4px 4px 0;
background:url(corner_tr.gif) right »
top no-repeat;
}

Html-Code
Code: 
<html>
<head>
<title>Onion Test</title>
<meta name="author" content="Christian">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<div class="wrap1">
 <div class="wrap2">
  <div class="wrap3">
   <img src="menue.gif" alt="The object casting a shadow"/>
  </div>
 </div>
</div>
</body>
</html>
 
Zuletzt bearbeitet von einem Moderator:
Die doppelten spitzen Anführungszeichen (») sind als Symbol der selben Zeile aufzufassen. Es sind bloß stilistische Zeichen, um einen Zeilenumbruch einzusetzen. Sprich: Im tatsächlichen Quellcode sind sie fehl am Platze.
 
Okay, die habe schonmal entfernt, klappt danach trotzdem nicht so recht. Außerdem zeigt Firefox 0.8 die Sachen bis jetzt gar nicht an. Warum nur?

Code: 
body {margin-top: 0%; margin-left: 10%;}
.wrap1, .wrap2, .wrap3 {
display:inline-table;
/* \*/display:block;/**/
}
.wrap1 {
float:left;
background:url(shadow.jpg) right-bottom no-repeat;
}
.wrap2 {
background:url(corner_bl.gif) left-bottom no-repeat;
}
.wrap3 {
display:block;
padding:0 4px 4px 0;
background:url(corner_tr.gif) right-top no-repeat;
}
 
Zuletzt bearbeitet von einem Moderator:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück