heinetz: Border mit abgerundeten Ecken und Verlauf

SELF-Forum

Border mit abgerundeten Ecken und Verlauf

heinetz
– Informationen zu den Bewertungsregeln

Hallo Forum,

ich muss ein Layout umsetzen, in dem verschiedene Elemente
mit einem nicht ganz einfach umzusetzenden Rahmen versehen
sind.

http://herrhein.com/public/Screen001.jpg

1. abgerundete Ecken
2. Verlauf

Nun stellt sich die Frage, ob sich das mit CSS befriedigend
bewerkstelligen lässt oder ob es einfacher ist, auf Bilder
auszuweichen, in denen der Rahmen schon enthalten ist.

1. Verlauf

gibt es eine vernünftige Möglichkeit (ohne den Code arg
aufzublasen), dass mit CSS umzusetzen, oder lässt sich
das am besten mit Kacheln machen?

2. abgerundete Ecken

weiss dazu jemand eine schöne Lösung (statt 4Grafiken für die Ecken)?

Danke für eure Tipps und

beste gruesse,
heinetz

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Border mit abgerundeten Ecken und Verlauf

    Mathetyp
    – Informationen zu den Bewertungsregeln
    1. abgerundete Ecken

    weiss dazu jemand eine schöne Lösung (statt 4Grafiken für die Ecken)?

    Es gibt dafür eine Lösung, die allerdings nur in Mozilla-basierten Browsern funktioniert:

      
div {  
  -moz-border-radius: 25px;  
}

    Also doch auf die Bildervariante ausweichen, oder alle von Firefox überzeugen.

    MfG Mathetyp

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Border mit abgerundeten Ecken und Verlauf

    Thomas Luethi Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Nun stellt sich die Frage, ob sich das mit CSS befriedigend
    bewerkstelligen lässt oder ob es einfacher ist, auf Bilder
    auszuweichen, in denen der Rahmen schon enthalten ist.

    Ich empfehle: Mach fertige Bilder inklusive dem "hübschen Rahmen".

    Mit aktuellem CSS (2.0/2.1) und einer langen DIV-Suppe gibt es
    z.B. die "Sliding Doors" Lösung:
    http://www.css-technik.de/2003/11/19/runde-und-andere-ecken-mit-sliding-doors/

    Mit CSS 3 (das seit Jahren in Entwicklung ist und
    somit - nach der definitiven Veröffentlichung als
    Standard - frühestens in einigen Jahren in einer
    Mehrzahl der Browser unterstützt sein wird) sollen
    dann auch runde Ecken (wie das -moz-border-radius
    Mathetyp genannt hat, dann als border-radius) und
    individuelle Rahmenbilder möglich sein, siehe:
    http://www.w3.org/TR/css3-background/#the-border-image
    Aber das ist wie gesagt Zukunftsmusik.

    HTH, mfg
    Thomas

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Border mit abgerundeten Ecken und Verlauf

      heinetz
      – Informationen zu den Bewertungsregeln

      Hi,

      vielen Dank erstmal !

      Dann ist die Antwort klar:

      Nach Möglichkeit drauf verzichten (ganz drum herum werde ich nicht kommen).

      Die Sliding-Doors- und andere Lösungen habe ich mittlerweile auch gefunden.
      Bei sollchen CSS-Tricks fällt es mir nur immer schwer, klar zu stellen,
      welches der beste Ansatz ist.

      beste gruesse,
      heinetz

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln