How to apply texture to text with a shadow
Miles Rose
I am trying to style some text to look like a paper cut-out by adding an image texture and a drop shadow.
I have applied an image texture to the text using CSS; however, when I try to add text-shadow the shadow appears in front of the text rather than behind it.
@import url(https://fonts.googleapis.com/css?family=Slackey);
.paperText {
font-family: 'Slackey', cursive;
background:url('http://i.imgur.com/sEWJZF2.jpg');
font-size:60px;
text-align:center;
color:transparent;
-webkit-background-clip:text;
text-shadow: 5px 5px 10px #000;
}
<h1 class="paperText"><HEAD>Texture</HEAD></h1>
How can I get the shadow to appear behind the text?
partypete25
I don't think it's possible to do that on the one element. What you can do is create another element to handle the text-shadow and then layer that behind the original.
.paperText:after {
position:absolute;
top:0;
left:0;
color:#fff;
content:'Texture';
z-index:-1;
text-shadow: 5px 5px 10px #000;
text-align:left;
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
- Prev: Looking for differences btw. linear regression lines in R
- Next: Maximum possible length of string literal in C
Related
TOP Ranking
- 1
Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background
- 2
pump.io port in URL
- 3
Failed to listen on localhost:8000 (reason: Cannot assign requested address)
- 4
How to import an asset in swift using Bundle.main.path() in a react-native native module
- 5
How to use HttpClient with ANY ssl cert, no matter how "bad" it is
- 6
Modbus Python Schneider PM5300
- 7
What is the exact difference between “ use_all_dns_ips” and "resolve_canonical_bootstrap_servers_only” in client.dns.lookup options?
- 8
Spring Boot JPA PostgreSQL Web App - Internal Authentication Error
- 9
BigQuery - concatenate ignoring NULL
- 10
split column by delimiter and deleting expanded column
- 11
Unable to use switch toggle for dark mode in material-ui
- 12
Soundcloud API Authentication | NodeWebkit, redirect uri and local file system
- 13
Apache rewrite or susbstitute rule for bugzilla HTTP 301 redirect
- 14
Is there an option for a Simulink Scope to display the layout in single column?
- 15
UWP access denied
- 16
Center buttons and brand in Bootstrap
- 17
express js can't redirect user
- 18
Make a B+ Tree concurrent thread safe
- 19
Printing Int array and String array in one
- 20
Google Chrome Translate Page Does Not Work
- 21
Elasticsearch - How to match number range in string
Comments