All geek questions in one place

Light text with CSS 3

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

Light shade text image preview

using CSS3 and how?

+6
source share
3 answers

mJR6J.jpg

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 the above snippet in JsFiddle: http://jsfiddle.net/HkTqe/6/

Firefox and 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 divs in this order with the same text content; otherwise it will not work.

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

+6
source

Not really, but you can try various almost. See this post for many examples:

+1
source

You can also create it using -webkit-mask-image - but it will only work in webkit browsers again. You need to compile a transparent cloud image in prohotshop (the way you want it to look - I just rendered / clouds and converted it using the aplha channel - changing it a little, you could achieve the same effect as in your design ) and apply it as a mask and fix the mask in the text. Webkit is great for this, but sux as it is not supported in all browsers.

Creating this exact effect using 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>
+1
source

Source: https://habr.com/ru/post/893776/

More articles:


All Articles