CSS3: semi-transparent GRADIENT background color

HTML & CSS
1

I love that you can do semi-transparent bg colors with CSS3 (as opposed to having to do entire element semi-transparent…)

example of semi-transparent bg color…

background-color: rgba(0,0,255,0.5);

but how about when the colors are gradients? how do I make these bg-colors semi-transparent?


[INDENT]background: -webkit-gradient(linear, left top, left bottom, from(#cfaa8a), to(#a37956));
background: -webkit-linear-gradient(top, #cfaa8a, #a37956);
background: -moz-linear-gradient(top, #cfaa8a, #a37956);
background: -ms-linear-gradient(top, #cfaa8a, #a37956);
background: -o-linear-gradient(top, #cfaa8a, #a37956);			 
[/INDENT]

this code is from this button-generator site:
http://css-tricks.com/examples/ButtonMaker/#

(in all these btn-gen sites I never find how to change the angle or effect of the gradient, do bevel and emboss, etc… oh well… I love all the stuff you can do with CSS3, but it’s very code-intensive (i.e., labor-intensive…:wink: and having to do rgb colors instead of HEX is a lot of fun…:wink:

thank you…

2

Same way as a BG color use RGBA() to define the color instead or hex ( which is by def never transparent).
another thing about gradients is you must change your THINKING. I have seen people do BLACK(solid)-WHITE(transparent). these gradients are quite possible , but it’s teh THINKING that is wrong.

if you want to shade something, for example, use a black solid to a black transparent gradient// otherwise you are going to get an odd lucking gray semi trasparent middle somewhere.

as far as gradient angle… that’s a sticky issue. not all UAs support arbitrary angles ( am looking at you, IE), but generally speaking, you define the angle where you used TOP:background: -webkit-linear-gradient(top, #cfaa8a, #a37956); instead of the keyword use the deg unit; eg.: 15deg

hope that helps