Blog
Media
Links
KontaktFacebook or Vista CSS 3 Border style
You probably know know Facebook. They decorate their messages and floating div with a nice black border.
The Facebook border-style
Similar to Windows Vista Aero Glass effects this is not a narrow but rather wide border. In this article i want to show you, how this effect is accomplished an take it one step further and make it a Windows Aero Glass effect.
All we need is some CSS 3 and a PNG image for the Aero effect.
Before we start
Thus we use two CSS 3 declarations (border-radius and RGBa color) we need a Browser which supports CSS 3. In my case I’m using Firefox 3.5 and Safari 4.
The basic facebook-border style
Set up the HTML:
<div class="fancybox">
<div class="fancybox-inner">
<h1>The pure CSS 3 way </h1>
<p>In aliquet facilisis ante; sit ...</p>
</div>
</div>
And spice it with some magic CSS:
.fancybox {
border: 3mm solid rgb(33, 33, 33); /*fallback*/
border: 3mm solid rgba(33, 33, 33, 0.5); /* the translucent border */
max-width:640px;
margin:0 auto;
-moz-border-radius: 3mm;
-webkit-border-radius: 3mm;
border-radius: 3mm;
-moz-box-shadow: 2mm 2mm 6mm #000;
-webkit-box-shadow: 2mm 2mm 6mm #000;
box-shadow: 2mm 2mm 6mm #000;
}
/*-
Check that the border-width and the -webkit-border-radius are the same,
otherwise Safari renders an ugly border!
----------------------------------------------------------------------*/
.fancybox-inner {
background-color:#fff;
padding:4mm;
}
The advanced Aero Glass CSS border-style
We use the same markup:
<div class="fancybox">
<div class="fancybox-inner">
<h1>The Vista / PNG Way</h1>
<p>In aliquet facilisis ante; ...</p>
</div>
</div>
and only alter the css:
#fancybox {
margin:3em auto;
max-width:800px;
-moz-border-radius: 3mm;
-webkit-border-radius: 3mm;
background:url(bg.png) no-repeat bottom right; /* the background-image
you want to use for the border */
padding:4mm;
-moz-box-shadow: 2mm 2mm 6mm #000;
-webkit-box-shadow: 2mm 2mm 6mm #000;
box-shadow: 2mm 2mm 6mm #000;
background-color: rgba(00,128,255,0.25); /* color the border */
}
.fancybox-inner {
background-color:#fff;
padding:4mm;
}
If you use an greyscale image you can alter the color of the border anytime by just changing the background-color. I set the opacity to 0.25 so it is just a nice little touch of a blue (or what color you choose).
16 November 2009 um 17:35 Uhr
I can see two problems with this,
1)The pure CSS version doesn’t work at all with IE
2)The png version doesn’t scale, if your page is bigger than the background image then it all goes wrong. Making a massive background png is not really an ideal solution.
16 November 2009 um 17:48 Uhr
Sorry, I forgot to post a possible solution for the aero png. Allowing the png to repeat-y doesn’t look to bad and would solve the unknown height problem, you could also possibly then use a small image.
16 November 2009 um 18:40 Uhr
Right, since this pure CSS Version uses the CSS3 RGBa color model IE won’t display any border.
You can add an fallback code
border: 3mm solid rgb(33, 33, 33); /*fallback*/, so IE display at least a border (I did an update to the example).Thanks to almighty IE you only can use this kind of stuff as an unnecessary visual enhancement to any site (only Firefox and Safari/Chrome users can enjoy).
The rounded border is also not wide supported