3D-Box ohne before + after

[Florian]

Hallo!

Ich bin gerade dabei, eine div-Box zu erstellen, die einen Schatten nach links unten wirft. Es soll kein Schlagschatten sein, sondern eine richtige 3D-Box.

.box {
height:300px;
width:300px;
background-color:#FFFFFF;
border-left: 10px solid #A8A8A8;
border-bottom: 10px solid #747474;
border-top: 1px solid #c9c9c9;
border-right: 1px solid #c9c9c9;
}

Damit schaffe ich links unten schon den richtigen Effekt. Allerdings müsste die Kante links oben und rechts unten noch abgeflacht werden, sodass eine Box darauf wird.
Es gibt ja die Möglichkeit, dort mit before und after Bilder einzufügen. Allerdings habe ich gelesen, dass dies nicht mit dem IE kompatibel ist. Gibt es vielleicht eine andere Möglichkeit?

Danke für eure Hilfe!

[Benjamin Buxbaum]

Hi!

Eventuell hilft dir folgender Artikel weiter:
http://aktuell.de.selfhtml.org/artikel/css/runde_ecken/index.htm

mfG

[Florian]

Hi!

Eventuell hilft dir folgender Artikel weiter:
http://aktuell.de.selfhtml.org/artikel/css/runde_ecken/index.htm

mfG

das ist leider noch nicht das richtige. es müsste eine möglichkeit geben, ein bild-overlay über bestimmte bereiche meines divs zu machen. also die ecken links oben und rechts unten...

[chris]

Hi!

Eventuell hilft dir folgender Artikel weiter:
http://aktuell.de.selfhtml.org/artikel/css/runde_ecken/index.htm

mfG

das ist leider noch nicht das richtige. es müsste eine möglichkeit geben, ein bild-overlay über bestimmte bereiche meines divs zu machen. also die ecken links oben und rechts unten...

moin

kuck mal hier: http://il.0o-o0-li

ich hab mal sowas gebastelt, ist nicht fertig, hab da bei den grafiken was verpatzt. aber damit müsste dein problem lösbar sein.

gruss

[Florian]

Hi!

Eventuell hilft dir folgender Artikel weiter:
http://aktuell.de.selfhtml.org/artikel/css/runde_ecken/index.htm

mfG

das ist leider noch nicht das richtige. es müsste eine möglichkeit geben, ein bild-overlay über bestimmte bereiche meines divs zu machen. also die ecken links oben und rechts unten...

moin

kuck mal hier: http://il.0o-o0-li

ich hab mal sowas gebastelt, ist nicht fertig, hab da bei den grafiken was verpatzt. aber damit müsste dein problem lösbar sein.

gruss

hallo! danke für deine nachricht. ich habe meiner box ja borders gegeben, unten und links dicke, oben und rechts dünne. deine variante funktioniert leider nicht, weil ich nichts über die border-grenzen hinaus schieben kann... zumindest habe ich das nicht hinbekommen?! am liebsten wäre mir eine variante, wo alles in CSS passiert und ich keine zusätzlichen divs erstellen muss, weil das ganze nachher dynamisch passieren soll...

[Hopsel]

Hi Florian!

das ist leider noch nicht das richtige.

Niemand hindert dich daran, andere Hintergrundbilder einzusetzen. Für deinen Fall genügen m.E. sogar nur zwei.

MfG H☼psel

[Detlef G.]

Hallo Florian

Damit schaffe ich links unten schon den richtigen Effekt. Allerdings müsste die Kante links oben und rechts unten noch abgeflacht werden, sodass eine Box darauf wird.

.box {  
position:relative;  
height:300px;  
width:300px;  
background-color:#FFFFFF;  
border-left: 10px solid #A8A8A8;  
border-bottom: 10px solid #747474;  
border-top: 1px solid #c9c9c9;  
border-right: 1px solid #c9c9c9;  
}  
.box .lo, .box .ru {  
display:block;  
height:0px;  
width:0px;  
overflow:hidden;  
position:absolute;  
}  
.box .lo {  
border-bottom: 10px solid #a8a8a8;  
border-left: 10px solid #fff;  
top:-1px;  
left:-10px;  
}  
.box .ru {  
border-right: 10px solid #fff;  
border-top: 10px solid #747474;  
right:-1px;  
bottom:-10px;  
}  

   <div class="box">  
     <span class="lo"></span><span class="ru"></span>  
   </div>  

Dürfte zumindest in einigermaßen standardkonformen Browsern funktionieren, sowie im IE 6 im Standardmodus.

Auf Wiederlesen
Detlef