Lange her dass ich zuletzt was über sogenannte »runde Ecken« geschrieben habe. Damals ging es um eine Methode, bei der von Hand HTML-Elemente eingefügt wurden, die dann mit CSS positioniert und gestaltet wurden. Aber eigentlich kann man das Einfügen der Ecken auch von Javascript erledigen lassen. Also an die Arbeit!

Warum mit Javascript?

Wie man es auch dreht und wendet: Will man zuverlässig funktionierende runde Ecken haben, kommt man nicht umhin, über kurz oder lang einen ganzen Haufen semantisch zweifelhaftes HTML in seine Website zu kloppen. Wenn man dieses HTML nicht von Hand fest einbaut, sondern dynamisch von Javascript erzeugen lässt, arbeitet man mit wesentlich übersichtlichem Markup, was Wartung und Ausbau natürlich erleichtert.

Klar, es gibt irgendwo da draußen drei Leute, die sich lieber steinigen lassen würden, als dass sie Javascript aktivieren. Zum Minderheitenschutz sollte man also dafür sorgen, dass die Website auch ohne runde Ecken halbwegs ansehnlich bleiben. Es könnte sich in diesem Zusammenhang auch anbieten, JS-Ecken mit fest eingebauten Ecken zu kombinieren.

Im Folgenden gehen wir einfach davon aus, dass unser Beispiel auch dann gut aussieht, wenn es keine schönen Ecken hat.

Mootools

Mootools ist ein modulares Javascript-Framework. Für unsere Ecken stellen wir uns auf der Download-Seite ein Paket mit folgenden Modulen zusammen:

  • Element.Selectors
  • Window.DomReady

Den Code des Frameworks lagert man sinnvollerweise in eine .js-Datei aus und bindet diese in seine Ziel-Website ein.

HTML

Eins der Ziele unserer Javascript-Ecken ist es, das HTML-Gerüst möglichst einfach zu halten. Also beschränken auch wir uns hierauf:

<div class="ecken"></div>

Statt eines div kann man natürlich auch jedes andere HTML-Element hernehmen. Man sieht: Das einzige was hierbei auf die spätere Ecken-Ausstattung hinweist, ist die Klasse. Mehr brauchen wir auch nicht.

Javascript

Unter Zuhilfenahme der Mootools werden wir das Javascript schlicht und einfach vier HTML-Elemente in alles einbauen lassen, das class="ecken" hat. Später machen wir mit CSS richtige Ecken daraus. Der Code:

window.addEvent('domready', function()
{
  var list = $$('.ecken');
  list.each(function(element)
  {
    new Element('span').addClass('e1').injectTop(element);
    new Element('span').addClass('e2').injectTop(element);
    new Element('span').addClass('e3').injectTop(element);
    new Element('span').addClass('e4').injectTop(element);
  });
});

Zur Erklärung:

  1. window.addEvent('domready', function() { }); sorgt dafür, dass die Ecken-Funktion erst ausgeführt wird, wenn HTML fertig geladen ist.
  2. Die $$-Funktion sammelt alle Elemente mit class="ecken" ein. Der Funktionsparameter funktioniert genau wie ein CSS-Selektor. Statt .ecken könnte man also auch div .ecken, #ecken oder andere Kriterien festlegen.
  3. Zuletzt wird diese Liste durchgegangen (list.each) und für jedes HTML-Element in der Liste werden vier neue Span-Elemente erzeugt (new Element('span')). Diese vier bekommen je eine Klasse (addClass('eX')) für das Styling zugewiesen und werden im jeweiligen HTML-Element aus der Liste platziert (injectTop(element)).

Der Effekt: Aus unserem einfachen <div class="ecken"></div> wird, wenn das Script fertig ist, dies hier:

<div class="ecken">
  <span class="e1"></span>
  <span class="e2"></span>
  <span class="e3"></span>
  <span class="e4"></span>
</div>

Und daraus Ecken zu machen ist für den erfahrenen CSSler ein Kinderspiel.

CSS

Um die Ecken im Container platzieren zu können, muss dieser zunächst selbst relativ positioniert sein. Da dies für alle Ecken-Container gelten muss, lässt sich dies recht einfach erledigen:

.ecken { position:relative; }

Die Ecken ihrerseits müssen absolut positioniert sein und display:block; haben. Wenn alle vier Ecken die gleichen Maße haben, kann man diese auch direkt schon notieren:

.ecken .e1 , .ecken .e2, .ecken .e3, .ecken .e4 { position:absolute; display:block; width:32px; height:32px; }

Zuletzt muss man die Ecken nur noch in ihre jeweiligen Ecken schieben und ihnen ihre jeweilige Grafik als Hintergrundbild verpassen.

.ecken .e1 { background:url(oben-links.gif); top:0; left:0; }
.ecken .e2 { background:url(oben-rechts.gif); top:0; right:0; }
.ecken .e4 { background:url(unten-rechts.gif); bottom:0; right:0; }
.ecken .e3 { background:url(unten-links.gif); bottom:0; left:0; }

Und das war es auch schon! Wie immer gibt es auch eine Beispielseite zum Text.

Zusatz: Jedem Element seine Ecken

Diese Methode zur Eckenerzeugung kommt mit wenig festem HTML und wenig Javascript aus, verlangt aber relativ viel Getippe in der CSS-Datei. Davon könnte man sich einiges ersparen, wenn man durch das Script direkt img-Elemente einfügen ließe. Aber die Span-Methode hat auch zur Folge, dass man viele viele verschiedene Varianten von Ecken erstellen kann, ohne dass man das Script anrühren müsste.

So könnte man beispielsweise die Ecken von <div class="ecken alpha"></div> komplett anders gestalten als die Ecken von <div class="ecken beta"></div>. Wenn ecken als Klasse vorhanden ist, bekommt das Element via Script seine vier Extra-Elemente und über den CSS-Selektor .ecken lassen sich die allgemein gültigen Basics die Positionierung festlegen. Über .alpha und .beta kann man dann das optische Feintuning abwickeln.