We just wrote an article for multiple backgrounds and CSS3. I thought I'd share it with you guys.
Have you been using wrapper DIVs to achieve rounded corners in your designs? Do you wish you could use CSS3 multiple backgrounds and stop inflating your markup? You can, using this jQuery library. Multiple backgrounds have been supported by Webkit-based browsers like Safari and Chrome for a long time. Firefox only recently implement them in version 3.6. Of course, Internet Explorer has never supported multiple-backgrounds. This library brings support to Internet Explorer and Firefox by using a custom CSS property.
This library also brings Box-Shadow support to IE6-8. This feature was introduced in Firefox 3.1 and has been in Webkit for a long time. This library does not support Box-Shadow for legacy versions of Firefox. Box-Shadows on IE7/8 work fairly well and look almost exactly like their CSS3 counterparts. Box-Shadows on IE6 may not appear exactly in place.
CSS3 introduced the ability for multiple backgrounds on elements. Using this new feature is very simple; simply place each background like you normally would and separate them with commas. CSS3 browser support extends to background-image, background-position, background-repeat. This library only implements its own property for the shorthand style background property. The W3C provides information about multiple backgrounds.
Browser Support
Supported CSS Properties
-ben-background
The -ben-background property defines multiple backgrounds on the normal state of an element. Separate backgrounds with commas just as with the CSS3 background property. Backgrounds are applied in the order they are written; the first background is on top. If using a background color, place it on the last background.
-ben-background-hover
The -ben-background-hover property defines multiple backgrounds on the hover state of an element. You cannot simply use the :hover psuedo-class due to the wrapper elements that must be used to support multiple backgrounds. Hover and active properties go in same rule as normal not :hover or :active psuedo-classes. You must have the same number of backgrounds in each property on an element. If needed, properties could include a background layer none though.
-ben-background-active
The -ben-background-active property defines multiple backgrounds on the active state of an element. You cannot simply use the :active psuedo-class due to the wrapper elements that must be used to support multiple backgrounds.
-ben-box-shadow
The -ben-box-shadow property defines a box shadow for the normal state of an element. Background must be first and the units must be in pixels followed by: horiz offset, vert offset, and blur radius.
-ben-box-shadow-hover
The -ben-box-shadow-hover property defines a box shadow for the hover state of an element. You must have a standard box shadow for a hover or active box shadow.
-ben-box-shadow-active
The -ben-box-shadow-active property defines a box shadow for the active state of an element.
Example Usage
Including the Script
All that needs to be included is the jQuery library and this script for these features to work. No extra Javascript coding is required. The minified library is only 9.9kB!
Multiple Backgrounds
Multiple backgrounds using the -ben-background properties are read using this Javascript library. Notice how hover and active states are defined for different browsers.
Demo
Box Shadow
Box Shadow using the -ben-box-shadow properties are read using this Javascript library. Notice how hover and active states are defined for different browsers.
Demo
Known Issues
1. Firefox<=3.5,IE6 compatibility doesn't support inline styles only style and link tags
2. NO Box-Shadow support for Firefox<=3.0
3. NOTE: I didnt fix inline-block in IE6/Firefox 2 for this example
4. Box-shadow doesnt auto resize with window if it has a percent-specified width
Download
(18.4kB) Package containing this document, example images, source code, minified library
Full Article can be found here -
http://www.chicowebdesign.com/blog/...internet-explorer-and-legacy-mozilla-firefox/
Have you been using wrapper DIVs to achieve rounded corners in your designs? Do you wish you could use CSS3 multiple backgrounds and stop inflating your markup? You can, using this jQuery library. Multiple backgrounds have been supported by Webkit-based browsers like Safari and Chrome for a long time. Firefox only recently implement them in version 3.6. Of course, Internet Explorer has never supported multiple-backgrounds. This library brings support to Internet Explorer and Firefox by using a custom CSS property.
This library also brings Box-Shadow support to IE6-8. This feature was introduced in Firefox 3.1 and has been in Webkit for a long time. This library does not support Box-Shadow for legacy versions of Firefox. Box-Shadows on IE7/8 work fairly well and look almost exactly like their CSS3 counterparts. Box-Shadows on IE6 may not appear exactly in place.
Code:
background: url(left.gif) no-repeat 0 0, url(right.gif) no-repeat 100% 0, url(middle.gif) repeat-x 0 0;CSS3 introduced the ability for multiple backgrounds on elements. Using this new feature is very simple; simply place each background like you normally would and separate them with commas. CSS3 browser support extends to background-image, background-position, background-repeat. This library only implements its own property for the shorthand style background property. The W3C provides information about multiple backgrounds.
Browser Support
Supported CSS Properties
-ben-background
Code:
-ben-background: [background #1],[background #2]...;The -ben-background property defines multiple backgrounds on the normal state of an element. Separate backgrounds with commas just as with the CSS3 background property. Backgrounds are applied in the order they are written; the first background is on top. If using a background color, place it on the last background.
-ben-background-hover
Code:
-ben-background-hover: [background #1],[background #2]...;The -ben-background-hover property defines multiple backgrounds on the hover state of an element. You cannot simply use the :hover psuedo-class due to the wrapper elements that must be used to support multiple backgrounds. Hover and active properties go in same rule as normal not :hover or :active psuedo-classes. You must have the same number of backgrounds in each property on an element. If needed, properties could include a background layer none though.
-ben-background-active
Code:
-ben-background-active: [background #1],[background #2]...;-ben-box-shadow
Code:
-ben-box-shadow: [color code] [horizontal offset] [vertical offset] [blur radius];-ben-box-shadow-hover
Code:
-ben-box-shadow-hover: [color code] [horizontal offset] [vertical offset] [blur radius];The -ben-box-shadow-hover property defines a box shadow for the hover state of an element. You must have a standard box shadow for a hover or active box shadow.
-ben-box-shadow-active
Code:
-ben-box-shadow-active: [color code] [horizontal offset] [vertical offset] [blur radius];Example Usage
Including the Script
All that needs to be included is the jQuery library and this script for these features to work. No extra Javascript coding is required. The minified library is only 9.9kB!
Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript" src="jquery.multiple-bgs.js"></script>Multiple Backgrounds
Multiple backgrounds using the -ben-background properties are read using this Javascript library. Notice how hover and active states are defined for different browsers.
Code:
#ex1 { background: url(middle.gif) repeat-x 0 0; /* For unsupported browsers */ background: url(left.gif) no-repeat 0 0, url(right.gif) no-repeat 100% 0, url(middle.gif) repeat-x 0 0; /* For CSS3 Browsers */ -ben-background: url(left.gif) no-repeat 0 0, url(right.gif) no-repeat 100% 0, url(middle.gif) repeat-x 0 0; -ben-background-hover: url(left-hover.gif) no-repeat 0 0, url(right-hover.gif) no-repeat 100% 0, url(middle-hover.gif) repeat-x 0 0; -ben-background-active: url(left-active.gif) no-repeat 0 0, url(right-active.gif) no-repeat 100% 0, url(middle-active.gif) repeat-x 0 0; } #ex1:hover { background: url(middle-hover.gif) repeat-x 0 0; /* For unsupported browsers */ background: url(left-hover.gif) no-repeat 0 0, url(right-hover.gif) no-repeat 100% 0, url(middle-hover.gif) repeat-x 0 0; /* For CSS3 Browsers */ } #ex1:active { background: url(middle-active.gif) repeat-x 0 0; /* For unsupported browsers */ background: url(left-active.gif) no-repeat 0 0, url(right-active.gif) no-repeat 100% 0, url(middle-active.gif) repeat-x 0 0; /* For CSS3 Browsers */ }Demo
Box Shadow
Box Shadow using the -ben-box-shadow properties are read using this Javascript library. Notice how hover and active states are defined for different browsers.
Code:
#ex2 { box-shadow: #888 10px 10px 5px; /* CSS3 Compliant/Opera */ -ben-box-shadow: #888 10px 10px 5px; -ben-box-shadow-hover: #bbb 10px 10px 5px; -ben-box-shadow-active: #666 5px 5px 5px; -moz-box-shadow: #888 10px 10px 5px; /* Firefox */ -webkit-box-shadow: #888 10px 10px 5px; /* Webkit */ } #ex2:hover { box-shadow: #bbb 10px 10px 5px; /* CSS3 Compliant/Opera */ -moz-box-shadow: #bbb 10px 10px 5px; /* Firefox */ -webkit-box-shadow: #bbb 10px 10px 5px; /* Webkit */ } #ex2:active { box-shadow: #666 5px 5px 5px; /* CSS3 Compliant/Opera */ -moz-box-shadow: #666 5px 5px 5px; /* Firefox */ -webkit-box-shadow: #666 5px 5px 5px; /* Webkit */ }Demo
Known Issues
1. Firefox<=3.5,IE6 compatibility doesn't support inline styles only style and link tags
2. NO Box-Shadow support for Firefox<=3.0
3. NOTE: I didnt fix inline-block in IE6/Firefox 2 for this example
4. Box-shadow doesnt auto resize with window if it has a percent-specified width
Download
(18.4kB) Package containing this document, example images, source code, minified library
Full Article can be found here -
http://www.chicowebdesign.com/blog/...internet-explorer-and-legacy-mozilla-firefox/
