PHP Blogger

Startseite Schreib mir ne Mail! RSS Abo Webnews

Runde Ecken mit CSS

Das Problem jeden CSS Entwicklers ist: Ecken sind eckig und nicht rund. Um Akzente zu setzen kommen nun doch öfter abgerundete Ecken zum Einsatz - Aber wie mit CSS umsetzen, ohne Grafiken zu verwenden?

Mittlerweile gibts viele Javascript Framworks, die das möglich machen. Eines davon ist OpenRico. Wie man auf der Webseite erkennen kann, gibts da allerdings einiges an Effekten, die man mit Rico erzeugen kann… Das bedeutet - weil für die Effekte die Bibliothek benötigt wird - das jedes Mal beim Anschauen einer Webseite knapp 90kb nachgeladen werden müssen.

OpenRico baut übrigens auf der Javascript Bibliothek prototype auf. Die runden Ecken sind aber bei der Gestaltung limitiert. Man kann keine Rahmen definieren, nur welche Ecken die Rundung betrifft und welche Farbe das Objekt hat. Aber eigentlich gehts nicht um Rico, sondern um ShadedBorder - eine kleine Javascript Bibliothek von Steffen Rusitschka.

Das besondere an ihr: Sie hat sich ausschließlich der Darstellung von runden Ecken gewidmet und “wiegt” etwa 7kb. Durchaus akzeptabel also. Und das sind die Features, die man auch auf seiner Demo-Seite begutachten kann:

  • Runde Ecken (war ja klar ;-)
  • Schatten
  • Glüh-Effekte
  • Rahmen mit unterschiedlicher Stärke
  • Anti-Aliasing
  • Echte Transparenz

Ähnliche Artikel:

  1. Eine riesen Update-Orgie
  2. Mehr Transparenz im IE6

Conny meint dazu:

28. März 2007 um 12:41

Feine Sache, werd ich mal genauer unter die Lupe nehmen ;-)

Moin moin

BTW, ihr _liebt PHP seit 1980_, mmmmmh wurde zwar erst 1995 entwickelt, aber vlt. hattet ihr ja ne Vorahnung :-)

timi meint dazu:

28. März 2007 um 15:27

Hey Conny, heißt wir fanden es schon immer gut :) Die Bibliothek ist recht vielversprechend…

Sepp meint dazu:

24. Mai 2007 um 20:21

Hi Leute. Konnt ihr einem basoluten vollidioten wie mir erklären wie das geht? ich kriegs einfach nicht hin.

timi meint dazu:

25. Mai 2007 um 07:37

Hi Sepp, zuerst lädst du das ShadedBorder Script über den Script Tag. Dann verpasst Du dem Element, das abgerundet werden soll eine ID und als Klasse “sb” = shadedborder.

Wichtig ist, dass der Text nicht direkt in dem abgerundeten Objekt drin steht, sondern eine Ebene tiefer (div -> p -> text), das Div, wird gerundet, der Absatz enthält den Text.

Zwischen zwei Script-Tags (am besten oben im Header) musst Du dir mit RUZEE.ShadedBorder.create ein Border-Objekt erstellen, bei dem Du z.B. Randbreite, Schatten und Rundung definierst.

Am Ende des Body-Tags rufst wieder zwischen zwei Script-Tags “border.render(’element_id’);” auf: “element_id” ersetzt Du dann durch die ID die dem Element gegeben hast, das gerundet werden soll…

RSS für Kommentare zu diesem Artikel · TrackBack URI

Schreib Deine Meinung