design matters • le design, ça compte
CSS3 Borders & Backgrounds
Transparent Backgrounds
Several new properties have been introduced in the CSS3 specification. Some of these properties are supported in modern browsers such as Mozilla Firefox v3+, Apple Safari v3+, Opera 10+ and Google Chrome. All of the mentioned browsers now support four new colour formats: HSL: hue, saturation, lightness CMYK: cyan, magenta, yellow, black HSLA: hue, saturation, lightness, alpha RGBA: red, green, blue, alpha The RGBA colour format allows us to make the border, background or text colour transparent. This format may be the easiest to work with because we are able to use a proprietary Microsoft filter on our CSS that will allow Internet Explorer to also create transparencies. This opens up a number of new possibilities in web design. RGBA is much like the standard RGB colour format, but allows for a fourth parameter – Alpha. Alpha defines the transparency of the colour where 1 is fully opaque and 0 is fully transparent. Here is an example of using RGBA to make an element’s background colour semi-transparent:
element { background: rgba(102, 141, 158, 0.5); }
Mozilla Firefox 3+, Google Chrome, Apple Safari 3+, Opera 10+
Suite 312 • 185 Somerset St. West • Ottawa, ON K2P 0J2 • 613.482.1784 Suite 650 • 980 Saint-Antoine St West • Montréal, QC H3C 1A8 • 514.907.9944 Toll Free: 888.484.2933
www.eliquo.ca
design matters • le design, ça compte
IE supports a proprietary format called “extended hex”. We can use this format in some parameters of IE's filters to simulate RGBA backgrounds. First we convert the Alpha parameter to hexadecimal in the range of 00 to FF. If the decimal value of the Alpha parameter is 0.5, the hexadecimal value would be 77. Then we place that value in front of a normal hex value of the colour we want to make transparent. Using IE's gradient filter, the workaround code which is the equivalent to rgba(102,141,158,0.5) would look like this:
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#77668D9E , endColorstr=#77668D9E);
Internet Explorer 7
It’s important to remember to place the IE workaround before the RGBA code:
element { filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#77668D9E , endColorstr=#77668D9E); background: rgba(102, 141, 158, 0.5); }
Suite 312 • 185 Somerset St. West • Ottawa, ON K2P 0J2 • 613.482.1784 Suite 650 • 980 Saint-Antoine St West • Montréal, QC H3C 1A8 • 514.907.9944 Toll Free: 888.484.2933
www.eliquo.ca
design matters • le design, ça compte
Transparent Borders
To create transparent borders, we can use two containers with sufficient padding and RGBA background on the outer container. Here we’ve added a patterned background on the BODY element to show the transparency on the border:
#outer { width: 450px; padding: 8px; /* size of the border */ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#77668D9E , endColorstr=#77668D9E); background: rgba(102,141,158, 0.5); } #inner { padding: 20px; background: #00415e; }
Mozilla Firefox 3+, Google Chrome, Apple Safari 3+, Opera 10+, IE7 (with workaround)
Gradient Borders or Look Ma, no images!!
Mozilla Firefox can also support multiple border colours. If you have a standard border of n pixels, then you can use up to n colors on that border, each color registering 1pixel in width. So if you are using a border of 10 pixels but only apply 6 colors, the last color will be applied to the remaining border width.
Suite 312 • 185 Somerset St. West • Ottawa, ON K2P 0J2 • 613.482.1784 Suite 650 • 980 Saint-Antoine St West • Montréal, QC H3C 1A8 • 514.907.9944 Toll Free: 888.484.2933
www.eliquo.ca
design matters • le design, ça compte
Only Firefox is supporting this feature today, so we must remember to add the “-moz” prefix to the property. Here’s the CSS:
element { border: 10px solid #900; -moz-border-bottom-colors: #300 #600 #700 #800 #900 #A00; -moz-border-top-colors: #300 #600 #700 #800 #900 #A00; -moz-border-left-colors: #300 #600 #700 #800 #900 #A00; -moz-border-right-colors: #300 #600 #700 #800 #900 #A00; }
Mozilla Firefox 3
Suite 312 • 185 Somerset St. West • Ottawa, ON K2P 0J2 • 613.482.1784 Suite 650 • 980 Saint-Antoine St West • Montréal, QC H3C 1A8 • 514.907.9944 Toll Free: 888.484.2933
www.eliquo.ca
design matters • le design, ça compte
We can even spice this up a little by adding the border-radius property, which is supported by Safari and Google Chrome as well:
element { border: 10px solid #900; -moz-border-bottom-colors: #300 #600 #700 #800 #900 #A00; -moz-border-top-colors: #300 #600 #700 #800 #900 #A00; -moz-border-left-colors: #300 #600 #700 #800 #900 #A00; -moz-border-right-colors: #300 #600 #700 #800 #900 #A00; -moz-border-radius: 15px; /* for Firefox */ -webkit-border-radius: 15px; /* for Safari and Chrome */ border-radius: 15px; /* standard declaration */ }
We should also add the standard border-radius declaration so our code is ready when other browsers start supporting the property.
Rounded corners without images in Firefox 3+, Google Chrome, Safari 3
Take CSS3 for a Test Drive
Just because CSS3 isn’t fully supported in all of today’s common browsers doesn’t mean we shouldn’t start using it today. Other web designers will see your work and become inspired. Browser manufacturers will notice the climate is changing and begin to implement more of the CSS3 specification. Let’s all help move the industry forward by pushing the envelope every once in a while.
Suite 312 • 185 Somerset St. West • Ottawa, ON K2P 0J2 • 613.482.1784 Suite 650 • 980 Saint-Antoine St West • Montréal, QC H3C 1A8 • 514.907.9944 Toll Free: 888.484.2933
www.eliquo.ca