Wer kennt ihn nicht den Aufwand, in einer CSS basierenden Seite abgerundete Ecken für Container haben zu wollen. Das ist nun sehr einfach mit Nifty Corners möglich.
Unter http://www.html.it/articoli/niftycube/index.html wird der Download aller benötigten Dateien, inklusive einiger Beispieldateien angeboten. Nifty Corners unterliegt der GNU GPL licence.
Aus dem Downloadpaket müssen die Dateien „niftyCorners.css“, „niftycube.js“, „NiftyLayout.css“ und „niftyLayout.js“ in das Projektverzeichnis geladen werden.
Im einzubindenen Template reicht dann ein Aufruf à la:
<script type="text/javascript" src="/lib/niftycube.js"></script>
Um das ausgewählte Element auch tatsächlich mit den abgerundeten Ecken auszustatten, muss folgender Codeblock im entsprechenden Template eingesetzt werden:
<script type="text/javascript">
window.onload=function() {
Nifty("div#id_des_containers","big");
}
</script>
Der erste Parameter für den Funktionsaufruf muss die ID des Containers sein, dessen Ecken abgrundet werden sollen. Die weiteren Parameter sind sehr schön auf der Webseite von Nifty Corners beschrieben.
Mit dieser einfachen Implementierung wird der Container „id_des_containers“ bereits mit abgerundeten Ecken dargestellt. Dabei wird das ganze wohl durch mehrfach verschachtelte Divs gelöst, die dann dynamisch in das ausgewählte Element geschrieben werden.
Das ist wirklich ein sehr angenehmer und einfach zu verwendender Helfer. Ich denke ich werde Nifty Corners in zukünftigen Projekten öfter mal einsetzen um auch etwas Praxiserfahrung damit zu sammeln. In dem Paket sind einige sehr ansprechende Beispiele vorhanden, die Lust auf einige Experimente machen 🙂