Textbox mit 3D-Rand in "Schrägansicht"

[Andreas Pflug]

sofern du mit geringer "box-höhe" leben kannst, ist box-shadow ein versuch wert.

Interessant und an sich schöne Idee. Dieses Attribut kannte ich noch nicht, es scheint sich dabei um eine Neuerung in CSS3 zu handeln. Das Problem ist nur, dass dies für >50% der in Frage kommenden Webbrowser (IE...) noch nicht funktioniert. Weiterhin ist bei box-shadow der Rand zwar nach Wunsch diffus und/oder abgerundet aber nicht zweifarbig und 'schräg'.

Ich habe mir meinen Wunsch-Rand inzwischen zu Fuß zusammengebastelt - und zwar aus drei jeweils 10x10 Pixel großen GIFs sowie zwei langgestreckten <DIV>s mit einfarbigem Hintergrund. Das ganze funktioniert jetzt wie folgt:

  
.infobox {  
  position:      absolute;  
  background:    #eeeeee;  
  /* grauer Hintergrund zum Testen */  
}  
  
/* Ecke oben links */  
.e1_blue {  
  position: absolute;  
  background: url(images/edge1_blue.gif);  
  top:   0px;  
  left: -10px;  
  width: 10px;  
  height: 10px;  
}  
  
/* Ecke unten links */  
.e2_blue {  
  position: absolute;  
  background: url(images/edge2_blue.gif);  
  bottom: -10px;  
  left: -10px;  
  width: 10px;  
  height: 10px;  
}  
  
/* Ecke unten rechts */  
.e3_blue {  
  position: absolute;  
  background: url(images/edge3_blue.gif);  
  bottom: -10px;  
  right:  0px;  
  width: 10px;  
  height: 10px;  
}  
  
/* Kante links */  
.k1_blue {  
  position: absolute;  
  background: #0000ff;  
  
  /* Durch _gleichzeitige_ Angabe von top und bottom anstelle von height  
     erhält man einen Rand, der mit der Eltern-Box mitfließt,  
     dabei aber immer eine exakt um 2x10 Pixel geringere Höhe hat */  
  top: 10px;  
  left: -10px;  
  bottom: 0px;  
  width: 10px;  
}  
  
/* Kante unten */  
.k2_blue {  
  position: absolute;  
  background: #0000cc;  
  bottom: -10px;  
  left:   0px;  
  right: 10px;  
  height: 10px;  
}  

Im HTML-Code sieht das dann in etwa so aus:

  
  <div class="infobox" style="left: 10%; top: 15%; width: 35%;  ">  
    <p class="bold">Hier stehen Infos</p>  
    <div class="e1_blue"></div><div class="e2_blue"></div><div class="e3_blue"></div>  
    <div class="k1_blue"></div><div class="k2_blue"></div>  
  </div>  

D. h., man muss im HTML-Code in jede "infobox" per Copy&Paste diese zwei zusätzlichen Zeilen einfügen, was nicht wirklich elegant aber einigermaßen handhabbar ist. Falls jemand eine eine bessere Idee hat, bitte hier posten... ;-)

Damit sich der Rand jederzeit nahtlos an die Infobox anpasst (z. B. bei Änderung der Browserfenster-Größe), haben die Kanten-DIVs jeweils eine Breite bzw. Höhe von 100% minus 20 Pixel, was durch die spezielle Methode der Positionsangaben erzielt wird. Im IE habe ich das noch nicht getestet, ich hoffe, es funktioniert auch dort...

Viele Grüße

Andreas