Tool
Spanky Corners 1.1 beta
The SitePoint Corners Store
About
Generator
To use the generator select your preferred foreground color (hex), background color (hex), corner radius (pixels: 5-60) and hit 'Spank Me!'.
The generator will reload 'wearing' your selection while providing you 4 corner GIFs, the basic CSS and the HTML to obtain the effect.
Or if you're lazy, try these preset values.
Code
The HTML:
Here is the HTML in it's simplest form:
<div class="rounded">
<h4>Heading</h4>
<p>Lorem ipsum... </p>
</div>
Your Images
Here are the corner images:
Here is the generated css [download the css file]:
/**
* Spanky Corners -- CSS Rounded Corners by SitePoint
*
* Auto generated code
* Details @ http://tools.sitepoint.com/spanky/
* @version 1.1b
*/
body {
background-color: #fafaff;
color: #dddddd;
font-size:62.5%; /* Explain @ www.clagnut.com/blog/348/ */
}
/* all curved boxes get the bottom-left corner */
div.rounded {
background: #8f00ff url(bl_38_8f00ff_fafaff.gif) no-repeat bottom left;
color: #dddddd;
position: relative;
padding-top: 0;
padding-bottom: 38px;
margin: 1em 10px 0 0 ;
height:100%
}
/* all elements in 'div.rounded' gets the B-R corner */
div.rounded * {
background: #8f00ff url(br_38_8f00ff_fafaff.gif) no-repeat bottom right;
color: #dddddd;
padding: 1em 2em 38px 0;
margin: 0 0 -38px 38px;
height:100%;
}
/* Scrub that B-R corner from all elements *2+* levels deep*/
div.rounded * * {
padding: 0;
margin: 0;
background: none;
color: #dddddd;
height:auto
}
/* Set up some H's as 'box heads' with the T-R and T-L corners */
div.rounded h1, div.rounded h4 {
color: #fafaff;
background: #8f00ff url(tr_38_8f00ff_fafaff.gif) no-repeat top right;
display: list-item;
list-style-image: url(tlc_38_8f00ff_fafaff.gif);
list-style-position: inside;
list-style-type:none;
padding: 0;
margin: 0;
position: relative;
}
div.rounded h1 {
font-size: 3.2em;
}
div.rounded h4 {
font-size: 2em;
}
IE Conditional Comments
Download the IE only style sheet, save them as rounded-ie.css and add the following conditional comments in the head of your document
<!--[if IE]>
<link type="text/css" rel="stylesheet" href="rounded-ie.css" media="screen" />
<![endif]-->
Spanky Corners is a work in progress, so if you have a suggestion or improvement, let us know.
Spanky Corners
What?
'Spanky Corners' is an experimental technique for using only CSS to produce 'round-cornered content boxes' with semantically pure markup. It does not require JavaScript to work
Why?
SpankyCorners has a number of advantages over alternative rounded corners methods.
- Spanky requires no extra HTML markup to act as 'CSS hooks'.
- Spanky doesn't rely on a set width box.
- Spanky doesn't require JavaScript.
- Spanky corners can have (practically) any radius with no significant increase to file size.
- Spanky requires only 4 small GIFs.
- We generate the required images for you while you wait!
News
We're always happy to hear any feedback/suggestions for Spanky via this blog entry.
Update: 8 May, 2006: Fixed a Firefox 1.0 render bug which was making the site look wacky. Fixed a mistake in the download code that stopped IE from rendering properly.
Update: 3 May, 2006: Solved the IE6 scaling problem. Scale to your heart's content. However it does sacrifice a little padding control on the headings in IE. Also made the whole kit'n'caboodle downloadable as a ZIP file (thanks to fine work by Lox).
Update: 28 April, 2006: A few changes. Most obviously we've moved the generator into a more 'SitePoint-like' setting. Spanky Corners now also zoom smoothly up and down in all browsers except IE6, where the top left corner shows a gap when the text is scaled up. Solutions are very welcome.
Update: 19 April, 2006: We had trouble getting IE6-7 to work with corner radii less than 17px (IE reserves that much space for it's bullets), but Matt Magain has come up with a nice solution. It does require IE's Conditional Comments at this stage.
Update: 15 April, 2006: Updated the way the images are generated and the code algorithms. Should work reliably in IE6-IE7 on most settings -- with the exception of very large or very small curves. However manual tinkering with the code should get virtually any setting to work.
Launch: 13 April, 2006 The Spanky Corners Generator doesn't yet work flawlessly in IE6 and IE7 (working on it right now) though the technique itself does. You're welcome to play with the generator as we work on it.
This idea was first demonstrated in the April 2006 edition (#20) of the SitePoint Design View.
NEW! - March 2006
The JavaScript Anthology: 101 Essential Tips, Tricks & Hacks
Take control with the ultimate JavaScript toolkit!
Download the FREE sample chapters
CSS Gurus
The CSS Anthology: 101 Essential Tips, Tricks & Hacks
101 real-world CSS problems and answers!
Download the FREE sample chapters
SitePoint Books
Download sample chapters of any of our popular books.