Как сделать эффект тиснения на CSS?

593

26 декабря 2017, 15:13

Текст в Photoshop сделан с эффектом тиснения, как это сделать на CSS?

Answer 1

@import url('https://fonts.googleapis.com/css?family=Sacramento'); 
body { 
  font-family: 'Sacramento', cursive; 
  font-size: 800%; 
  background-color: darkgray; 
  color: yellow; 
  font-style: italic; 
  text-shadow: 7px 7px 2px grey; 
}

Lorem ipsum

upd. Погуглил что такое тиснение:

@import url('https://fonts.googleapis.com/css?family=Leckerli+One'); 
body { 
  font-family: 'Leckerli One', cursive; 
  font-size: 600%; 
  background-color: #ccc; 
  color: #aaa; 
  font-style: italic; 
  text-shadow: 1px 1px 1px #fff; 
}

Lorem ipsum

Answer 2

@import url('https://fonts.googleapis.com/css?family=Sacramento'); 
body { 
  background:#ccc; 
} 
h2 { 
  font:200px 'Sacramento', cursive; 
  font-style: italic;  
  font-weight: normal; 
  background-color: #565656; 
  color: transparent; 
  text-shadow: 2px 2px 3px rgba(210,193,163,1), 0px 8px 0px rgba(0, 0, 0, .18); 
  -webkit-background-clip: text; 
     -moz-background-clip: text; 
          background-clip: text; 
}