5

i was wondering if it was somehow possible to create an effect as shown in the attached picture with simple css. What would be the next best alternative? Thanks in advance!

https://i.stack.imgur.com/dWrgP.png

einUsername
  • 1,569
  • 2
  • 15
  • 26
  • Probably with a mask. Apple has done this [with an image](http://developer.apple.com/safaridemos/showcase/video/) (turn mask on) but I'm not sure how to do this with text. Good question. –  Oct 05 '11 at 14:09
  • I don't believe that it is. Do you need to do this dynamically? If not, I'd just suggest using photo shop or the like to make the images. – jtfairbank Oct 05 '11 at 14:10
  • 3
    I think you'd need an overlay with a hole in it shaped like the number, then a second overlay that contains the number, which is also translucent. – Diodeus - James MacFarlane Oct 05 '11 at 14:14
  • The answer to _simple_ CSS is no. With _advanced_ CSS, perhaps — but only with the use of a few images. Do you want to create the repeating patterns, inner glows all with CSS, and without a mess of DIVs used to mask out the 'hole' of the number? It would be a lot simpler to have the pattern and number marks as images; from there the CSS won't be too bad. – Jon Adams Oct 05 '11 at 16:24
  • I guess its not possible with the help of css. neither its right palace to ask – Jack Oct 05 '11 at 11:49
  • Then where is the right place? Is there a stack-site for such questions? – einUsername Oct 05 '11 at 12:46
  • Effects like that will more than likely be a bit more browser specific. Here' s a link for firefox. https://developer.mozilla.org/en/Canvas_tutorial/Compositing Also, I think this question would be more appropriate on StackOverflow. – Hanna Oct 05 '11 at 23:33
  • 1
    Purely CSS questions are on-topic for Graphic Design. But, if an answer is not accepted by tomorrow, I'll push it over to Stackoverflow. – Philip Regan Oct 06 '11 at 09:58
  • Related question / possible duplicate of: http://stackoverflow.com/q/13932946 – tanius Oct 17 '15 at 15:25

2 Answers2

2

Currently you can't achieve this using only CSS. However, you can do that in webkit based browsers (Safari, Chrome etc.) using CSS extentsions and emulate via SVG in other modern browsers which supports SVG.

Example markup for webkit based browsers:

<!DOCTYPE html>
<html><head>
<title>Foo</title>
</head><body>
    <div class="mask">
        <h1>Masked Text</h1>
    </div>
</body></html>

and Css:

.mask {
    font-size:90px;
    font-family:Arial, sans;
    font-weight:700;
    background:white url(/image.jpg) repeat;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

See working example here : http://jsfiddle.net/Q9JWM/ (Works only Chrome & Safari)

Also here a SVG emulation experiment to achieve masked text effect.

edigu
  • 9,878
  • 5
  • 57
  • 80
0

Look into opacity. Here's a link to documentation from W3C. And this IS probably a stackoverflow question...however, the point of CSS is to control presentation - ergo, design of the page, thus fulfilling a requirement of this site as well.

Dawson
  • 7,567
  • 1
  • 26
  • 25