3D Buttons

[Malte Kiefer]

Hi,

Ich würde auf meiner Webseite gerne 3D Buttons verwenden.

Ich will sie mit CSS machen. Ich habe es schon versucht mit verschiedenen Klassen, bekomme es aber nicht hin. Könntet ihr mir vielleicht den Code auich dann schreiben.

Danke

Malte Kiefer

[Cheatah]

Hi,

Ich würde auf meiner Webseite gerne 3D Buttons verwenden.

wie definierst Du dies?

Ich will sie mit CSS machen.

Das ist gut, im Sinne von "alles andere ist schlecht" :-)

Ich habe es schon versucht mit verschiedenen Klassen,

Was haben Klassen damit zu tun?

bekomme es aber nicht hin.

Was hast Du versucht, woran ist es gescheitert?

Könntet ihr mir vielleicht den Code auich dann schreiben.

Nein, aber wir können Dir helfen, ihn selbst zu schreiben.

Cheatah

[Zeromancer]

Hallo Malte,

Ich will sie mit CSS machen. Ich habe es schon versucht mit verschiedenen Klassen, bekomme es aber nicht hin.

wie sieht denn dein bisheriger Code aus? Du könntest doch die Buttons mittels unterschiedlicher border-Angaben formatieren?!

  
button.drei_d {  
  border-top:1px solid #000;  
  border-right:1px solid #eee;  
  border-bottom:1px solid #eee;  
  border-left:1px solid #000;  
}  

Mit freundlichen Grüßen

André

[Ashura]

Hallo Zeromancer.

button.drei_d {
  border-top:1px solid #000;
  border-right:1px solid #eee;
  border-bottom:1px solid #eee;
  border-left:1px solid #000;
}

  
Hm... Warum so umständlich?  
Ein einfaches  
  
`border:1px outset #000;`{:.language-css}  
  
bzw.  
  
`border:1px inset #000;`{:.language-css}  
  
genügt doch vollkommen.  
  
  
Gruß, Ashura  

-- 
Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:| ls:[ js:|  
Try it: [Become an Opera Lover in 30 days](http://tntluoma.com/opera/lover/7/)

[Zeromancer]

Hallo Ashura,

button.drei_d {
  border-top:1px solid #000;
  border-right:1px solid #eee;
  border-bottom:1px solid #eee;
  border-left:1px solid #000;
}

>   
> Hm... Warum so umständlich?  
> Ein einfaches  
>   
> `border:1px outset #000;`{:.language-css}  
>   
> bzw.  
>   
> `border:1px inset #000;`{:.language-css}  
>   
> genügt doch vollkommen.  
  
da sage ich mal: "Kommt drauf an". ;-) Wenn ich <http://de.selfhtml.org/css/eigenschaften/anzeige/border_style.htm> richtig deute, bekomme ich bei "outset" und "inset" jeweils drei-dimensionale Rahmen, die in meiner Version nicht so sind. Habe das mal bei [www.1ngo.de](http://www.1ngo.de/web/imenu.html) gesehen. Richtig zur Geltung kommt es allerdings erst, wenn man mit Pseudo-Klassen und unterschiedlichen Farb-Kombinationen arbeitet.  
  
Mit freundlichen Grüßen  
  
André

[Ashura]

Hallo Zeromancer.

da sage ich mal: "Kommt drauf an". ;-) Wenn ich http://de.selfhtml.org/css/eigenschaften/anzeige/border_style.htm richtig deute, bekomme ich bei "outset" und "inset" jeweils drei-dimensionale Rahmen, die in meiner Version nicht so sind.

Nanu? Inset erzeugt jeweils schwarze Linie für obere und linke Seite und helle Linie für untere und rechte Seite.

Bei deinem Beispiel ist es doch genau so?

Richtig zur Geltung kommt es allerdings erst, wenn man mit Pseudo-Klassen und unterschiedlichen Farb-Kombinationen arbeitet.

Es ist nicht erforderlich, gibt aber einen netten Effekt. ;)

Gruß, Ashura

[Zeromancer]

Hallo Ashura,

Nanu? Inset erzeugt jeweils schwarze Linie für obere und linke Seite und helle Linie für untere und rechte Seite.

mmmmh, ich habe hier einen IE 6.0 auf Win 2000 und der zaubert mir bei der Ansicht von http://de.selfhtml.org/css/eigenschaften/anzeige/border_style.htm und "inset/ouset" keine Rahmen, die "solid" ähnlich sehen.

Inset/outset liefern jeweils drei-dimensionale Rahmen für jede Seite. Wenn man den Button jedoch in die dritte Dimension verschieben möchte, macht sich mein Beispiel eventuell besser?! ;-)

Aber ist ja wurscht. Wir haben Lösungsmöglichlkeiten aufgezeigt. Das allein zählt!

Mit freundlichen Grüßen

André

[Ashura]

Hallo Zeromancer.

mmmmh, ich habe hier einen IE 6.0 auf Win 2000 und der zaubert mir bei der Ansicht von http://de.selfhtml.org/css/eigenschaften/anzeige/border_style.htm und "inset/ouset" keine Rahmen, die "solid" ähnlich sehen.

Das ist ja putzig. Der IE glaubt "ridge" wäre auch gleich die Standard-Anzeige für "inset" und "outset".

Ich danke dir, dass du mich auf einen weiteren Bug des IE hingewiesen hast. ;)

Inset/outset liefern jeweils drei-dimensionale Rahmen für jede Seite.

Kommt auf den Browser an.

Wenn man den Button jedoch in die dritte Dimension verschieben möchte, macht sich mein Beispiel eventuell besser?! ;-)

Um es auch im IE richtig darstellen zu lassen, ja. ;)

Aber ist ja wurscht. Wir haben Lösungsmöglichlkeiten aufgezeigt. Das allein zählt!

Vollkommmenes Einverständnis meinerseits.

Gruß, Ashura

[Zeromancer]

Hallo Ashura,

Vollkommmenes Einverständnis meinerseits.

wie immer ein Vegnügen mit dir zu plaudern. ;-)

Mit freundlichen Grüßen

André

[Detlef G.]

Hallo André

button.drei_d {
  border-top:1px solid #000;
  border-right:1px solid #eee;
  border-bottom:1px solid #eee;
  border-left:1px solid #000;
}

  
Auf Unterstriche in Klassennamen würde ich verzichten.  
Und, warum nicht etwas kürzer?  
  
~~~css
  
.button3D {  
  border:1px solid;  
  border-color:#000 #eee #eee #000;  
}  

Auf Wiederlesen
Detlef