StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>First of all I like to mention that there is no perfect solution for this until IE9, where the CSS border-radius is gonna be implemented.</p> <p>Here are the different solutions you have until then:</p> <p>You could use one of many JS scripts that simulates rounded corners. But none of them implement the shadow properly. Here is the list of the scripts i tried and my conclusions. All of this scripts have something in common, they are placing additional elements in your HTML to give you the illusion of rounded corners.</p> <ul> <li><p><a href="http://dillerdesign.com/experiment/DD_roundies/#" rel="noreferrer"><strong>DD Roundies</strong></a>: This script is very lightweight an works pretty well. It works without any framework and plays nice with jQuery & Prototype (i assume its working well with the others to, but i can't tell for sure). It uses the CSS3 proprieties on browsers who support CSS3. And uses the same hack as all the others for IE. The antialiazing on this one works very good. <em>edit</em> i have to correct my self here. This one works with a HTC File. It does not placing additional elements in your HTML.</p></li> <li><p><strong><a href="http://www.curvycorners.net/" rel="noreferrer">Curvy Corners</a> and the <a href="http://blue-anvil.com/jquerycurvycorners/test.html" rel="noreferrer">jQuery Plugin Curvy Corners</a>:</strong> I like this one to. The antialiazing is working very good to. And it plays nice with background images. But it does not play nice with CSS3 shadows. It does not check if your Browser support CSS3 and always uses the ugly solution of adding elements to your dom.</p></li> <li><strong><a href="http://www.html.it/articoli/niftycube/index.html" rel="noreferrer">Nifty Corners</a> & <a href="http://www.methvin.com/jquery/jq-corner-demo.html" rel="noreferrer">jquery Corner</a>:</strong> Both have a bad antialiazing and the corners look very edgy. jQuery corners has trouble to handle background images.</li> </ul> <p>Here is the reason why none of them is a proper solution in my opinion:</p> <p><a href="http://meodai.ch/stackoverflow/curvy.png" rel="noreferrer">curvy corners dom messing screenshot http://meodai.ch/stackoverflow/curvy.png</a> curvy dom mess</p> <p><a href="http://meodai.ch/stackoverflow/nifty.png" rel="noreferrer">nifty dom mess http://meodai.ch/stackoverflow/nifty.png</a> nifty dom mess</p> <p>There are a few other but i think they are not mentionable at this place.</p> <p>As you can see they are adding a lot of elements to your dom. This can cause trouble if you want to add rounded corners to a huge amount of elements. It can make some older browser / computers crash. For the shadows its pretty much the same problem. There is a jQuery plugin that handles shadows on boxes and fonts: <a href="http://dropshadow.webvex.limebits.com/" rel="noreferrer">http://dropshadow.webvex.limebits.com/</a></p> <p><em>My conclusion</em>: If i am doing a small budget job, IE users just have edges and no shadows. If the client has some money to spend, so i am doing it with CSS only and i make images for every corner. If they absolutely have to be there but there is no time or no money to do it, i use one of the mentioned JS Scripts DD_roundies with preference. Now its up to you.</p> <p>PS: IE users are used to ugly interfaces, they don't gonna see that the corners and shadows are missing anyway :P </p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload