Browserunabhängige runde Ecken ohne Grafiken

von meggs | 3 | 27 Kommentare | 9683 Aufrufe
Firefox2Fast3Unterstützt
IE6Nein7Nein8Unbekannt
Opera9Nein9.5Unbekannt
Safari3Unterstützt3.1Unterstützt
1%
CSS3: border-radius

Runde Ecken sind im Webdesign immernoch eine heikles Thema. Zwar bieten einige Browser schon die in CSS3 festgelegten Eigenschaften für Eckenradien als anbieterspezifische CSS-Eigenschaften, aber leider erreicht man damit noch nicht den Großteil der Besucher, wie die Grafik rechts zeigt.

Um für alle Browser runde Ecken hinzubekommen, gibt es verschiedene Möglichkeiten: Die technisch einfachste aber aufwendige ist die Positionierung von Grafiken. Eine echte Alternativlösung ist schwierig aber nicht unmöglich. Eine wird hier vorgestellt.

Firefox2Unterstützt3Unterstützt
IE6Unterstützt7Unterstützt8Unterstützt
Opera9Unterstützt9.5Unterstützt
Safari3Unterstützt3.1Unterstützt
34%
Kompatibilität mithilfe von JavaScript (teilw. ungetestet)

Die Umsetzung geschieht mit JavaScript. So wird eine browserunabhängige Darstellung erreicht.

Vorteile:
Bild zu Browserunabhängige runde Ecken ohne Grafiken
GNU Lizenz
  • sehr einfache Anpassung (Form, Farbe, ...)
  • kaum JavaScript-Kenntnisse erforderlich
  • frei verwend- und modifizierbar
Nachteile:
  • relativ viel Code
  • JavaScript unabdingbar
So wird es später aussehen:
Bild zu Browserunabhängige runde Ecken ohne Grafiken
Darstellung im Firefox 3 (in anderen Browsern ähnlich)
Inhaltsverzeichnis

Anzeige Hier werben

Umsetzung

Los geht's

Wir nehmen uns einen DIV-Container vor. Der HTML-Code, der später in der Ausgabedatei sein wird, sieht so aus:

 
HTML
1
2
3
4
5
<div id="box">
  <h1>Runde Ecken rocken!</h1>
    <p>Dieses Beispiel soll die Darstellung von browserunabhängigen
    runden Ecken ohne Grafiken verdeutlichen.</p>
</div>

Dem DIV wurde bereits eine ID mit dem Wert box gegeben. Dieser Wert wird im Folgenden wichtig.

Einteilung

Damit die HTML-Datei übersichtlich bleibt wird das Dokument wie folgt eingeteilt:

  • CSS-Formatierungen werden in eine Datei namens style.css ausgelagert
  • CSS-Eigenschaften für die runden Ecken werden in round.css ausgelagert
  • Das JavaScript für die runden Ecken wird in round.js ausgelagert
  • Im Dokument selbst bleiben die Struktur und die JS-Funktion für den Abruf und die Einstellungen

Die Auslagerung von CSS geschieht durch das LINK-Tag. Mehr dazu im Artikel "CSS in HTML einbinden".

Die Auslagerung von JavaScript geschieht durch das SCRIPT-Tag. Im Beispiel:

 
HTML
1
<script type="text/javascript" src="round.js"></script>
Formatierung

in die style.css kommen folgende Formatierungsangaben:

