Abgerundete Ecken mit JavaScript

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Sie wollen Ihre Webseite automatisch mit abgerundeten Ecken versehen, ohne hierfür übermäßig viel zusätzlichen Markup-Code oder Bilder einfügen zu müssen.

Lösung

Verwenden Sie das JavaScript Nifty Corners Cube von Alessandro Fulciniti.

Zu Beginn laden Sie den nötigen Quellcode als Zip (eine JavaScript- und eine CSS-Datei) herunter.

Überspielen Sie die für die Nifty Corners Cube-Lösung nötigen Dateien auf Ihren Webserver, und binden Sie das JavaScript-script-Element mit dem src-Attribut in die gewünschte Seite ein:

<script type="text/javascript" src="/_assets/js/niftycube.js"></script>

Hinweis: Entgegen der üblichen Praxis wird die CSS-Datei in dieser Lösung nicht direkt referenziert. Dies geschieht automatisch durch den JavaScript-Code. In unserem Beispiel befinden sich die Dateien im Verzeichnis js unterhalb des Ordners _assets.

Jetzt können Sie das Markup Ihrer Seite so anpassen, dass Elemente, die mit abgerundeten Ecken versehen werden sollen (siehe nächste Abbildung), einen einmaligen Wert für das Attribut id bekommen:

<div id="box">
  <h2>Marquee selectus</h2>
  <p>...</p>
</div>

Standarddarstellung der Spalte

Abbildung: Standarddarstellung der Spalte.

Um das gewünschte Element mit abgerundeten Ecken zu versehen, können Sie nun die Funktion Nifty aus dem zuvor eingebundenen Skript aufrufen. In diesem Aufruf teilen Sie dem Skript die ID und die Größenangaben für das Element mit (siehe folgende Abbildung):

<script type="text/javascript" src="niftycube.js"></script>
<script type="text/javascript">window.onload=function( ) {Nifty("div#box","big");}</script>

Abgerundete Ecken werden automatisch dargestellt

Abbildung: Die abgerundeten Ecken werden automatisch dargestellt.

Diskussion

Da die Nifty Corners Cube-Methode fast vollständig automatisch funktioniert, kann man hier anstatt einer Technik eher von einem Werkzeug sprechen.

Verschiedene Farben

Das JavaScript erkennt die Farbauswahl automatisch. Die Farben der abgerundeten Ecken werden vom Skript an die Hintergrundfarben des Elements und seines Elternelements (normalerweise das body-Element der Webseite) angepasst. Entwickler brauchen sich also keine Gedanken um die Farbauswahl zu machen, sondern können sich um Elementauswahl und Größenangaben für die abgerundeten Ecken kümmern.

Verschiedene Größen

Die Größen der abgerundeten Ecken können beim Nifty Corners Cube-Skript durch eines von vier Schlüsselwörtern angegeben werden: none, small, normal (Standardwert) und big. Der Wert small entspricht einer Größe von 2 Pixeln, normal steht für 5 Pixel und big bedeutet eine Größe von 10 Pixeln. Der Wert none sorgt dafür, dass das Skript für das angegebene Element keine abgerundeten Ecken erzeugt.

Um ein Element mit kleinen abgerundeten Ecken zu versehen, sähe der entsprechende JavaScript-Aufruf etwa wie folgt aus:

<script type="text/javascript">window.onload=function( ) {Nifty("div#box","small");}</script>

Unterschiedliche Elemente

Das Nifty Corners Cube-Skript kann mit einer Vielzahl verschiedener Selektoren umgehen. Auf diese Weise wird die Auswahl von Elementen, die mit abgerundeten Ecken versehen werden sollen, stark erleichtert. Eine Liste finden Sie in der folgenden Tabelle.

Tabelle: Liste der Selektoren, die das Nifty Corners Cube-JavaScript versteht.

Selektor Beispiel
Typselektor "div"
"h3"
ID-Selektor "div#box"
"h3#main"
Klassen-Selektor "div.box"
"h3.box"
Kindselektor mit ID "div#box h3"
"h3#main div"
Kindselektor mit Klassenangabe "div.box h3"
"h3.main div"
Gruppierte Selektoren "div, h3"
"div, h3.main div, p"

Um mehrere Elemente auf einmal mit abgerundeten Ecken zu versehen, könnten Sie folgenden Skriptaufruf verwenden:

<script type="text/javascript">window.onload=function( ) {Nifty("div, h3.main div, p","small");}</script>

Bestimmte Ecken

Das Skript Nifty Corners Cube gestattet es Designern außerdem, nur bestimmte Ecken abzurunden. In der nächsten Tabelle finden Sie eine Liste der Schlüsselwörter, mit denen bestimmte Ecken explizit ausgewählt werden können.

Tabelle: Liste der Schlüsselwörter für das Abrunden bestimmter Ecken, die vom Nifty Corners Cube-JavaScript verstanden werden.

Schlüsselwort Bedeutung
tl linke obere Ecke
tr rechte obere Ecke
bl linke untere Ecke
br rechte untere Ecke
top beide oberen Ecken
bottom beide unteren Ecken
left beide linken Ecken
right beide rechten Ecken
all (Standardwert) alle Ecken

Um bei mehreren Elementen einer Webseite nur die oberen Ecken abzurunden, könnten Sie also schreiben:

<script type="text/javascript">window.onload=function( ) {Nifty("div, h3.main div, p","small top");}</script>

Siehe auch

Weitere Informationen zum Skript Nifty Corners Cube.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln