Тень текста самим текстом

220

13 сентября 2017, 11:17

Добрый вечер! Нужно сделать то, что на картинке. Тень текста самим текстом. Хочется сделать более грамотно. Возможно у вас есть какие-тo предложения по этому поводу?

Answer 1

Например, так:

html, 
body { 
  padding: 0; 
  margin: 0; 
  background: #e2cfce; 
} 
 
.text { 
  max-width: 600px; 
  margin: 30px auto; 
  text-align: center; 
  font-family: 'Roboto', sans-serif; 
  font-weight: 700; 
  text-transform: uppercase; 
  position: relative; 
  font-size: 20px; 
  line-height: 40px; 
  color: #3f3e45; 
  z-index: 2; 
} 
 
.text:before { 
  display: block; 
  content: attr(data-text); 
  position: absolute; 
  z-index: -1; 
  left: 0px; 
  top: 20px; 
  right: 0px; 
  font-family: 'Marck Script', cursive; 
  text-transform: none; 
  font-weight: 400; 
  color: #b899a9; 
  letter-spacing: 0.15em; 
}

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css?family=Marck+Script" rel="stylesheet"> 
<div class="text" data-text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt"> 
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt 
</div>

Выдержка из статьи про свойство content:

attr(<атрибут>)

Возвращает строку, которая является значением атрибута тега указанного в скобках. Например, a::after {content:attr(href)} добавит после ссылки её адрес, т. е. значение атрибута href. Если указанного атрибута нет, то вернётся пустая строка.