CODEWITHSUNDEEP
textcssshadow
Neri Barakat
Neri Barakat

Reputation: 1593

light text shade with CSS 3

Is it possible to have the same text effect (inner shadow, shade) as this image:

Light shade text image preview

using CSS3, and how?

Upvotes: 7

Views: 1553

Answers (3)

Pindatjuh
Pindatjuh

Reputation: 10526

WebKit-only (Safari/Chrome):

<style>
    h1 {
        background-color: rgba(0,0,0,0.8);
        -webkit-background-clip: text;
        color: transparent;
        text-shadow: rgba(255,255,255,0.5) 0 2px 2px;
    }
</style>
<h1>Hello StackOverflow</h1>

Here you can see above snippet in JsFiddle: http://jsfiddle.net/HkTqe/6/

Firefox & WebKit:

<style>
    .trick1 {
        color: black;
        height: 2em;
    }
    .trick2 {
        color: transparent;
        text-shadow: rgba(255,255,255,0.8) 0 5px 5px;
        margin-top: -2em;
    }
</style>
<div class="trick1">Text in Light Shade</div>
<div class="trick2">Text in Light Shade</div>

Note that you must have two div's in that order, with the same textual content; else it won't work.

Comparison of both techniques: http://jsfiddle.net/bABuM/

Upvotes: 7

easwee
easwee

Reputation: 15895

You could also create it using -webkit-mask-image - but it will again work only in webkit browsers. You need to crate the transparent cloudy image in prohotshop (the way you want it to look - i just did a render/clouds and transformed it using aplha channel - by tweaking it a bit you could achieve the same looking effect as in your design) and than apply it as mask and clip the mask to text. Webkit is wonderful for this but sux since it's not supported in all browsers.

Creating that exact same effect with css3 is currently not possible

http://jsfiddle.net/easwee/VMSD6/2/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <style type="text/css">
    h1 {
        font-size:50px;
        font-weight:bold;
        font-family:Arial Black;
        color:#666;
        -webkit-mask-image:url("mask.png");
        -webkit-mask-clip:text;
        background:black;
    }
    </style>
</head>
<body>
<h1>SAMPLE TEXT</h1>
</body>
</html>

Upvotes: 1

sqwk
sqwk

Reputation: 1596

Not really, but you can try various almosts. See this post for lots of examples:

Upvotes: 1

Related Questions