hi im trying to put a gradient overlay on some text but the gradient just goes over the text :/
how would i restrict the gradient to the text
heres my code:
Code:
.pheader p{
font-family:"Arial Black", Gadget, sans-serif;
font-size:32px;
margin:0;
color:#87c733;
position:absolute;
/* gradient */
background: -moz-linear-gradient(top, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.2) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.2)), color-stop(100%,rgba(0,0,0,0.2))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,0.2) 0%,rgba(0,0,0,0.2) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,0.2) 0%,rgba(0,0,0,0.2) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,0.2) 0%,rgba(0,0,0,0.2) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33ffffff', endColorstr='#33000000',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(255,255,255,0.2) 0%,rgba(0,0,0,0.2) 100%); /* W3C */
}
//* Next Question is Fixed but still need to restrict the gradient to text*//
also how would i put a border on the text
heres an image of how it looks
Uploaded with
ImageShack.us
for the border i just added :
Code:
border: 1px solid rgba(0, 0, 0, .39);
//* update*//
i have managed to get a text stroke i was being stupid -_-
just incase your curious the code it
Code:
-webkit-text-stroke: 1px rgba(0, 0, 0, .39);
thanks
