CODEWITHSUNDEEP
htmlcsstextstyling
Ilja
Ilja

Reputation: 46479

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

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:

enter image description here

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?

Upvotes: 2

Views: 156

Answers (3)

MikeM
MikeM

Reputation: 27405

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

Upvotes: 6

Dharman
Dharman

Reputation: 33238

You can use image and CSS property background-clip: text to achieve something similar

http://trentwalton.com/2010/03/24/css3-background-clip-text/

It is still in development and works only on webkit

You could combine it together with css gradients
http://gradients.glrzad.com/

Upvotes: 1

bashleigh
bashleigh

Reputation: 9314

I've never tested this myself but I'm near 100% sure this will work.

h1{
    content:'Hello';//this isn't needed but it's your content I'm guessing
    mask-image:linear-gradient(45deg, #FFFFFF 0%, #FFFFFF 20%, #000000 20%, #000000 80%, #FFFFFF 80%, #FFFFFF 100%);//WW3
}

Using the webkit extensions respectively.

Upvotes: 1

Related Questions