style.css  
css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
* { padding:0; margin:0;}
body { background:#FFF; font-family: Arial,sans-serif;}
div#box {
        position: absolute;
        width: 300px;
        padding: 20px;
        margin-top: 50px;
        margin-left: -150px;
        left:50%;
        background: #E6E6E6;}
h1 { color: #444; margin-bottom: 10px;}

Auch diese Angaben sind wichtig für die Darstellung und sollten nur verändert aber nicht weggelassen werden. Hier kann beispielsweise die Hintergrundfarbe für das DIV eingestellt werden. Die runden Ecken werden dann auch mit einbezogen.

Es sollte jetzt ein mittig positionierter Kasten dargestellt werden. Noch ohne runde Ecken.

In die round.css kommen die Formatierungen für das B-Tag das später durch JavaScript generiert wird. Im Großen und Ganzen braucht dem keine weitere Beachtung geschenkt werden, wenn man nicht grundlegend etwas verändern möchte.

round.css  
css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
b.round,b.roundfill{display:block}
b.round *{
    display:block;
    height: 1px;
    line-height:1px;
    font-size: 1px;
    overflow:hidden;
    border-style:solid;
    border-width: 0 1px}

b.corners,b.fill{display:block}
b.corners *{display:block;height: 1px;line-height:1px;font-size: 1px;
    overflow:hidden;border-style:solid;border-width: 0 1px}

b.r1{margin: 0 3px;border-width: 0 2px}
b.r2{margin: 0 2px}
b.r3{margin: 0 1px}
b.r4{height: 2px}
b.rb1{margin: 0 8px;border-width:0 2px}
b.rb2{margin: 0 6px;border-width:0 2px}
b.rb3{margin: 0 5px}
b.rb4{margin: 0 4px}
b.rb5{margin: 0 3px}
b.rb6{margin: 0 2px}
b.rb7{margin: 0 1px;height:2px}
b.rb8{margin: 0;height:2px}
b.rs1{margin: 0 1px}

b.t1{border-width: 0 5px}
b.t2{border-width: 0 3px}
b.t3{border-width: 0 2px}
b.t4{height: 2px}
b.tb1{border-width: 0 10px}
b.tb2{border-width: 0 8px}
b.tb3{border-width: 0 6px}
b.tb4{border-width: 0 5px}
b.tb5{border-width: 0 4px}
b.tb6{border-width: 0 3px}
b.tb7{border-width: 0 2px;height:2px}
b.tb8{border-width: 0 1px;height:2px}
b.ts1{border-width: 0 2px}

Sollte ein Parameter in einer andere Datei geändert werden, muss logischerweise auch hier der Parameter angepasst werden.

JavaScript

Kommen wird zum eigentlichen Herzstück des ganzen, dem JavaSript.

Das aufzurufende JavaScript mit dem Namen round.js erzeugt die B-Tags die für die runden Ecken verantwortlich sind und lässt Einstellungsmöglichkeiten offen. Mehr dazu gleich.

round.js  
JavaScript
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
var RoundedCornersOk=(document.getElementById && document.createElement && Array.prototype.push);
var RoundedCornersCss=false;

String.prototype.find=function(what){
return(this.indexOf(what)>=0 ? true : false);
}

var oldonload=window.onload;
if(typeof(RoundedCornersLoad)!='function') RoundedCornersLoad=function(){};
if(typeof(oldonload)=='function')
    window.onload=function(){oldonload();AddCss();RoundedCornersLoad()};
else window.onload=function(){AddCss();RoundedCornersLoad()};

function AddCss(){
RoundedCornersCss=true;
var l=CreateEl("link");
l.setAttribute("type","text/css");
l.setAttribute("rel","stylesheet");
l.setAttribute("href","round.css");
l.setAttribute("media","screen");
document.getElementsByTagName("head")[0].appendChild(l);
}

function RoundedCorners(selector,options){
if(RoundedCornersOk==false) return;
if(RoundedCornersCss==false) AddCss();
var i,v=selector.split(","),h=0;
if(options==null) options="";
if(options.find("fixed-height"))
    h=getElementsBySelector(v[0])[0].offsetHeight;
for(i=0;i<v.length;i++)
    Rounded(v[i],options);
if(options.find("height")) SameHeight(selector,h);
}

function Rounded(selector,options){
var i,top="",bottom="",v=new Array();
if(options!=""){
    options=options.replace("left","tl bl");
    options=options.replace("right","tr br");
    options=options.replace("top","tr tl");
    options=options.replace("bottom","br bl");
    options=options.replace("transparent","alias");
    if(options.find("tl")){
        top="both";
        if(!options.find("tr")) top="left";
        }
    else if(options.find("tr")) top="right";
    if(options.find("bl")){
        bottom="both";
        if(!options.find("br")) bottom="left";
        }
    else if(options.find("br")) bottom="right";
    }
if(top=="" && bottom=="" && !options.find("none")){top="both";bottom="both";}
v=getElementsBySelector(selector);
for(i=0;i<v.length;i++){
    FixIE(v[i]);
    if(top!="") AddTop(v[i],top,options);
    if(bottom!="") AddBottom(v[i],bottom,options);
    }
}

function AddTop(el,side,options){
var d=CreateEl("b"),lim=4,border="",p,i,btype="r",bk,color;
d.style.marginLeft="-"+getPadding(el,"Left")+"px";
d.style.marginRight="-"+getPadding(el,"Right")+"px";
if(options.find("alias") || (color=getBk(el))=="transparent"){
    color="transparent";bk="transparent"; border=getParentBk(el);btype="t";
    }
else{
    bk=getParentBk(el); border=Mix(color,bk);
    }
d.style.background=bk;
d.className="corners";
p=getPadding(el,"Top");
if(options.find("small")){
    d.style.marginBottom=(p-2)+"px";
    btype+="s"; lim=2;
    }
else if(options.find("big")){
    d.style.marginBottom=(p-10)+"px";
    btype+="b"; lim=8;
    }
else d.style.marginBottom=(p-5)+"px";
for(i=1;i<=lim;i++)
    d.appendChild(CreateStrip(i,side,color,border,btype));
el.style.paddingTop="0";
el.insertBefore(d,el.firstChild);
}

function AddBottom(el,side,options){
var d=CreateEl("b"),lim=4,border="",p,i,btype="r",bk,color;
d.style.marginLeft="-"+getPadding(el,"Left")+"px";
d.style.marginRight="-"+getPadding(el,"Right")+"px";
if(options.find("alias") || (color=getBk(el))=="transparent"){
    color="transparent";bk="transparent"; border=getParentBk(el);btype="t";
    }
else{
    bk=getParentBk(el); border=Mix(color,bk);
    }
d.style.background=bk;
d.className="corners";
p=getPadding(el,"Bottom");
if(options.find("small")){
    d.style.marginTop=(p-2)+"px";
    btype+="s"; lim=2;
    }
else if(options.find("big")){
    d.style.marginTop=(p-10)+"px";
    btype+="b"; lim=8;
    }
else d.style.marginTop=(p-5)+"px";
for(i=lim;i>0;i--)
    d.appendChild(CreateStrip(i,side,color,border,btype));
el.style.paddingBottom=0;
el.appendChild(d);
}

function CreateStrip(index,side,color,border,btype){
var x=CreateEl("b");
x.className=btype+index;
x.style.backgroundColor=color;
x.style.borderColor=border;
if(side=="left"){
    x.style.borderRightWidth="0";
    x.style.marginRight="0";
    }
else if(side=="right"){
    x.style.borderLeftWidth="0";
    x.style.marginLeft="0";
    }
return(x);
}

function CreateEl(x){
return(document.createElement(x));
}

function FixIE(el){
if(el.currentStyle!=null && el.currentStyle.hasLayout!=null && el.currentStyle.hasLayout==false)
    el.style.display="inline-block";
}

function SameHeight(selector,maxh){
var i,v=selector.split(","),t,j,els=[],gap;
for(i=0;i<v.length;i++){
    t=getElementsBySelector(v[i]);
    els=els.concat(t);
    }
for(i=0;i<els.length;i++){
    if(els[i].offsetHeight>maxh) maxh=els[i].offsetHeight;
    els[i].style.height="auto";
    }
for(i=0;i<els.length;i++){
    gap=maxh-els[i].offsetHeight;
    if(gap>0){
        t=CreateEl("b");t.className="fill";t.style.height=gap+"px";
        nc=els[i].lastChild;
        if(nc.className=="corners")
            els[i].insertBefore(t,nc);
        else els[i].appendChild(t);
        }
    }
}

function getElementsBySelector(selector){
var i,j,selid="",selclass="",tag=selector,tag2="",v2,k,f,a,s=[],objlist=[],c;
if(selector.find("#")){ //id selector like "tag#id"
    if(selector.find(" ")){  //descendant selector like "tag#id tag"
        s=selector.split(" ");
        var fs=s[0].split("#");
        if(fs.length==1) return(objlist);
        f=document.getElementById(fs[1]);
        if(f){
            v=f.getElementsByTagName(s[1]);
            for(i=0;i<v.length;i++) objlist.push(v[i]);
            }
        return(objlist);
        }
    else{
        s=selector.split("#");
        tag=s[0];
        selid=s[1];
        if(selid!=""){
            f=document.getElementById(selid);
            if(f) objlist.push(f);
            return(objlist);

            }
        }
    }
if(selector.find(".")){      //class selector like "tag.class"
    s=selector.split(".");
    tag=s[0];
    selclass=s[1];
    if(selclass.find(" ")){   //descendant selector like tag1.classname tag2
        s=selclass.split(" ");
        selclass=s[0];
        tag2=s[1];
        }
    }
var v=document.getElementsByTagName(tag);  // tag selector like "tag"
if(selclass==""){
    for(i=0;i<v.length;i++) objlist.push(v[i]);
    return(objlist);
    }
for(i=0;i<v.length;i++){
    c=v[i].className.split(" ");
    for(j=0;j<c.length;j++){
        if(c[j]==selclass){
            if(tag2=="") objlist.push(v[i]);
            else{
                v2=v[i].getElementsByTagName(tag2);
                for(k=0;k<v2.length;k++) objlist.push(v2[k]);
                }
            }
        }
    }
return(objlist);
}

function getParentBk(x){
var el=x.parentNode,c;
while(el.tagName.toUpperCase()!="HTML" && (c=getBk(el))=="transparent")
    el=el.parentNode;
if(c=="transparent") c="#FFFFFF";
return(c);
}

function getBk(x){
var c=getStyleProp(x,"backgroundColor");
if(c==null || c=="transparent" || c.find("rgba(0, 0, 0, 0)"))
    return("transparent");
if(c.find("rgb")) c=rgb2hex(c);
return(c);
}

function getPadding(x,side){
var p=getStyleProp(x,"padding"+side);
if(p==null || !p.find("px")) return(0);
return(parseInt(p));
}

function getStyleProp(x,prop){
if(x.currentStyle)
    return(x.currentStyle[prop]);
if(document.defaultView.getComputedStyle)
    return(document.defaultView.getComputedStyle(x,'')[prop]);
return(null);
}

function rgb2hex(value){
var hex="",v,h,i;
var regexp=/([0-9]+)[, ]+([0-9]+)[, ]+([0-9]+)/;
var h=regexp.exec(value);
for(i=1;i<4;i++){
    v=parseInt(h[i]).toString(16);
    if(v.length==1) hex+="0"+v;
    else hex+=v;
    }
return("#"+hex);
}

function Mix(c1,c2){
var i,step1,step2,x,y,r=new Array(3);
if(c1.length==4)step1=1;
else step1=2;
if(c2.length==4) step2=1;
else step2=2;
for(i=0;i<3;i++){
    x=parseInt(c1.substr(1+step1*i,step1),16);
    if(step1==1) x=16*x+x;
    y=parseInt(c2.substr(1+step2*i,step2),16);
    if(step2==1) y=16*y+y;
    r[i]=Math.floor((x*50+y*50)/100);
    r[i]=r[i].toString(16);
    if(r[i].length==1) r[i]="0"+r[i];
    }
return("#"+r[0]+r[1]+r[2]);
}

Einstellung

Um die runden Ecken auf seine Zwecke anpassen zu können, wird eine Einstellungsmöglichkeit offen gehalten.

In den Kopf (HEAD) der HTML-Datei kommt folgender Code:

 
HTML
1
2
3
4
5
<script type="text/javascript">
window.onload=function(){
RoundedCorners("div#box","big");
}
</script>

In Zeile 3 befindet sich das interessante Stück um die Ecken anzupassen:

Der erste Parameter beschreibt den CSS-Selektor (div#box), der zweite Parameter die Darstellungsvariante.

Erster Parameter

Der CSS-Selektor kann abgewandelt und beliebig erweitert werden. In CSS muss allerdings dann der Selektor angepasst werden.

Es können auch mehrere DIVs erzeugt werden, um beispielsweise auch eine Navigation einzubauen. In diesem Fall wird der zweite Selektor einfach durch ein Komma getrennt eingefügt (man beachte die Hochkommata!):

 
JavaScript
1
RoundedCorners("div#box,div#navi","big");
Zweiter Parameter

Der zweite Parameter ist für die Variante der runden Ecken verantwortlich. Im Beispiel ist "big" angegeben, dh. es werden große runde Ecken generiert. Es können aber auch nur einzelne Ecken angesprochen und mehrere Angaben gemacht werden. Dazu werden die Angaben mit Leerzeichen getrennt:

 
JavaScript
1
RoundedCorners("div#box","small transparent top");

Dieser JS-Aufruf beschreibt nur die oberen beiden Ecken, und zwar als klein transparent.

Folgende Tabelle gibt einen Überblick über die Möglichkeiten:

ParameterBedeutung
tl Ecke oben links
tr Ecke oben rechts
bl Ecke unten links
br Ecke unten rechts
top Ecken oben
bottom Ecken unten
left Ecken links
right Ecken rechts
all alle Ecken (standard)
none keine Ecke
small kleine Rundung (2px)
normal normale Rundung (5px) (standard)
big große Rundung (10px)
transparent das DIV wird transparent um bsw. ein Hintergrundbild festzulegen
fixed-height muss gesetzt werden wenn für das DIV in CSS eine feste Höhe definiert wurde

Um einen DIV-Komplex zu erstellen muss auf eine Schleife zurückgegriffen werden. Bei ineinander geschachtelten DIVs sieht also die Struktur (mit Beispielangaben) wie folgt aus:

 
JavaScript
1
2
3
4
5
window.onload=function(){
RoundedCorners("div#container");
RoundedCorners("div#content,div#nav","same-height small");
RoundedCorners("div#header,div#footer","small");
}

Ergebnis

In der Ausgabeansicht besteht die Möglichkeit selbstständig Codeteile zu verändern. So können sie gut andere Varianten für den zweiten Parameter testen.

Das hier gezeigte Ergebnis dient nur der Demonstration. Damit die Darstellung funktioniert sind alle JavaScripte und CSS-Eigenschaften im HTML-Dokument untergebracht. Im Gebrauch sollten aber diese Dinge wie oben gezeigt ausgelagert werden.

Formatiertes beispiel zum ausprobieren  
Dieses Beispiel ausprobieren
HTML
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
<html><head>
<style type="text/css">
* { padding:0; margin:0;}
body { background:#FFF; font-family: Arial,sans-serif;}
div#box {
        position: absolute;
        width: 300px;
        padding: 20px;
        margin-top: 50px;
        margin-left: -150px;
        left:50%;
        background: #E6E6E6;}
h1 { color: #444; margin-bottom: 10px;}

b.corners,b.fill{display:block}
b.corners *{display:block;height: 1px;line-height:1px;font-size: 1px;
    overflow:hidden;border-style:solid;border-width: 0 1px}

b.r1{margin: 0 3px;border-width: 0 2px}
b.r2{margin: 0 2px}
b.r3{margin: 0 1px}
b.r4{height: 2px}
b.rb1{margin: 0 8px;border-width:0 2px}
b.rb2{margin: 0 6px;border-width:0 2px}
b.rb3{margin: 0 5px}
b.rb4{margin: 0 4px}
b.rb5{margin: 0 3px}
b.rb6{margin: 0 2px}
b.rb7{margin: 0 1px;height:2px}
b.rb8{margin: 0;height:2px}
b.rs1{margin: 0 1px}

b.t1{border-width: 0 5px}
b.t2{border-width: 0 3px}
b.t3{border-width: 0 2px}
b.t4{height: 2px}
b.tb1{border-width: 0 10px}
b.tb2{border-width: 0 8px}
b.tb3{border-width: 0 6px}
b.tb4{border-width: 0 5px}
b.tb5{border-width: 0 4px}
b.tb6{border-width: 0 3px}
b.tb7{border-width: 0 2px;height:2px}
b.tb8{border-width: 0 1px;height:2px}
b.ts1{border-width: 0 2px}
</style>
<script type="text/javascript">

var RoundedCornersOk=(document.getElementById && document.createElement && Array.prototype.push);
var RoundedCornersCss=false;

String.prototype.find=function(what){
return(this.indexOf(what)>=0 ? true : false);
}

var oldonload=window.onload;
if(typeof(RoundedCornersLoad)!='function') RoundedCornersLoad=function(){};
if(typeof(oldonload)=='function')
    window.onload=function(){oldonload();AddCss();RoundedCornersLoad()};
else window.onload=function(){AddCss();RoundedCornersLoad()};

function AddCss(){
RoundedCornersCss=true;
var l=CreateEl("link");
l.setAttribute("type","text/css");
l.setAttribute("rel","stylesheet");
l.setAttribute("href","round.css");
l.setAttribute("media","screen");
document.getElementsByTagName("head")[0].appendChild(l);
}

function RoundedCorners(selector,options){
if(RoundedCornersOk==false) return;
if(RoundedCornersCss==false) AddCss();
var i,v=selector.split(","),h=0;
if(options==null) options="";
if(options.find("fixed-height"))
    h=getElementsBySelector(v[0])[0].offsetHeight;
for(i=0;i<v.length;i++)
    Rounded(v[i],options);
if(options.find("height")) SameHeight(selector,h);
}

function Rounded(selector,options){
var i,top="",bottom="",v=new Array();
if(options!=""){
    options=options.replace("left","tl bl");
    options=options.replace("right","tr br");
    options=options.replace("top","tr tl");
    options=options.replace("bottom","br bl");
    options=options.replace("transparent","alias");
    if(options.find("tl")){
        top="both";
        if(!options.find("tr")) top="left";
        }
    else if(options.find("tr")) top="right";
    if(options.find("bl")){
        bottom="both";
        if(!options.find("br")) bottom="left";
        }
    else if(options.find("br")) bottom="right";
    }
if(top=="" && bottom=="" && !options.find("none")){top="both";bottom="both";}
v=getElementsBySelector(selector);
for(i=0;i<v.length;i++){
    FixIE(v[i]);
    if(top!="") AddTop(v[i],top,options);
    if(bottom!="") AddBottom(v[i],bottom,options);
    }
}

function AddTop(el,side,options){
var d=CreateEl("b"),lim=4,border="",p,i,btype="r",bk,color;
d.style.marginLeft="-"+getPadding(el,"Left")+"px";
d.style.marginRight="-"+getPadding(el,"Right")+"px";
if(options.find("alias") || (color=getBk(el))=="transparent"){
    color="transparent";bk="transparent"; border=getParentBk(el);btype="t";
    }
else{
    bk=getParentBk(el); border=Mix(color,bk);
    }
d.style.background=bk;
d.className="corners";
p=getPadding(el,"Top");
if(options.find("small")){
    d.style.marginBottom=(p-2)+"px";
    btype+="s"; lim=2;
    }
else if(options.find("big")){
    d.style.marginBottom=(p-10)+"px";
    btype+="b"; lim=8;
    }
else d.style.marginBottom=(p-5)+"px";
for(i=1;i<=lim;i++)
    d.appendChild(CreateStrip(i,side,color,border,btype));
el.style.paddingTop="0";
el.insertBefore(d,el.firstChild);
}

function AddBottom(el,side,options){
var d=CreateEl("b"),lim=4,border="",p,i,btype="r",bk,color;
d.style.marginLeft="-"+getPadding(el,"Left")+"px";
d.style.marginRight="-"+getPadding(el,"Right")+"px";
if(options.find("alias") || (color=getBk(el))=="transparent"){
    color="transparent";bk="transparent"; border=getParentBk(el);btype="t";
    }
else{
    bk=getParentBk(el); border=Mix(color,bk);
    }
d.style.background=bk;
d.className="corners";
p=getPadding(el,"Bottom");
if(options.find("small")){
    d.style.marginTop=(p-2)+"px";
    btype+="s"; lim=2;
    }
else if(options.find("big")){
    d.style.marginTop=(p-10)+"px";
    btype+="b"; lim=8;
    }
else d.style.marginTop=(p-5)+"px";
for(i=lim;i>0;i--)
    d.appendChild(CreateStrip(i,side,color,border,btype));
el.style.paddingBottom=0;
el.appendChild(d);
}

function CreateStrip(index,side,color,border,btype){
var x=CreateEl("b");
x.className=btype+index;
x.style.backgroundColor=color;
x.style.borderColor=border;
if(side=="left"){
    x.style.borderRightWidth="0";
    x.style.marginRight="0";
    }
else if(side=="right"){
    x.style.borderLeftWidth="0";
    x.style.marginLeft="0";
    }
return(x);
}

function CreateEl(x){
return(document.createElement(x));
}

function FixIE(el){
if(el.currentStyle!=null && el.currentStyle.hasLayout!=null && el.currentStyle.hasLayout==false)
    el.style.display="inline-block";
}

function SameHeight(selector,maxh){
var i,v=selector.split(","),t,j,els=[],gap;
for(i=0;i<v.length;i++){
    t=getElementsBySelector(v[i]);
    els=els.concat(t);
    }
for(i=0;i<els.length;i++){
    if(els[i].offsetHeight>maxh) maxh=els[i].offsetHeight;
    els[i].style.height="auto";
    }
for(i=0;i<els.length;i++){
    gap=maxh-els[i].offsetHeight;
    if(gap>0){
        t=CreateEl("b");t.className="fill";t.style.height=gap+"px";
        nc=els[i].lastChild;
        if(nc.className=="corners")
            els[i].insertBefore(t,nc);
        else els[i].appendChild(t);
        }
    }
}

function getElementsBySelector(selector){
var i,j,selid="",selclass="",tag=selector,tag2="",v2,k,f,a,s=[],objlist=[],c;
if(selector.find("#")){ //id selector like "tag#id"
    if(selector.find(" ")){  //descendant selector like "tag#id tag"
        s=selector.split(" ");
        var fs=s[0].split("#");
        if(fs.length==1) return(objlist);
        f=document.getElementById(fs[1]);
        if(f){
            v=f.getElementsByTagName(s[1]);
            for(i=0;i<v.length;i++) objlist.push(v[i]);
            }
        return(objlist);
        }
    else{
        s=selector.split("#");
        tag=s[0];
        selid=s[1];
        if(selid!=""){
            f=document.getElementById(selid);
            if(f) objlist.push(f);
            return(objlist);
            }
        }
    }
if(selector.find(".")){      //class selector like "tag.class"
    s=selector.split(".");
    tag=s[0];
    selclass=s[1];
    if(selclass.find(" ")){   //descendant selector like tag1.classname tag2
        s=selclass.split(" ");
        selclass=s[0];
        tag2=s[1];
        }
    }
var v=document.getElementsByTagName(tag);  // tag selector like "tag"
if(selclass==""){
    for(i=0;i<v.length;i++) objlist.push(v[i]);
    return(objlist);
    }
for(i=0;i<v.length;i++){
    c=v[i].className.split(" ");
    for(j=0;j<c.length;j++){
        if(c[j]==selclass){
            if(tag2=="") objlist.push(v[i]);
            else{
                v2=v[i].getElementsByTagName(tag2);
                for(k=0;k<v2.length;k++) objlist.push(v2[k]);
                }
            }
        }
    }
return(objlist);
}

function getParentBk(x){
var el=x.parentNode,c;
while(el.tagName.toUpperCase()!="HTML" && (c=getBk(el))=="transparent")
    el=el.parentNode;
if(c=="transparent") c="#FFFFFF";
return(c);
}

function getBk(x){
var c=getStyleProp(x,"backgroundColor");
if(c==null || c=="transparent" || c.find("rgba(0, 0, 0, 0)"))
    return("transparent");
if(c.find("rgb")) c=rgb2hex(c);
return(c);
}

function getPadding(x,side){
var p=getStyleProp(x,"padding"+side);
if(p==null || !p.find("px")) return(0);
return(parseInt(p));
}

function getStyleProp(x,prop){
if(x.currentStyle)
    return(x.currentStyle[prop]);
if(document.defaultView.getComputedStyle)
    return(document.defaultView.getComputedStyle(x,'')[prop]);
return(null);
}

function rgb2hex(value){
var hex="",v,h,i;
var regexp=/([0-9]+)[, ]+([0-9]+)[, ]+([0-9]+)/;
var h=regexp.exec(value);
for(i=1;i<4;i++){
    v=parseInt(h[i]).toString(16);
    if(v.length==1) hex+="0"+v;
    else hex+=v;
    }
return("#"+hex);
}

function Mix(c1,c2){
var i,step1,step2,x,y,r=new Array(3);
if(c1.length==4)step1=1;
else step1=2;
if(c2.length==4) step2=1;
else step2=2;
for(i=0;i<3;i++){
    x=parseInt(c1.substr(1+step1*i,step1),16);
    if(step1==1) x=16*x+x;
    y=parseInt(c2.substr(1+step2*i,step2),16);
    if(step2==1) y=16*y+y;
    r[i]=Math.floor((x*50+y*50)/100);
    r[i]=r[i].toString(16);
    if(r[i].length==1) r[i]="0"+r[i];
    }
return("#"+r[0]+r[1]+r[2]);
}

</script>
<script type="text/javascript">
window.onload=function(){
RoundedCorners("div#box","big");
}
</script>

<div id="box">
  <h1>Runde Ecken rocken!</h1>
    <p>Dieses Beispiel soll die Darstellung von browserunabhängigen
    runden Ecken ohne Grafiken verdeutlichen.<br>
    <a href="http://www.webmasterpro.de/coding/article/browseruebergreifende-runde-ecken-ohne-css3-oder-grafiken.html">Zurück zum Artikel</a></p>
</div>

</body></html>
Über den Autor: meggs
hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
Profilseite betrachten

Kommentare: Browserunabhängige runde Ecken ohne Grafiken

Neuen Kommentar schreiben
Wie mache ich die Box transparent?
Beantworten

Der Befehl:

RoundedCorners("div#box,div#navi","transparent");

bringt mich nicht weiter, weil da nichts passiert!

Die: filter:alpha(opacity=90); /* IE */
-moz-opacity: 0.90; /* Mozilla */
opacity: 0.90; /* Opera */

sind auch unbrauchbar, da sie die ganze box transparent machen.

Und Hintergrundbild definieren klappt auch nicht...

gruß

coreone am 30.05.2009 um 19:01
Re: Wie mache ich die Box transparent?
Beantworten

sind die runden ecken so extrem wichtig? in Firefox2, Firefox3, Safari3, Safari4 funktioniert (-..-)border-radius und dann muss auch opacity funktionieren. "transparent" ist hier gleichbedeutend mit opacity: 0;. es ist hier also keine alphatransparenz möglich. wenn dus mit border-radius machst und das einfach auf ein div anwendest klappt auch alphatranparenz

meggs am 30.05.2009 um 21:11
Re: Wie mache ich die Box transparent?
Beantworten

Meine Frage war eigt. ob ich im Script selbst transparenz einstellen kann?

Die runden Ecken und die Transparenz sind sehr wichtig, für das Projekt. Nur, muss es auch im IE funktionieren und nicht nur firefox und co.

Ein tipp für eine andere Methode, mit der ich das umsetzten kann, würde mich auch weiter bringen. xD

gruß

coreone am 31.05.2009 um 10:53
Re: Wie mache ich die Box transparent?
Beantworten

du kannst die runden ecken auch mit grafiken machen. 4 grafiken, die je in einem viertel eines kreises bestehen, gleich mit der richtigen transparenz. dazu die box mit einer css-transparenz.

meggs am 31.05.2009 um 15:01
Re: Wie mache ich die Box transparent?
Beantworten

okay, danke =) bei dieser technick überlappen sich bei mir die grafiken und es kommt zum hell/dunkel kontrast. xD

hatte gehofft man könnte etwas im script selbst umstellen, damit die box transparent wird. Mit java script sollte sowas doch möglich sein!?

coreone am 31.05.2009 um 17:18
Re: Wie mache ich die Box transparent?
Beantworten

Ich habe eine Lösung für mein Problem!

Und zwar funktioniert, dass was ich wollte mit dieser Methode:

http://www.atblabs.com/jquery.corners.html

Meiner Meinung nach um einiges einfacher und mit weniger code verbunden als diese Methode hier.

gruß

coreone am 01.06.2009 um 16:59
Bezug zu nifty Cube
Beantworten

hi,

ich habe als script dieses: http://www.html.it/articoli/niftycube/index.html benutzt und wollte nochmal wissen ob das das selbe ist. bzw ist das erweitert? oder welche version ist als basis für diese hier verwendet worden(die ählichkeiten sind schon sehr deutlich)?

enaut am 03.08.2008 um 14:19
Sehr guter Artikel
Beantworten

Ob nun Grafik oder Code besser ist, das muss jeder für sich entscheiden. Ich finde, dieser Artikel ist jedoch unstrittig sehr gut ausgearbeitet.

Benutzer gelöscht am 30.07.2008 um 08:15
Re: Sehr guter Artikel
Beantworten

vielen dank.

die von mir bevorzugte form ist weiterhin: border-radius.

meggs am 31.05.2009 um 22:31
Runde Ecken sind eine Wissenschaft für sich...
Beantworten

Grafiken sind definitiv viel einfacher, aber wenn man mit Grafiken die Breiten und Höhen des Containers variabel halten möchte, sind mehrere Divs von nöten. Wenn man nun viele solcher Konstrukte bspw. auf einer Portalseite platzieren würde, würde die Ladezeit stark zu nehmen. Dann aber nicht wegen der Datenmenge, sondern wegen dem Rendering der ganzen Divs. Da muss ich mich mal für diese Methode aussprechen wenn es darum geht exzessiv variable Boxen zu nutzen und gleichzeitig die Ladezeiten gering zu halten.

Braucht man keine Flexibilität kann man finde ich getrost die JS Lösung links liegen lassen. Wobei wenn man das einmal aufgesetzt und zur Verfügung stehen hat, der Einsatz wohlmöglich wirklich schneller ist als mit Grafiken, da man alles direkt zur Verfügung stehen hat.

Sind finde ich eine Reihe von Pro's und Contra's .... :-)

Phil Foreman am 21.05.2008 um 09:21
Re: Runde Ecken sind eine Wissenschaft für sich...
Beantworten

Mhm ich weiß nicht so recht hast du dir schonmal angeschaut wie viele divs dir das script erzeugt? also wenn das dein argument ist dann sind grafiken wirklich besser.

Der Hauptvorteil ist meiner meinung nach halt einfach, dass es so schön flexibel ist.

enaut am 03.08.2008 um 14:22
Re: Runde Ecken sind eine Wissenschaft für sich...
Beantworten

Ich denke man kann es auch so angehen, dass man halt CSS verwendet und bei den Browsern, die keine Eigenschaft für runde Ecken haben, halt darauf verzichten. Ist ja auch nicht der Weltuntergang. Hier bei WMP wird das so gemacht.

Philipe Fatio am 22.05.2008 um 10:17
Re: Runde Ecken sind eine Wissenschaft für sich...
Beantworten

Hier bei WMP wird das so gemacht.

Und funktioniert wie ich finde wirklich gut. ;-)

David Danier am 22.05.2008 um 12:40
Re: Runde Ecken sind eine Wissenschaft für sich...
Beantworten

Und funktioniert wie ich finde wirklich gut. ;-)

joa für ff3- und safari-user :)

