design patterns and UI

Custom Corners Boxes with Drop Shadow

The following criteria were used to develop the Rounded Corners CSS solution.

Easy to implement: Ideally rounded corners can be implemented with the addition of a simple class added to a block level element
Liguid and modular code: The rounded boxes should be portable within the various ACS site properties
Hi performance on low end computers: A number of the solutions found on the internet use fairly computationally advance JS to achieve the rounded corners effect. While this is not apparent on a page with only a few boxes, the use of numerous boxes could adversely affect performance particularly on older computers.; the JavaScript solution employed requires little computation and uses the high performance jQuery library to achieve its effect.
Easily customized through CSS themes: The solution should be easy to alter and is designed using only a few lines of CSS; the backgrounds can be altered easily. Further documentation can be found on this page explaining how to create new corner effects.
Accommodates: drop shadows, unique image boarders, background images, colors and gradients.: Because the design call for drop shadows this solution was developed. If drop shadows are not required I recommend the use of the excellent CuryCorners.
Small file size: The following design pattern can in its must compact form be delivered in 2kb, which is extremely compact.
Requires images and CSS: While the rounded corners design can be delivered without JavaScript it is strongly recommended that JavaScript be enabled. At this time of this writing 98.5% of vistior to ACS have javascript enabled and so much of the site currently requires JavaScript the use of js as a requirement is acceptable provided that the rounded corners are a progressive enhancement feature. This means that users with JS turned off with simply get a version of the page without rounded corners.

View Source

Rounded Corners Box (Basic)

This is the most basic usage of the rounded corners box. By default the box will appear with a slight drop shadow and a subtle inner gradient. The default theme is ui-theme-light.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tempor arcu a quam consequat rutrum. Donec pharetra. Suspendisse facilisis purus sit amet tellus. Quisque fermentum, mi vel lacinia porttitor, tellus neque gravida libero, vitae aliquam enim eros id est. Nulla facilisi. Ut euismod justo quis elit. Donec leo. Morbi malesuada. Nam molestie leo quis libero. Nam at enim a nisi convallis pretium. Praesent sit amet mauris. Donec bibendum pellentesque sem. Nulla odio. Curabitur lectus nisi, eleifend quis, imperdiet quis, dignissim quis, eros. Sed tincidunt, est vulputate varius congue, lacus nibh scelerisque nisl, ac mattis metus augue quis tellus. Nullam feugiat, tortor eget rutrum pellentesque, nisi libero consequat diam, vel facilisis ante lorem eu nunc.

View Source

<H2> with Sample HTML

The example below demonstrates a basic rounded corners box with contistently styled <H2> heading. Note the the <H2> expands with the outer box both horizontaly and verticaly so titles may be multiline if nessesary.

To create a constistently style heading for the rounded corners box use the following HTML:

<h2><div>Your Title Here</div></h2>

The additional <divs> tags are required for the sliding doors CSS technique employed here to work.

HTML sample content aligns with the <H2> tags, and inherits its position based on the .rbc class assignment which can be adjusted with the theme section of the CSS.

                .rbc { padding-left: 6px; padding-right: 8px; }

Adjusting the padding should be done within the theme comments in the CSS

Header

Sample Image 200 x 218 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tempor arcu a quam consequat rutrum. Donec pharetra. Suspendisse facilisis purus sit amet tellus.

Praesent ut justo vel urna placerat commodo.
Aliquam vel libero vitae dui hendrerit tristique.
Etiam eget tellus vel leo convallis sollicitudin.
Integer nec nulla a nisl sagittis aliquam.
Proin auctor tortor in metus volutpat fringilla.
Nunc egestas iaculis odio.

Quisque fermentum, mi vel lacinia porttitor, tellus neque gravida libero, vitae aliquam enim eros id est. Nulla facilisi. Ut euismod justo quis elit. Donec leo. Morbi malesuada. Nam molestie leo quis libero. Nam at enim a nisi convallis pretium. Praesent sit amet mauris. Donec bibendum pellentesque sem. Nulla odio. Curabitur lectus nisi, eleifend quis, imperdiet quis, dignissim quis, eros. Sed tincidunt, est vulputate varius congue, lacus nibh scelerisque nisl, ac mattis metus augue quis tellus. Nullam feugiat, tortor eget rutrum pellentesque, nisi libero consequat diam, vel facilisis ante lorem eu nunc.

Sample Image 200 x 218 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris rhoncus ipsum eu diam. Donec nulla urna, facilisis ornare, tristique et, blandit quis, quam. Mauris dui tellus, cursus ut, vulputate vel, luctus nec, neque. Duis mattis, orci non porttitor fermentum, leo diam dictum tellus, id pellentesque nibh risus sed odio. Proin magna purus, fringilla ac, commodo vel, pretium vel, turpis. Aliquam blandit purus ut neque. Integer molestie.

Integer nec nulla a nisl sagittis aliquam.
Proin auctor tortor in metus volutpat fringilla.
Nunc egestas iaculis odio.

Duis eu justo. Curabitur vestibulum metus quis nisi. Curabitur sit amet eros. Phasellus tempor semper sem. Cras orci. Nulla massa. Vestibulum a nulla bibendum quam elementum consequat. Quisque malesuada. Aliquam tincidunt justo sed turpis commodo posuere. Nam condimentum, ipsum tincidunt tincidunt venenatis, tortor elit dictum justo, ac elementum nunc metus in lorem. Praesent ut justo vel urna placerat commodo. Aliquam vel libero vitae dui hendrerit tristique. Etiam eget tellus vel leo convallis sollicitudin.

Demo Table
cell 1	cell 2	cell 3
cell 4	cell 5	cell 5
cell 6	cell 6	cell 7

View Source

Customized Background Color

To change the background color simply add or modify the the following CSS selector:

                 .rbwrapper {background: none #C99;}

For this feature to work you must design your images with interior alpha channel masks. ui-theme-light will allow the setting of the background color / image as the theme was design with interior alpha masks.

View Source

Customized Background Image

To change the background color simply add or modify the the following CSS selector:

                 .rbwrapper {url(Sunset.jpg);}

Header Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris rhoncus ipsum eu diam. Donec nulla urna, facilisis ornare, tristique et, blandit quis, quam. Mauris dui tellus, cursus ut, vulputate vel, luctus nec, neque. Duis mattis, orci non porttitor fermentum, leo diam dictum tellus, id pellentesque nibh risus sed odio. Proin magna purus, fringilla ac, commodo vel, pretium vel, turpis. Aliquam blandit purus ut neque. Integer molestie. Duis eu justo. Curabitur vestibulum metus quis nisi. Curabitur sit amet eros. Phasellus tempor semper sem. Cras orci. Nulla massa. Vestibulum a nulla bibendum quam elementum consequat. Quisque malesuada. Aliquam tincidunt justo sed turpis commodo posuere. Nam condimentum, ipsum tincidunt tincidunt venenatis, tortor elit dictum justo, ac elementum nunc metus in lorem.

View Source

CSS

				<style>
                /*** START DARK THEMED ROUNDED CORENERS BOX ***/
                .ui-dark             { background: #333; color:#CCC; }
                .ui-dark .rb         { background: url(rb-theme-dark/border-r.png);                  /* RIGHT Border */                                   }	
                .ui-dark .rbc        { background: url(rb-theme-dark/border-l.png);                  /* LEFT Border  */                                   }
                .ui-dark .rbtop div  { background: url(rb-theme-dark/tl.png);  height:7px;           /* TOP LEFT border & TOP height */                   }
                .ui-dark .rbtop      { background: url(rb-theme-dark/tr.png);                        /* TOP RIGHT Border */                               }
                .ui-dark .rbbot div  { background: url(rb-theme-dark/bl.png); height:14px;           /* BOTTOM LEFT & BOTTOM height */                    }
                .ui-dark .rbbot      { background: url(rb-theme-dark/br.png);                        /* BOTTOM RIGHT */                                   }
                .ui-dark .rbc        { padding-left:14px;  padding-right:7px;                        /* adjust padding to match L and R BGIMG Thickness*/ }
                /*** END DARK THEMED ROUNDED CORENERS BOX ***/
                </style>

Modifying the Theme

To modify or create a theme for the rounded corners open the ui-rounded-corners.css file and alter the css which appears within the start and end CSS comments. A theme requires 6 background images to compose the appearance. Make sure to adjust the heights on the .rbtop and .rbbot to hold these divs open so that the background image remains visible. Also add left and right padding to the .rbc so that the content remains completley inside the box. Use the CSS above as a guide.

About the Demo

The demo below illustrates a ui-dark theme. Note that the following sample is dark grey on a light grey background. By adding a single class assigment to the wrapping <div> the look of the rounded corners box ban be completley changed. A more complete discussion of the CSS theme styles will be added here soon.

View Source

Javascript

                <script type="text/javascript">
               	$(function(){
                	$('.rbc').each(function(){
                            var rtop ="
";	 
                            var rbot ="
";
                            var rbc = $('#code_sample_5 .demo .rbc').clone().html(); // cache the rbc as a string
                            var output = rtop+rbc+rbot; // wrap the rbc with the addtional non-semantic divs 
                            $('.rbc').replaceWith(output); // replace the rbc with the new rbc + the extra divs needed for the effect to work
                    });
				}); 
                </script>

Using jQuery to Create Rounded Corners

The preceding samples all use static HTML to display rounded corners. However the HTML relies on several non-semantic HTML <div> tags to complete the rounded corners effect. Using jQuery the same effect can be achieved with sementic HTML and progressivley enhance to achieve the rounded coreners look.

Custom Corners Boxes with Drop Shadow

Limitations

Rounded Corners Box (Basic)

<H2> with Sample HTML

Header

Customized Background Color

Customized Background Image

Header Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

CSS

Modifying the Theme

About the Demo

Javascript

Using jQuery to Create Rounded Corners