diff options
Diffstat (limited to 'wired/old/published/Webmonkey/roundedcornerscss.txt')
| -rw-r--r-- | wired/old/published/Webmonkey/roundedcornerscss.txt | 1 |
1 files changed, 1 insertions, 0 deletions
diff --git a/wired/old/published/Webmonkey/roundedcornerscss.txt b/wired/old/published/Webmonkey/roundedcornerscss.txt new file mode 100644 index 0000000..ff4b8bf --- /dev/null +++ b/wired/old/published/Webmonkey/roundedcornerscss.txt @@ -0,0 +1 @@ +While you'd be hard pressed to come up with any single design tic that defines a "web 2.0 look," nothing screams web 2.0 quite like rounded corners. We're not sure how the trend started, but even now that rounded corners have most likely jumped the shark, clients still clamor for them.
It's no surprise then that there are literally dozens, if not hundreds of ways to create the rounded corner look. Your options range from the very primative (just create static backrounds in photoshop and apply them on a per-element basis) to the very progressive -- CSS 3 can do rounded corners with just one line of code.
Unfortunately not all browsers support CSS 3, which means, unless you're doing a fun site for yourself, you're probably going to have to resort to some workarounds.
We decided to dig through the many options for creating rounded corner elements and came up with a few winners that stand ouut from the bunch. These methods offer the best balance between simplicity and semantically valid markup (for the most part) while keeping the images to a minimum (read, faster page loads).
The options here range from pure CSS to JavaScript-based solutions, hopefully offering something for everyone.
== The pure CSS method ==
There are a couple of ways to do rounded corners using just CSS and a background image. The trick is to use one or several images larger than the largest element you want a box around and then position them using the <code>background-image</code> property.
Our favorite method, created by designer Scott Schiller, is known by the sexy moniker, [http://www.schillmania.com/content/projects/even-more-rounded-corners/ Even More Rounded Corners With CSS]. It allows for fluid rounded corner dialogs and supports borders, alpha transparency, gradients and patterns.
Here's what the most basic HTML looks like:
<pre>
<div class="dialog">
<div class="content">
<div class="t"></div>
<!-- Your content goes here -->
</div>
<div class="b">
<div></div>
</div>
</div>
</pre>
Then you can apply styles like this (pay particular attention to Schiller's inline comments which highlight some of the trickier parts):
<pre>
.dialog {
position:relative;
margin:0px auto;
min-width:8em;
max-width:760px; /* based on image dimensions */
color:#fff;
z-index:1;
margin-left:12px; /* default, width of left corner */
margin-bottom:0.5em; /* spacing under dialog */
}
.dialog .content,
.dialog .t,
.dialog .b,
.dialog .b div {
background:transparent url(my-image.png) no-repeat top right;
_background-image:url(dialog2-blue.gif);
}
.dialog .content {
position:relative;
zoom:1;
_overflow-y:hidden;
padding:0px 12px 0px 0px;
}
.dialog .t {
/* top+left vertical slice */
position:absolute;
left:0px;
top:0px;
width:12px; /* top slice width */
margin-left:-12px;
height:100%;
_height:1600px; /* arbitrary long height, IE 6 */
background-position:top left;
}
.dialog .b {
/* bottom */
position:relative;
width:100%;
}
.dialog .b,
.dialog .b div {
height:30px; /* height of bottom cap/shade */
font-size:1px;
}
.dialog .b {
background-position:bottom right;
}
.dialog .b div {
position:relative;
width:12px; /* bottom corner width */
margin-left:-12px;
background-position:bottom left;
}
.dialog .hd,
.dialog .bd,
.dialog .ft {
position:relative;
}
.dialog .wrapper {
/* extra content protector - preventing vertical overflow (past background) */
position:static;
max-height:1000px;
overflow:auto; /* note that overflow:auto causes a rather annoying redraw "lag" in Firefox 2, and may degrade performance. Might be worth trying without if you aren't worried about height/overflow issues. */
}
.dialog h1,
.dialog p {
margin:0px; /* margins will blow out backgrounds, leaving whitespace. */
padding:0.5em 0px 0.5em 0px;
}
.dialog h1 {
padding-bottom:0px;
}
</pre>
As you can see the CSS is far from simple, but if you're looking for a solution that allows complex stuff like alpha transperancy and gradient images, the CSS is naturally going to get a bit tricky. Have look at Schiller's [http://www.schillmania.com/projects/dialog2/ example page] to see these techniques in action.
The main downside to this particular method is that you end up with a bit of non-semantic markup -- specifically the three divs that, in a perfect world, shouldn't be there. If that bothers you there are other, though somewhat less robust methods to achieve rounded corners using just CSS.
Some other methods we've used include [http://www.spiffycorners.com/ SpiffyCorners], though it too uses a bit of semantically questionable markup. There's also the ever popular [http://modxcms.com/simple-rounded-corner-css-boxes.html "ThrashBox"] method with is more semantic, but uses more images to achieve it's effects.
== JavaScript ==
There are quite a few very nice JavaScript libraries that can handle the rounded corners dilemma. It was hard to pick just one, but we settled on curvyCorners because it's relatively lightweight, requires almost no effort on your part and has a very slick [http://blue-anvil.com/archives/anti-aliased-rounded-corners-with-jquery JQuery plugin].
To use curvyCorners just head over to the site and [http://www.curvycorners.net/downloads.php download the latest version]. Then upload that file to your site and include the script in your page's head tags:
<pre>
<script type="text/JavaScript" src="rounded_corners.js"></script>
</pre>
Once you've got curvyCorners loading, it will automatically round any specified div tags; the only thing you need to do is call the script and set a few options. Here's some sample code:
<pre>
<script type="text/JavaScript">
window.onload = function()
{
settings = {
tl: { radius: 10 },
tr: { radius: 10 },
bl: { radius: 10 },
br: { radius: 10 },
antiAlias: true,
autoPad: false
}
var divObj = document.getElementById("myDiv");
var cornersObj = new curvyCorners(settings, divObj);
cornersObj.applyCornersToAll();
}
</script>
</pre>
Notice that we've set the round radius to 10 pixels and applied it the a div with the id "myDiv." Just replace myDiv with the names of the divs you want to round and you're all set. For more details and some examples be sure to check out the [http://www.curvycorners.net/examples.php curvyCorners site].
CurvyCorners gives you rounded corners with very little effort and doesn't rely on large images with tricky CSS. It does, however, require JavaScript and falls apart for users that have it turned off.
== CSS 3, rounded corners revolution ==
As you have probably figured out right now, creating rounded corners requires some amount of compromise -- either in bulky HTML or by using JavaScript as a workaround. But the future is looking quite bright. CSS 3 makes creating rounded corners dead simple, only one line of code necessary:
<pre>
border-radius: 10px;
</pre>
Of course only a handful of browsers currently support border radius (see our guide, [http://www.webmonkey.com/tutorial/Get_Started_with_CSS_3 Get Started with CSS 3], for more details on how to create rounded corners and more using CSS 3), which means for most sites it isn't a viable option.
But isn't it nice to know that someday, in a galaxy far, far away rounded corners will be easy? Of course by then they'll just look "so 2006."
\ No newline at end of file |