der safari 2 macht übrigends die runden ecken schöner als der ff2 (und der ie8 wird die immernoch überhaupt nicht können :)

meggs am 22.05.2008 um 14:27
Re: Runde Ecken sind eine Wissenschaft für sich...
Beantworten

die vom FF2 sind zwar nicht schön, aber selten.

Trägst du den Safari2 bei border-radius noch in die Kompatibilitätsliste ein? Ohne es gesehen zu haben will ich nicht auf ja oder fast entscheiden müssen.

Und funktioniert wie ich finde wirklich gut. ;-)

joa für ff3- und safari-user :)

der safari 2 macht übrigends die runden ecken schöner als der ff2 (und der ie8 wird die immernoch überhaupt nicht können :)

Holger V am 22.05.2008 um 15:19
Re: Runde Ecken sind eine Wissenschaft für sich...
Beantworten

ahh is falsch..stimmt.. danke änders gleich

was meinst du mit entscheiden müssen?

meggs am 22.05.2008 um 16:13
Re: Runde Ecken sind eine Wissenschaft für sich...
Beantworten

ob das geht oder nicht

ahh is falsch..stimmt.. danke änders gleich

was meinst du mit entscheiden müssen?

Holger V am 23.05.2008 um 22:56
Re: Runde Ecken sind eine Wissenschaft für sich...
Beantworten

