Elby und Ninja

Facebook or Vista CSS 3 Border style

elby — Wed, 07 Oct 2009 21:03:35 +0000

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:



The pure CSS 3 way 
In aliquet facilisis ante; sit ...

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;
}

See a demo

The advanced Aero Glass CSS border-style

We use the same markup:



The Vista / PNG Way
In aliquet facilisis ante;  ...

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).

See a demo