How To: Semi-Transparency

[sireesanwar.livejournal.com]

Theme: All
How To: Set the Opacity of an Element (Make a color on your journal appear slightly transparent)

I've often wonder how you would accomplish this look:


Option 1: As it turns out there is a simple way to do this.
Black:
background-color: rgba(0, 0, 0, 0.6) ;
This is based on the RGB color scale so (0, 0, 0) is black. When you add the 0.6 you are adding the transparency. 0.9 is rather dark but 0.1 is super light almost completely transparent.

White:
background-color: rgba(255, 255, 255, 0.6) ;

Red:
background-color: rgba(255, 0, 0, 0.6) ;
To find or customize a color for transparency you can check programs like PhotoShop or Paint Shop and when you have the color for painting they usually give you the numbers for RGB or you can use this RGB Color Chart.

Option 2: Another other option is this:
background-color: #000000; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;
The unfortunate part about using this code for the header links is it will also make the text semi-transparent.

Option 3: Using an image background that was created to have an opacity or semi-transparency already built into it. This only works some of the time as some browsers don't support it. The image should be a png. To do this you would want this coding:
background: url(http://i51.tinypic.com/2ds4v49.jpg) repeat;
Below are a black and white semi-transparent image. You can't fully tell here for the white one but it does work.


Option 4: You want complete transparency of an item like the background to the sidebar. Note: The above sidebar is set to transparent but the actual components are not. So under the sidebar coding it we are using the below code:
background-color: transparent !important;
For the components "sbarbody" and "sbarbody2" the background color is set to white.

I hope this helps you in your semi-transparent endeavors.

Comments

[leandralocke.livejournal.com]

Hi, I found this entry through a google search. I'm mostly a complete noob when it comes to custom CSS, but maybe you'd be willing to help me.

I have a community journal with flexible squares and have already included a custom css for a header (which I haven't placed yet since I still need to make the graphic). Now I have this beautiful background but don't see much of it. What I'd like is to set the 'Background for the main contents of the page' as well as the header and footer to fully transparent. I suppose I'd use "Option" two for it and just set it to 1 instead of 0.5. BUT: how do I choose the element? I mean how do I start the code to tell the style sheet that it should alter said elements? Like I said, total custom css noob ^^

Basically, if you could give me the code for DUMMIES I'd be eternally grateful ;)