Feb

26

Runde Ecken mit CSS und JavaScript

By Olaf Waltersdorf

Ab und zu will man (oder die Designer) ja abgerundete Ecken haben. Normalerweise artet das in Fummel-Arbeit aus, gerade um es Cross-Browser fähig zu machen. Eine weitere, wie ich finde sehr elegante Lösung, ist folgendes JavaScript:

http://www.ruzee.com/blog/shadedborder

Per Parameter kann man die Rundung, den Schatten und die Linienbreite bestimmen. Per CSS noch die Farben und alles andere :) Sehr einfach einzubauen und basiert ausnahmsweise nicht auf einem Framework, ist aber mit diesen Kompatibel.

 

NACHTRAG

Ein interessanter Firefox-Bug hat mich fast in den Wahnsinn getrieben – ich habe obiges JS verwendet und eine türkise Box erzeugt. In diese Box habe ich eine weisse Box getan, also zweimal runde Ecken. Dann in die Weisse das month-small template der cal-Extension für Typo3 – und im Firefox hat z.B. .month.small td { border:1px solid red} nicht mehr funktioniert, es waren keine Border mehr zu sehen. Die Lösung war, die Background-Color der td und th auf transparent zu setzen oder einfach die Anweisung wegzulassen. Falls es mal irgendjemanden ebenfalls passiert :)