Well, it looks like we’ve finally arrived at a place where at least all of
the latest versions of main stream browsers support rounded corners and
box shadows.
The two CSS properties that make this possible are box-shadow and box-radius. Both of these CSS Properties now supported
in all
the major browsers as shown
in this chart from QuirksMode:
In it’s simplest form you can use box-shadow and border radius like this: .boxshadow
{
-moz-box-shadow: 3px 3px 5px #535353;
-webkit-box-shadow: 3px 3px 5px #535353;
box-shadow: 3px 3px 5px #535353;
}
.roundbox
{
-moz-border-radius: 6px 6px 6px 6px;
-webkit-border-radius: 6px;
border-radius: 6px 6px 6px 6px;
}
box-shadow: horizontal-shadow-pixels vertical-shadow-pixels blur-distance shadow-color
box-shadow attributes specify
the the horizontal and vertical offset of
the shadow,
the blur distance (to give
the shadow a smooth soft look) and a shadow color.
The spec also supports multiple shadows separated by commas using
the attributes above but we’re not using that functionality here.
box-radius: top-left-radius top-right-radius bottom-right-radius bottom-left-radius
border-radius takes a pixel size for
the radius for each corner going clockwise. CSS 3 also specifies each of
the individual corner elements such as border-top-left-radius, but support for these is much less prevalent so I would recommend not using them for now until support improves. Instead use
the single box-radius to specify all corners.
Browser specific Support
in older Browsers
Notice that there are two variations:
The actual CSS 3 properties (box-shadow and box-radius) and
the browser specific ones (-moz, –webkit prefixes for FireFox and Chrome/Safari respectively) which work
in slightly older versions of modern browsers before official CSS 3 support was added.
The goal is to spread support as widely as possible and
the prefix versions extend
the range slightly more to those browsers that provided early support for these features. Notice that box-shadow and border-radius are used after
the browser specific versions to ensure that
the latter versions get precedence if
the browser supports both (last assignment wins).
Use
the .boxshadow and .roundbox Styles
in HTML
To use these two styles create a simple rounded
box with a shadow you can use HTML like this:
<!-- Simple
Box with rounded corners and shadow -->
<div class="roundbox boxshadow" style="width: 550px; border: solid 2px steelblue">
<div class="boxcontenttext">
Simple Rounded Corner
Box.
</div>
</div>
which looks like this
in the browser:
This works across browsers and it’s pretty sweet and simple.
Watch out for nested Elements!
There are a couple of things to be aware of however when using rounded corners. Specifically, you need to be careful when you nest other non-transparent content into
the rounded
box. For example check out what happens when I change
the inside <div> to have a colored background:
<!-- Simple
Box with rounded corners and shadow -->
<div class="roundbox boxshadow" style="width: 550px; border: solid 2px steelblue">
<div class="boxcontenttext" style="background: khaki;">
Simple Rounded Corner
Box.
</div>
</div>
which renders like this:
If you look closely you’ll find that
the inside <div>’s corners are not rounded and so ‘poke out’ slightly over
the rounded corners. It looks like
the rounded corners are ‘broken’ up instead of a solid rounded line around
the corner, which his pretty ugly.
The bigger
the radius
the more drastic this effect becomes .
To fix this issue
the inner <div> also has have rounded corners at
the same or slightly smaller radius than
the outer <div>.
The simple fix for this is to simply also apply
the roundbox style to
the inner <div>
in addition to
the boxcontenttext style already applied:
<div class="boxcontenttext roundbox" style="background: khaki;">
The fixed display now looks proper:
Separate Top and Bottom Elements
This gets even a little more tricky if you have an element at
the top or bottom only of
the rounded
box. What if you need to add something like a header or footer <div> that have non-transparent backgrounds which is a pretty common scenario?
In those cases you want only
the top or bottom corners rounded and not both. To make this work a couple of additional styles to round only
the top and bottom corners can be created:
.roundbox-top
{
-moz-border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
.roundbox-bottom
{
-moz-border-radius: 0 0 4px 4px;
-webkit-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
}
Notice that radius used for
the ‘inside’ rounding is smaller (4px) than
the outside radius (6px). This is so
the inner radius fills into
the outer border – if you use
the same size you may have some white space showing between inner and out rounded corners. Experiment with values to see what works –
in my experimenting
the behavior across browsers here is consistent (thankfully).
These styles can be applied
in addition to other styles to make only
the top or bottom portions of an element rounded. For example imagine I have styles like this:
.gridheader, .gridheaderbig, .gridheaderleft, .gridheaderright
{
padding: 4px 4px 4px 4px;
background: #003399 url(images/vertgradient.png) repeat-x;
text-align: center;
font-weight: bold;
text-decoration: none;
color: khaki;
}
.gridheaderleft
{
text-align: left;
}
.gridheaderright
{
text-align: right;
}
.gridheaderbig
{
font-size: 135%;
}
If I just apply say gridheader by itself
in HTML like this:
<div class="roundbox boxshadow" style="width: 550px; border: solid 2px steelblue">
<div class="gridheaderleft">Box with a Header</div>
<div class="boxcontenttext" style="background: khaki;">
Simple Rounded Corner
Box.
</div>
</div>
This results
in a pretty funky display – again due to
the fact that
the inner elements render square rather than rounded corners:
If you look close again you can see that both
the header and
the main content have square edges which jumps out at
the eye. To fix this you can now apply
the roundbox-top and roundbox-bottom to
the header and content respectively:
<div class="roundbox boxshadow" style="width: 550px; border: solid 2px steelblue">
<div class="gridheaderleft roundbox-top">Box with a Header</div>
<div class="boxcontenttext roundbox-bottom" style="background: khaki;">
Simple Rounded Corner
Box.
</div>
</div>
Which now gives
the proper display with rounded corners both on
the top and bottom:
All of this is sweet to be supported – at least by
the newest browser – without having to resort to images and nasty JavaScripts solutions. While this is still not a mainstream feature yet for
the majority of actually installed browsers,
the majority of browser users are very likely to have this support as most browsers other than IE are actively pushing users to upgrade to newer versions. Since this is a ‘visual display only feature it degrades reasonably well
in non-supporting browsers: You get an uninteresting square and non-shadowed browser
box, but
the display is still overall functional.
The main sticking point – as always is Internet Explorer versions 8.0 and down as well as older versions of other browsers. With those browsers you get a functional view that is a little less interesting to look at obviously:
but at least it’s still functional. Maybe that’s just one more incentive for people using older browsers to upgrade to a more modern browser :-)
Creating Dialog Related Styles
In a lot of my AJAX based applications I use pop up windows which effectively work like dialogs. Using
the simple CSS behaviors above, it’s really easy to create some fairly nice looking overlaid windows with nothing but CSS.
Here’s what a typical ‘dialog’ I use looks like:
The beauty of this is that it’s plain CSS – no plug-ins or images (other than
the gradients which are optional) required. Add jQuery-ui draggable (or ww.jquery.js as shown below) and you have a nice simple inline implementation of a dialog represented by a simple <div> tag.
Here’s
the HTML for this dialog:
<div id="divDialog" class="dialog boxshadow" style="width: 450px;">
<div class="dialog-header">
<div class="closebox"></div>
User Sign-in
</div>
<div class="dialog-content">
<label>Username:</label>
<input type="text" name="txtUsername" value=" " />
<label>Password</label>
<input type="text" name="txtPassword" value=" " />
<hr />
<input type="button" id="btnLogin" value="Login" />
</div>
<div class="dialog-statusbar">Ready</div>
</div>
Most of this behavior is driven by
the ‘dialog’ styles which are fairly basic and easy to understand. They do use a few support images for
the gradients which are provided
in the sample I’ve provided. Here’s what
the CSS looks like:
.dialog
{
background: White;
overflow: hidden;
border: solid 1px steelblue;
-moz-border-radius: 6px 6px 4px 4px;
-webkit-border-radius: 6px 6px 4px 4px;
border-radius: 6px 6px 3px 3px;
}
.dialog-header
{
background-image: url(images/dialogheader.png);
background-repeat: repeat-x;
text-align: left;
color: cornsilk;
padding: 5px;
padding-left: 10px;
font-size: 1.02em;
font-weight: bold;
position: relative;
-moz-border-radius: 4px 4px 0px 0px;
-webkit-border-radius: 4px 4px 0px 0px;
border-radius: 4px 4px 0px 0px;
}
.dialog-top
{
-moz-border-radius: 4px 4px 0px 0px;
-webkit-border-radius: 4px 4px 0px 0px;
border-radius: 4px 4px 0px 0px;
}
.dialog-bottom
{
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
.dialog-content
{
padding: 15px;
}
.dialog-statusbar, .dialog-toolbar
{
background: #eeeeee;
background-image: url(images/dialogstrip.png);
background-repeat: repeat-x;
padding: 5px;
padding-left: 10px;
border-top: solid 1px silver;
border-bottom: solid 1px silver;
font-size: 0.8em;
}
.dialog-statusbar
{
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
padding-right: 10px;
}
.closebox
{
position: absolute;
right: 2px;
top: 2px;
background-image: url(images/close.gif);
background-repeat: no-repeat;
width: 14px;
height: 14px;
cursor: pointer;
opacity: 0.60;
filter: alpha(opacity="80");
}
.closebox:hover
{
opacity: 1;
filter: alpha(opacity="100");
}
The main style is
the dialog class which is
the outer
box. It has
the rounded border that serves as
the outline. Note that I didn’t add
the box-shadow to this style because
in some situations I just want
the rounded
box in an inline display that doesn’t have a shadow so it’s still applied separately. dialog-header, then has
the rounded top corners and displays a typical dialog heading format. dialog-bottom and dialog-top then provide
the same functionality as roundbox-top and roundbox-bottom described earlier but are provided mainly
in the stylesheet for consistency to match
the dialog’s round edges and making it easier to remember and find
in Intellisense as it shows up
in the same dialog- group.
dialog-statusbar and dialog-toolbar are two elements I use a lot for floating windows –
the toolbar serves for buttons and options and filters typically, while
the status bar provides information specific to
the floating window. Since
the the status bar is always on
the bottom of
the dialog it automatically handles
the rounding of
the bottom corners.
Finally there’s closebox style which is to be applied to an empty <div> tag
in the header typically. What this does is render a close image that is by default low-lighted with a low opacity value, and then highlights when hovered over. All you’d have to do handle
the close operation is handle
the onclick of
the <div>. Note that
the <div> right aligns so typically you should specify it before any other content
in the header.
Speaking of closable – some time ago I created a closable jQuery plug-in that basically automates this process and can be applied against ANY element
in a page, automatically removing or closing
the element with some simple script code. Using this you can leave out
the <div> tag for closable and just do
the following:
To make
the above dialog closable (and draggable) which makes it effectively and overlay window, you’d add jQuery.js and ww.jquery.js to
the page:
<script type="text/javascript" src="../../scripts/jquery.min.js"></script>
<script type="text/javascript" src="../../scripts/ww.jquery.min.js"></script>
and then simply call:
<script type="text/javascript">
$(document).ready(function () {
$("#divDialog")
.draggable({ handle: ".dialog-header" })
.closable({ handle: ".dialog-header",
closeHandler: function () {
alert("Window about to be closed.");
return true; // true closes - false leaves open
}
});
});
</script>
* ww.jquery.js emulates base features
in jQuery-ui’s draggable. If jQuery-ui is loaded its draggable version will be used instead
and voila you have now have a draggable and closable window – here
in mid-drag:
The dragging and closable behaviors are of course optional, but it’s
the final touch that provides dialog like window behavior.
Relief for older Internet Explorer Versions with CSS Pie
If you want to get these features to work with older versions of Internet Explorer all
the way back to version 6 you can check out CSS Pie. CSS Pie provides an Internet Explorer behavior file that attaches to specific CSS rules and simulates these behavior using script code
in IE (mostly by implementing filters). You can simply add
the behavior to each CSS style that uses box-shadow and border-radius like this:
.boxshadow
{
-moz-box-shadow: 3px 3px 5px #535353;
-webkit-box-shadow: 3px 3px 5px #535353; box-shadow: 3px 3px 5px #535353;
behavior: url(scripts/PIE.htc);
}
.roundbox
{ -moz-border-radius: 6px 6px 6px 6px;
-webkit-border-radius: 6px; border-radius: 6px 6px 6px 6px;
behavior: url(scripts/PIE.htc);
}
CSS Pie requires
the PIE.htc on your server and referenced from each CSS style that needs it. Note that
the url() for IE behaviors is NOT CSS file relative as other CSS resources, but rather PAGE relative , so if you have more than one folder you probably need to reference
the HTC file with a fixed path like this:
behavior: url(/MyApp/scripts/PIE.htc);
in the style. Small price to pay, but a royal pain if you have a common CSS file you use
in many applications.
Once
the PIE.htc file has been copied and you have applied
the behavior to each style that uses these new features Internet Explorer will render rounded corners and
box shadows! Yay!
Hurray for box-shadow and border-radius
All of this functionality is very welcome natively
in the browser. If you think this is all frivolous visual candy, you might be right :-), but if you take a look on
the Web and search for rounded corner solutions that predate these CSS attributes you’ll find a boatload of stuff from image files, to custom drawn content to Javascript solutions that play tricks with a few images. It’s sooooo much easier to have this functionality built
in and I for one am glad to see that’s it’s finally becoming standard
in the box.
Still remember that when you use these new CSS features, they are not universal, and are not going to be really soon. Legacy browsers, especially old versions of Internet Explorer that can’t be updated will continue to be around and won’t work with this shiny new stuff. I say screw ‘em: Let them get a decent recent browser or see a degraded and ugly UI. We have
the luxury with this functionality
in that it doesn’t typically affect usability – it just doesn’t look as nice.
Resources
Download
the Sample
The sample includes
the styles and images and sample page as well as ww.jquery.js for
the draggable/closable example.
Online Sample
Check out
the sample described
in this post online.
Closable and Draggable Documentation
Documentation for
the closeable and draggable plug-ins
in ww.jquery.js. You can also check out
the full documentation for all
the plug-ins contained
in ww.jquery.js here.
© Rick Strahl, West Wind Technologies, 2005-2011Posted
in HTML CSS