Naja, bei Browsern, die es nicht unterstützen einfach drauf zu verzichten halte ich nicht für so sinnvoll. Da muss man eben noch etwas zurück stecken mit CSS Argumenten und auf Grafiken umsteigen, damit es auf möglichst vielen Browsern möglichst ähnlich (Betonung auf ähnlich) aussieht.

In den meisten Fällen, die ich bei uns hier kenne, sind nämliche Rounded Boxes meist ein zentrales Gestaltungselement, das kann man dann nicht einfach in einem Browser wie dem IE unter den Tisch fallen lassen. Es sei denn man ist Hardliner ;-)

Lg

ob das geht oder nicht

ahh is falsch..stimmt.. danke änders gleich

was meinst du mit entscheiden müssen?

Phil Foreman am 26.05.2008 um 09:40
Zu komliziert
Beantworten

Ist ja viel einfacher wenn man Grafiken verwendet. Wird ja selten der Fall sein, wo man nicht weiss, welche Farbe etc. Ebenfalls hat man so keine oder nur schlechtes Anti-Aliasing. Kann aber sehr wohl in Ausnahmefällen praktisch sein.

Philipe Fatio am 21.05.2008 um 09:12
Re: Zu komliziert
Beantworten

einfacher ja. aber lauter so krimskrams-arbeit. da ist das doch viel lässiger. =P

