Runde Ecken sind im Web 2.0 so beliebgt wie noch nie zuvor, auch wenn oft nur kompliziert umzusetzen sind. Lösungsansätze gibt es viele, in meinem Tutorialblog in.tuitive habe ich Lösungen für Boxen mit fixer Breite und variabler Höhe und mit fixer Höhe und variable Breite vorgestellt. Eine weitere Möglichkeit ist der Einsatz von JavaScript. Frank Bueltge hat drei verschiedene Bibliotheken die dies ermöglichen beschrieben. Aber keine der drei Varianten (und auch keine sonst mir bekannte Bibliothek) unterstützt den Einsatz von Bildern und dadurch die Möglichkeit seinen runden Ecken auch Effekte wie Schatten, Verläufe, etc zuzuweisen.
Aus diesem Grund ist FERC (Florian Eckerstorfers Rounded Corners) entstanden. Natürlich könnte man zu dem selben Ergebnis auch ohne JavaScript und nur mit HTML und CSS kommen, aber für diese Lösung benötigt man insgesamt 9 zusätzliche Layer. Ein riesiges Chaos im Quelltext würde entstehen und Ferc hilft die Divitis zu vermeiden (Fragen sie ihren Arzt oder Apotheker).
Inhalt
- Theorie
- FERC
- FERC PHP Helper
- Download
- Installation
- Bugs, Fehler, Wünsche, Kritik, Anregungen, etc
- News
- Lizenz
- Change Log
Wer sich fragt warum 9 Layer hat allen Grund dazu, denn theoretisch könnte man dies auch mit 4 Layern lösen. Allerdings unterstützt die 4-Layer-Lösung keine Transparenz. Möchte man die Ecken auf einem Hintergrund mit Bild oder Verlauf einsetzen, muss meine meine 9-Layer-Variante nehmen. Im Moment frage ich mich ob ich soeben diese Variante erfunden habe, bisher habe ich davon nämlich noch nichts gehört. Deshalb soll kurz erklärt werden wie Ferc arbeitet:
Die roten Bereiche kennzeichnen die Ecken (in diesem Beispiel 20×20 Pixel groß), die mit float links bzw. rechts positioniert werden. Blau gekennzeichnet sind die Ränder oben und unten. Das Bild dazu ist 1 Pixel breit un in diesem Fall 20 Pixel hoch. Am kompliziertesten zu erklären ist vermutlich der Bereich in der Mitte. Auch dieser Bereich besteht aus 3 Layern, allerdings sind diese verschachtelt. Zuerst der Layer für den linken Rand, dieser besitzt ein Hintergrundbild das nur über die y-Achse wiederhohlt wird und 1 Pixel hoch ist. Darüber liegt der Layer für den rechten Rand. Auch hier gibt es ein Hintergrundbild das nur über die y-Achse wiederhohlt wird und 1 Pixel hoch ist. Außerdem wird es auf der rechten Seite positioniert. Ganz oben liegt der Layer für den Hintergrund. Durch einen Außenabstand wird sichergestellt das er nicht die Bilder für den linken und rechten Rand überdeckt.
Mein Script nutzt dieses Prinzip und erstellt die komplette Layer-Struktur automatisch und wendet sie auf die gewünschten Layer an. Dadurch ist der Quelltext frei von Divitis (zumindest im Zusammenhang mit runden Ecken). FERC beinhaltet sowohl den nötigen JavaScript-Code (281 Byte) als auch eine CSS-Datei mit den Anweisungen die bei allen FERC runden Ecken gleich sind. Da die Bilder für die Ecken und deren Größe unterschiedlich sein kann, müssen einige Anweisungen händisch eingestellt werden. FERC ist ein example.css Stylesheet beigelegt der alle nötigen Befehle verwendet und anhand dessen man den korrekten Einsatz von FERC lernen kann.
FERC liegt auch ein PHP-Script bei, mit dessen Hilfe der vollständige CSS-Code generiert wird. Dadurch erspart man sich das manuelle Erstellen der CSS-Anweisungen für die Bildpfade und -größen. Der gesamte Code ist in der Klasse Ferc_CssGenerator untergebracht und inline mit PHPDoc-Anweisungen (in Englisch) dokumentiert. Ferc_CssGenerator hat auch ein Cachingsystem integriert, so dass der Stylesheet nur einmal generiert werden muss. Die Verwendung wird aus dem Beispiel im php-helper/example-Order gezeigt.
- FERC v0.1
ferc-v0.1.zip (24KB; Downloads) - Lizenz
Genaue Installationsanweisungen werden in Kürze folgen. Derweile bitte das Beispiele im example-Ordner als Hilfeleistung benutzen, insbesondere die Dateien example.htm und example.css.
Auch für die PHP-Klasse Ferc_CssGenerator gibt es derzeit noch keine Installationsanleitung. Das Beispiel im Ordner php-helper/example zeigt die Verwendung. Insbesondere die Datei example.php sollte man beachten.
Bugs, Fehler, Wünsche, Anregungen, Kritik, etc
Wenn du einen Bug findest oder mir sonst irgendetwas in Zusammenhang mit FERC mitteilen möchtest, benutze bitte das Kommentarformular im Beitrag zur jeweiligen Version. Eine Liste mit den Beiträgen findest du unterhalb.
Hier findest du eine Liste mit allen News zu FERC.
- noch keine
- v0.1 (20. September 2007)
Erste Version, alles neu
Latest Comments
RSS