csstextopacityopacitymask

“negative” text in css?

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.sstatic.net/dWrgP.png

Solution

  • 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.