außerdem ist es viel einfacher das design abzuändern: bei nem neuen vorder oder vordergrund braucht man nur einmal den hex-wert zu ändern und nicht 20 ecken neu zu machen weil die farbe nicht mehr passt. benutzt man dann auch noch keine pngs weil die transparenz im ie nicht unterstützt wird muss mann die hintergrundfarbe auch jedes mal anpassen. benutzt man aber gifs. fehlt anti-aliasing total. dann die größe: man hat ein layout geschaffen und eckgrafiken gemacht. jetzt fällt einem auf, dass die einen viel zu großen radius haben. mit grafiken: grafiken neu gemacht werden und werden kleiner, müssen also alle wieder mühsam mit css eingepasst werden. mit dieser methode hier braucht man nur einen einzigen wert ändern. man hat zwar etwas copy/paste arbeit (die coding arbeit muss ja nur einmal gemacht werden - und hier ist sie =D) aber im großen und ganzen geht es schneller und ist vor allem viel viel schneller änderbar. klar geworden?

Ist ja viel einfacher wenn man Grafiken verwendet. Wird ja selten der Fall sein, wo man nicht weiss, welche Farbe etc. Ebenfalls hat man so keine oder nur schlechtes Anti-Aliasing. Kann aber sehr wohl in Ausnahmefällen praktisch sein.

