CODEWITHSUNDEEP
htmlfacebookcss
Alexa Green
Alexa Green

Reputation: 1183

How to achieve similar Facebook opacity effect with CSS3?

I am trying to achieve a CSS3 opacity similar to what Facebook uses for its "Comments" Social Plugin. The opacity has a sort of "glass-like" look as if you were looking through a window.

Here is a screenshot of what I am referring to:

enter image description here

Upvotes: 0

Views: 210

Answers (3)

samccone
samccone

Reputation: 10926

Here is a cross browser solution

http://jsfiddle.net/3VbTC/2/

the trick is to nest the background div within a container div

Upvotes: 4

foxy
foxy

Reputation: 7672

Set the background (or background-color) property to rgba(255,255,255,0.3) or similar.

Upvotes: 1

James Hay
James Hay

Reputation: 7315

I'm going to say either something like this

.element
{
    background-color: Black;
    opacity: 0.2;
}

Or a transparent background image.

Upvotes: 2

Related Questions