Geek Answers Handbook

"negative" text in css?

I was wondering if it is possible to create an effect, as shown in the attached figure, with simple css. What would be the best alternative? Thanks in advance!

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

+4
source share
3 answers

I think this may be what you are looking for. Of course, this is not very well supported in browsers, but you did not specify this as a requirement!

+3
source

Currently, you cannot achieve this using only CSS. However, you can do this in webkit-based browsers (Safari, Chrome, etc.) using CSS extensions and emulate via SVG in other modern browsers that support 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 a working example here: http://jsfiddle.net/Q9JWM/ (works only with Chrome and Safari)

Also experiment SVG emulation to get hidden text effect.

+1
source

Take a look at opacity . Here is a link to the documentation from W3C. And this is probably a stackoverflow question ... however, the point of CSS is to control the presentation - ergo, page design, thereby fulfilling the requirement of this site.

0
source

More articles:


All Articles