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>
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>
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>
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