29. December 2006, 23:36, by Silvan Mühlemann

Rounded Corners mit CSS und JavaScript

Rounded CornerSchon seit dem Beginn im 2000 verwendet tilllate gerundete Ecken als Design-Element. Doch wie kriegt man diese mit elegant hin? Ein Vergleich der Techniken.

Methode 2000: Ich hatte keine grosse Ahnung von HTML und arbeitete noch mit <font>-Tags. *tschudder*. Mein Trick, um die runden Ecken hinzukriegen war trivial:

Rounded Corners v2000

Die runden Ecken waren im Hintergrundbild drin. Mit Hilfe von unsichtbaren Tabellen wurde der Inhalt dann pixelgenau über dem Hintergrundbild platziert. Unflexibel und unelegant. Jede Aenderung am Design bedurfte ein erneutes Erzeugen des Hintegrundbildes.

Methode 2003

Dieses Verfahren ist jetzt noch auf tilllate zu finden: Ueber halsbrecherische Tabellenkonstrukte baue ich den Rahmen aus 8 verschiedenen Bildern zusammen:

Rounded Corners Method 2003

Diese Tabelle erzeugen wir mittels einer Helper-Funktion:

echo tl_getTemplateBox(“the content of the table”,130,43,true,true);

Das Ergebnis sind flexible Rahmen (so genannt “liquid”), welche in jedem Browser korrekt angezeigt werden. Aber damit ist schon fertig mit den Vorteilen. Der Code ist schwer, lang, unleserlich, erzeugt 8 teure HTTP-Requests, ist semantisch falsch (Inhalt und Darstellung ist nicht getrennt). Kurz: Ich möchte diese Methode so schnell wie möglich loswerden.

Methode 2007

Für unser neuestes, (noch geheimes) Projekt habe ich nach einer neuen Methode gesucht, welche die genannten Nachteile nicht hat. Die Methode soll folgendes erfüllen:

  • flexible Dimensionen
  • bisherige Rahmenelemente wiederverwendbar
  • PHP-Entwickler muss nicht auf Hacks zurückgreifen
  • Erzeugter HTML-Code muss schlank sein
  • Inhalt und Darstellung getrennt. Darstellung wird im CSS definiert.

Ich habe Verfahren von hier und von Sitepoint komibiniert, um die genannten Anforderungen zu erfüllen.

Will der PHP-Code einen Inhalt in eine Box mit gerundeten Ecken einfügen, erzeugt er folgenden Code:

this is the content in the box

Ein 10-Zeilen-Javascript wird nun ins window.onload eingehängt. Diese Funktion findet alle DIVs, welche zur Klasse autoround gehört und fügt die notwendigen “Hilfs-DIVs” ein, um die runden Ecken zu erzeugen. Schaut euch mal den “generated HTML-Source” an. Zugegeben, sieht abenteuerlich aus. Aber dieses Konstrukt lässt sich wunderbar per CSS gestalten.

Hier findest Du eine Demo

Ganz glücklich bin ich mit der Methode noch nicht. 8 verschachtelte DIVs finde ich ziemlich wild. Und mit der Javascript-Funktion fügen wir eine neue Komponente ein, welche ausfallen könnte.

Aber von den 43 hier vorgestellten Methoden finde ich es die beste für unsere Bedürfnisse.

Falls ihr bessere Vorschläge habt: Her damit! :-)

Filed under: tilllate.com,Web Development

7 Comments

  1. auf CSS3 warten ;-) [1]

    ev. wäre das mit zwei flash komponenten lösbar!? im html code statt einer tabelle 3 div’s:
    1. div: 100% width flash, welches tl,t und tr generiert [2]
    2. div: content
    3. div: gleich wie 1. div nur bl,b und br

    das gleiche mit 3 divs könnte so gehen, dass im ersten div der tl als img eingefügt ist und der tr als css bild. das gleiche im 3. div nur b statt t

    ev. wären die eckbilder auch mit float etwas manipulierbar.

    so viele div’s wie im beispiel finde ich auch ein wenig viel, auch wenn diese schneller geladen sind als die absolut tödlichen tables (tables werden ja erst angezeigt, wenn sie vollständig geladen sind (/table) natürlich nicht in jedem browser.

    es ist schon zu spät um ganze beispiele (brauchbare) aus meinem kopf zu bringen… ;)

    vielleicht morgen noch was konkreteres.

    gruss
    dhe

    [1] http://www.w3.org/TR/css3-background/
    [2] TopLeft, Top, TopRight resp. BottomLeft…

    Comment by Dominique — 30. December 2006 @ 00:47

  2. Tolle Lösung, schön schlank und so! Evtl. könnte man das CSS für die Endlösung noch ein wenig schlanker machen (und ich glaube ich habe da eine nicht definierte Variable gesehen, solche Dinge können böse Enden).

    Ansonsten wirklich auf CSS 3 warten (anständige Browser-Unterstützung vermutlich irgendwann 2020) oder mit den -moz-border-radius für wirklich coole Browser schon heute zaubern. Was ich mir noch überlegt habe (aber nicht ganz so flexibel ist) das Hintergrundbild als ganzes jeweils in der richtigen Grösse auf dem Server dynamisch, gecacht zu erzeugen.

    Comment by leo — 30. December 2006 @ 11:01

  3. Nachtrag: Diesen Link (http://24ways.org/2006/rounded-corner-boxes-the-css3-way) hatte ich eben nicht zur Hand. Wenn dein Mac noch wo rumsteht hast kannst du css3 schon mal austesten und nachher wieder trauern, dass das nicht in allen Browsern funktioniert.

    Comment by leo — 30. December 2006 @ 11:22

  4. @dhe:

    Zum Flash:

    Das ist ein interessanter Tipp. Folgendes spricht für mich dagegen:

    1. Wir bringen hier wieder eine neue Technologie ins Spiel, welche ausfallen könnte und man beherrschen und warten muss.

    2. Ich kann die bestehenden Bitmaps nicht wiederverwenden.

    3. Der notwendige HTML Code hätte drei DIVs drin. Anstatt einer wie im aktuellen Muster.

    4. Ich hasse grosse OBJECT/EMBED-Tags im Code. Die brauchen so viel Platz.

    Zur Variante 2:
    Das ähnelt m.E. der Sliding-Doors-Technik welche sehr beliebt ist.

    @leo
    Die Idee mit der serverseitigen Bildgenerierung habe ich mir auch schon überlegt.

    Wir machen das schon, allerding momentan nur Text. Für unsere Business-Tilllate-Sites wie redbull-gallery.ch

    .

    Für die Ecken könnte man es es ähnlich machen… Auch mit der GD-Library.

    Comment by Silvan Mühlemann — 30. December 2006 @ 19:52

  5. Hier was zum spielen.

    http://www.roundedcornr.com/

    Werde im Büro mal schauen ob es ohne Bilder möglich ist.

    Greez
    Malaxo

    Comment by Malaxo — 26. February 2007 @ 22:52

  6. File Upload wäre hier nicht schlecht;)

    HTML
    —-

    Runde Ecken

    Text text TEXT tExT Text text TEXT tExT Text text TEXT tExT Text text TEXT tExT
    nach “BR” Text text TEXT tExT Text text TEXT tExT Text text TEXT tExT Text text TEXT tExT


    CSS

    body {
    background-color: #FFF;
    margin: 0px;
    padding: 0px;
    font-size: 16px;
    font-family: Verdana;
    }

    div.runde-box{
    position:relative;
    width: 9em;
    background-color: #E6E6E6;
    margin: 3px;
    }

    /*********************
    GLOBALE WERTE
    *********************/
    div.oben-links-aussen, div.unten-links-aussen, div.oben-rechts-aussen, div.unten-rechts-aussen{
    position:absolute;
    width:20px;
    height:20px;
    background-color:#FFF;
    overflow:hidden;
    }

    div.oben-links-innen, div.unten-links-innen, div.oben-rechts-innen, div.unten-rechts-innen{
    position:relative;
    font-size:150px;
    font-family:arial;
    color:#E6E6E6;
    line-height: 40px;
    }

    /*********************
    SPEZIFISCHE WERTE
    *********************/

    div.oben-links-aussen{
    top:0px;
    left:0px;
    }

    div.unten-links-aussen{
    bottom:0px;
    left:0px;
    }
    div.oben-rechts-aussen{
    top:0px;
    right:0px;
    }
    div.unten-rechts-aussen{
    bottom: 0px;
    right:0px;
    }

    div.oben-links-innen{
    left:-8px;
    }

    div.unten-links-innen{
    left:-8px;
    top:-17px;
    }
    div.oben-rechts-innen{
    left:-25px;
    }

    div.unten-rechts-innen{
    left:-25px;
    top:-17px;
    }

    div.box-text{
    position: relative;
    padding: 8px;
    color:#000;
    }

    Comment by Malaxo — 27. February 2007 @ 09:18

  7. Html hat es wie erwartet nicht übernommen.

    Für das Script könnt ihr mich unter

    mese_t@hotmail”DOT”com

    kontaktieren.

    Greez

    Comment by malaxo — 27. February 2007 @ 09:37

RSS feed for comments on this post.

Sorry, the comment form is closed at this time.

© 2017 tilllate Schweiz AG - Powered by WordPress