meggs am 21.05.2008 um 15:45
Re: Runde Ecken sind eine Wissenschaft für sich...
Beantworten

Eine intelligentere Lösung wäre: Einfach im CSS runde Ecken definieren. Nur diejenigen Browser, die runde Ecken nicht uterstützen, schauen im CSS nach, welche Elemente runde Ecken definiert haben und wie gross der Radius ist. Danach dem entsprechend die Ecken per JS anpassen. Somit entlastet man diejenigen, die gute Browser verwenden.

Philipe Fatio am 22.05.2008 um 10:21
Re: Runde Ecken sind eine Wissenschaft für sich...
Beantworten

gute idee

aber wie filtert man das? würde dann nicht border-radius durch js überschrieben werden?

meggs am 22.05.2008 um 11:00
Re: Runde Ecken sind eine Wissenschaft für sich...
Beantworten

notfalls serverseitig

gute idee

aber wie filtert man das? würde dann nicht border-radius durch js überschrieben werden?

Holger V am 22.05.2008 um 13:02
Re: Runde Ecken sind eine Wissenschaft für sich...
Beantworten

Eine weitere Möglichstkeit wäre eine kleine Javascriptweiche, für den IE vielleicht Conditional Comments...

notfalls serverseitig

gute idee

aber wie filtert man das? würde dann nicht border-radius durch js überschrieben werden?

Phil Foreman am 26.05.2008 um 09:41
Guter Aufwand
Beantworten

Ganz schöner Aufwand dafür, dass man nur die Ecken umbiegen möchte :)

Fabian Ziegler am 21.05.2008 um 08:56
Re: Guter Aufwand
Beantworten

mit welcher methode habt ihr die ecken im wmp realisiert?

Aiden Tailor am 23.05.2008 um 09:24
Re: Guter Aufwand
Beantworten
Zitat von: Hendrik Maus

mit welcher methode habt ihr die ecken im wmp realisiert?

mit border-radius wurde das gemacht

meggs am 23.05.2008 um 10:36