Cross Browser Text Gradient & Stroke

Question

I need to get a title with gradient and a stroke of 3px. I don't care if it is with png or not. I need cross Browser.

Code:

.title {
    text-align: center;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 40px;
    font-size: 25px;
    color: #FFF;
    font-weight: bold;
    text-transform: uppercase;

    /*
        This code gives me the gradient but only in Safari & Chrome. I need IE & Firefox to.
        background: -webkit-gradient(linear, left top, left bottom, from(#ffcc02), to(#fffe42));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;*/
}

Also i need to add a stroke. but outside no inside. Or if its inside which will be my new font-size?

Answer 1

I have answered this sort of question before, check the post here.

There is an experimental webkit property called text-stroke in CSS3, I've been trying to get this to work for some time but have been unsuccessful so far.

What I have done instead is used the already supported text-shadow property (supported in Chrome, Firefox, Opera, and IE 9 I believe).

Use four shadows to simulate a stroked text:

HTML:

<div class="strokeme">
    This text should have a stroke in some browsers
</div>

CSS:

.strokeme
{
    color: white;
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}