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

[Andreas Pflug]

Hallo liebes Forum,

ich möchte auf einer Seite diverse mit CSS positionierte Textboxen platzieren, die einen 3D-Rand haben. Normalerweise geht das mit den border-Attributen ("outset" usw.) ja recht einfach. Der Haken: Ich möchte, dass die Textbox dreidimensional hervorsteht, als ob man schräg von unten-links draufgucken würde.

Um das ganze zu verdeutlichen, zweckentfremde ich mal einen Code-Block mit ASCII-Art:

  
     _______________  
   /|               |  
  | |               |  
  | |  Hier stehen  |  
  | | Informationen |  
  | |               |  
  | |_______________|  
  |/________________/  
  

Dazu habe ich folgendes ausprobiert:

  
.infobox {  
  position:      absolute;  
  background:    #ffffff;  
  border-top:    none;  
  border-right:  none;  
  border-bottom: 10px blue outset;  
  border-left:   10px blue outset;  
}  

Im HTML-Teil steht dann sowas wie

  
  <div class="infobox" style="left: 10%; top: 60%; width: 35%;">  
    <p class="bold">Hier stehen Informationen</p>  
  </div>  

An der unteren linken Ecke des Textbox sieht das jeweils gut aus. Am oberen und rechten Rand schneiden die Farbränder jedoch gerade mit der Textbox ab, so dass der 3D-Effekt verlorengeht. In ASCII-Art sähe das so aus:

  
   _________________  
  | |               |  
  | |               |  
  | |  Hier stehen  |  
  | | Informationen |  
  | |               |  
  | |_______________|  
  |/________________|  
  

Mit den anderen möglichen border-Attributen wird es auch nicht besser. Kann man eine 3D-Box in "Schrägansicht" überhaupt mit CSS-Mitteln erzeugen oder muss man sich dazu weiterer Tricks (Hintergrundgrafiken mit angeschrägten teiltransparenten Rändern, ...?) bedienen?

Viele Grüße

Andreas Pflug

[bleicher]

Grüße,
sofern du mit geringer "box-höhe" leben kannst, ist box-shadow ein versuch wert.
MFG
bleicher

[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

[Andreas Pflug]

Hallo,

ich reanimiere diesen Thread nochmal, da ich erst jetzt dazu gekommen bin, mir das ganze mal mit einem IE8 anzugucken. Das Ergebnis ist ziemlich desaströs: Die Eck-Grafiken erscheinen - aus welchen Gründen auch immer - doppelt untereinander; die Kantengrafiken erscheinen nur einmal bzw. werden nicht wiederholt (auch nicht, wenn man 'background-repeat: ...' verwendet).

Gibt es in meinem CSS-Code irgendwas, bei dem der IE bekanntermaßen abweicht? Für jegliche Tipps wäre ich dankbar.

Viele Grüße

Andreas

[apsel]

Om nah hoo pez nyeetz, Andreas Pflug!

Der erste verdächtige ist bei solchen Darstellungsfehlern immer der Quirksmodus. Mit F12 erreicht man die Entwicklertools, dort kann man erkennen, in welchem Modus der Browser arbeitet.

Matthias

[Andreas Pflug]

Hallo apsel,

Der erste verdächtige ist bei solchen Darstellungsfehlern immer der Quirksmodus.

Du hattest recht, vielen Dank für den Hinweis!

Mein "DOCTYPE"-Tag war veraltet; nach Umstellen auf "Standard"-Modus (Tante Google sei Dank...) sieht das Layout jetzt so aus wie bei den anderen Browsern. Den 'IE7'-Mode hatte ich auch mal getestet, hier stimmen immerhin die 3D-Ränder, nur die Schriften rutschen in den Boxen an den oberen linken Rand. Vermutlich handelt hierbei um die unterschiedliche Interpretation von IE vs. Rest bzgl. der Dimensionsangaben für Ränder und Inhalte. Im Vergleich zu dem Problem mit den 3D-Rändern ist das jedoch harmlos...

Viele Grüße

Andreas

[apsel]

Om nah hoo pez nyeetz, Andreas Pflug!

Den 'IE7'-Mode hatte ich auch mal getestet,...

Das lässt sich relativ leicht via CC beheben.

Matthias

[apsel]

Om nah hoo pez nyeetz, apsel!

Das lässt sich relativ leicht via CC beheben.

Quatsch (bzw. sicher nicht notwendig)

Im CSS können Anweisungen für IE 7 mit vorangestelltem "* + html" deklariert werden.

Matthias