How to apply texture to text with a shadow


Tags: css,text,textures,shadow

Problem :

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?



Solution :

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; 
}

https://jsfiddle.net/3tkm7gj7/1/


    CSS Howto..

    How to include a google map in an application

    How to FadeIn a parent element and then it's child elements with a slight Delay (CSS Only)

    bootstrap css, how to make full width div inside container

    How to show list items in menu when hover on the parent's it via CSS? [closed]

    How to use JQuery to identify CSS 'text-decoration' [closed]

    How can i overwrite media queries defined in Bootstrap CSS

    How to Change the Color of Selected Content

    How to load CSS into CodeIgniter

    How to change css style value using php in a for loop?

    How to inserted HTML tag from pseudo-element content: [duplicate]

    How to add dynamic CSS source urls in Squishit?

    JQuery.ready is too late: How do I apply CSS Values with JQuery before Rendering?

    How do you mimic multi row horizontal scroll table behavior with CSS and Divs?

    How to design a cross client / browser compatible email?

    How to read minified CSS?

    CSS: How to make this topheader?

    How to define alternative font-family corresponding to font-size CSS

    How to link to a CSS if a certain condition happens?

    how to solve slideshow css problem?

    How to vertical-align:bottom 2 floated divs with text

    How to put all css files in one file and all javascript files in one file

    How to divide a menu horizontaly between buttons , using CSS?

    How to have div horizontally scroll when resized.

    Hide Show content-list with only CSS, no javascript used

    Issue with changing how containers look based on values in an MD array

    How to create a multi colored circle in html and css

    How can I get my divs to process separately?

    How to make a span tag wider with an alphabet inside?

    How do I make a div take the remaining height of a parent?

    How to add a “new line” after a ZF2 form element?