nicht angemeldet
Hallo Zusammen,
um runde Ecken zu erzeugen, ist ja entweder eine CSS3 Unterstützung nötig oder Bildchen. CSS3 bietet außer Mozilla (und der auch nur sehr mariginal) eigentlich keiner. Bilder erhöhen die Ladezeiten und es zereißt einem auch das Design, wenn einer der Klienten die Graphikdarstellung ausgeschaltet hat.
Unangenehme Löcher gibt's dann ;-)
Da dachte ich mir: das geht doch auch mit reinem HTML.
Mit ein Paar DiVs und farbigem Hintergrund.
Das Problem ist das Klötzchenhafte. Antialiasing über Elementgrenzen hinaus dürfte wohl erstmal nicht zu erwarten sein, oder? ;-)
Ich habe das mal zur Anschauung mit Javascript generiert.(Aufgrund Math.round wird das sogar noch extremer mit den Klötzchen.). Bei den für runde Ecken üblichen Radien ist das übrigens dann auch von Hand zu machen, dann sieht es nicht ganz so schlimm aus, aber immer noch zuviel.
(Vorsicht! Resourcenfresser! Braucht bei mir mit Mozilla 0.9.8 satte 13 Sekunden. Aber gut, es ist ein uralter P200 ;-)
---snip---
<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de" xml:lang="de">
<head>
<title>Kreis</title>
<meta http-equiv="content-type" lang="de" content="text/html; charset=ISO-8859-1" />
<script type="application/x-javascript">
<!--
//<![CDATA[
function setPoint(_x, _y) {
var x = _x + "px";
var y = _y + "px";
var Main = document.getElementById("main");
var newDot = document.createElement("div");
var Att = document.createAttribute("style");
Att.nodeValue = "position:absolute;\ top:50px;\ left:50px;\ width:2px;\ height:2px;\ background-color:green;";
newDot.setAttributeNode(Att);
Main.appendChild(newDot);
newDot.style.top = x;
newDot.style.left = y;
}
function makeOval (_radius, _top, _left, _hor, _ver, _degree, _clock) {
var Radius = _radius;
var Top = _top;
var Left = _left;
var Hor = _hor;
var Ver = _ver;
var Degree = (_degree * (Math.PI * 2));
var Clock = (_clock * (Math.PI * 2));
var Grad = 0.01;
var x = 0;
var y = 0;
while(Grad <= Degree){
x = Math.round(Top + ( (Radius + Ver) * Math.cos(Grad+Clock)));
y = Math.round(Left + ( (Radius + Hor) * Math.sin(Grad+Clock)));
setPoint(x, y);
Grad += 0.01;
}
}
function makeRoundEdges(){
makeOval(50, 150,150, 0,0 ,0.25, 0.5);
makeOval(50, 150,350, 0,0 ,0.25, 0.25);
makeOval(50, 350,350, 0,0 ,0.25, 0);
makeOval(50, 350,150, 0,0 ,0.25, 0.75)
}
//]]>
//-->
</script>
</head>
<body onload="javascript:makeRoundEdges()">
<div id="main">
</div>
<div style="position:absolute;top:150px;left:150px;width:200px;height:200px;background-color:#55CC55;" >
<div style="margin:40px">
Echt! <br />
Keine Bilder! <br />
Reines XHTML strict! <br />
Aber zugegeben: mit Javascript generiert ;-)
</div>
</div>
<div style="position:absolute;top:151px;left:100px;width:2px;height:200px;background-color:green;" >
</div>
<div style="position:absolute;top:150px;left:400px;width:2px;height:200px;background-color:green;" >
</div>
<div style="position:absolute;top:100px;left:150px;width:200px;height:2px;background-color:green;" >
</div>
<div style="position:absolute;top:400px;left:150px;width:200px;height:2px;background-color:green;" >
</div>
</body>
</html>
--snap---
Hat jemand eine Idee, wie man das sauber verlaufen lassen kann?
Auf beiden Seiten um ein Pixel versetzt eine hellere Farbe anlegen ist keine ganz so schlechte Idee, erhöht nur leider die Datenmenge um das dreifache.
Geht das evt innerhalb der DIVs?
Vorschläge?
so short
Christoph Zurnieden