Edig Edig -4 years ago 125
CSS Question

Cross Browser Text Gradient & Stroke

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 Source

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;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download