CSS Flexible rounded corners box with one (single) background image |
| Monday, 23 June 2008 | ||||
|
Here's my technique for rendering rounded corner boxes for Joomla. It's flexible, it can stretch both horizontally and vertically. I use one large background image cleverly positioned in each of module's nested divs. One image means one HTTP request, and this is as good as it gets for loading speed. The only limitation with this technnique is that a module cannot be infinitely large, it must be a bit smaller than the background image. The image i'm using is 775px wide x 1969px tall, so it should accomodate very large modules. It only weights 15.6KB There are no IE hacks, it just works in all browsers(tested in Firefox, Opera 9, IE6, IE7). So, let's get on to the CSS:
/*TeachMeJoomla's flexible rounded corners module CSS*/ /*image setup */ div.module-green, div.module-green div{ background: url('images/rounded_green.jpg'); } /*replaced with TeachMeJoomla's single image technique*/ div.module-green { padding: 0px 0px 0px 0px; margin:0px 0px 0px 0px; background-repeat:no-repeat; background-position:bottom left; height:1%; width:auto; } div.module-green div { margin:0px 0px 0px 13px; background-repeat:no-repeat; background-position: bottom right; padding: 0px 0px 13px 0px; width:auto; } div.module-green div div { background-position: top right; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } div.module-green div div div { margin:0px 13px 0px -13px; background-position: top left; padding: 13px 0px 0px 13px; } /*reset nested divs*/ div.module-green div div div div { padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; background:none; background-image: none; background-position: top left; background-repeat: repeat; background-color: transparent; width:100%; }
Here's the HTML, generated from your template by
mosLoadPosition('module_position',-3)
or (Joomla! 1.5)
<jdoc:include type="modules" name="module_position" style="rounded" headerLevel="3" />
<div class="module-green"> <div> <div> <div> <p> Look! I'm a flexible rounded corners box with 1 single background image! here's more HTML </p> <ul> <li>item</li> <li>item</li> <li>item</li> <li>item</li> </ul> </div> </div> </div> </div>
And here's the final rendered box. Look! I'm a flexible rounded corners box with 1 single background image! Here's more HTML
Are you a Joomla/PHP/Web developer? You may want to check our freelance marketplaces list.
Hi, Firstly, thank you SO much for this tutorial. I have been looking around the web for some time to try and get rounded corners working 2. @dave: DOCTYPE29-08-2008 11:47 Tudor Try using a strict DOCTYPE I tried this out and it worked great for firefox, but, no go for ie7. Kan't seem to figure out why... You could actually have the browser draw them by using canvas and it's IE "port". 5. What about transparent corners28-06-2008 05:19 Am using CSS very similar to yours, but my problem is that my client's site has watermark background, and I need transparent corners. I've done the graphic, that's not the problem, it's just that the top level div background is seen under the bottom corners. Without trying your solution, which is nice and clean, it doesn't look to quite do it. I can horizontally margin the top two divs, that's fine. But the bottom corners remain a mystery. Any ideas welcome! Write Comment |
||||
| Last Updated ( Thursday, 18 June 2009 ) | ||||
Joomla stuff
Newsletter
Auto tags
joomla rounded corners
flexible round corner
css background image corner
rounded corners joomla
css background image rounded corners
0px 0px repeat transparent css
background image rounded
rounded corner background image
css rounded background image
joomla template rounded corners
css module box
joomla 1.7 rounded buttons
css rounded corners with background image
background image joomla module
rounded borders joomla css
newsletter box css
flexible background
joomla rounded menu
images rounded corners joomla
rounded corner green
newsletter rounded corners
flexible background css







and I can say right away that this was the simplest and most effective I have found so far.
