Is it possible to get the following text effect via css and html?

advertisements

I'm stuck and have no idea how to achieve following task. I searched the web, but have found nothing similar.

This is a text effect I want to achieve:

As you can see it has multiple colours (brown through the middle and white at the edges.) Is it possible to achieve something like this entirely in css and html (if it is please point me at right direction) or is it only achievable by using graphics?


demo jsfiddle

this appears to only have webkit support at this time (FF/IE has no text-fill-color property)

h1{
    font-size:40px;
    font-weight:bold;
    font-family:Helvetica,Arial,sans-serif;
    margin:0;
    padding:0;
    float:left;
    background:-webkit-linear-gradient(-60deg, #ffffff 0%,#ffffff 25%,#000000 25%,#000000 75%,#ffffff 75%,#ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}‚Äč

this is based on @Blowsie's answer from a similar post