Можете ли вы создать горизонтально перевернутую текстовую тень, используя только CSS-свойство text-shadow - PullRequest
Новая
       15

Можете ли вы создать горизонтально перевернутую текстовую тень, используя только CSS-свойство text-shadow

1 голос
/ 16 июня 2019

Можно создать тени текста в CSS, используя, например, text-shadow: 5px 10px;.Однако, если я хочу смоделировать истинную тень, которая обычно влечет за собой отражение тени по горизонтали и, возможно, ее небольшое масштабирование (в зависимости от того, где находится предполагаемый источник света).

Мой вопрос заключается в том, возможно ли создать этот эффект исключительно с использованием свойства text-shadow, например, что-то вроде синтаксиса 

text-shadow: -100px 200px 69px rgba(0,0,0,0.2);

, но с дополнительными параметрами для переключения.Или это невозможно, и мне приходится прибегать к ручному копированию исходного текста и выполнению стандартных преобразований для него?

Спасибо.

Ответы [ 2 ]

1 голос
/ 16 июня 2019

Этого можно добиться с помощью псевдоэлемента ::after и свойства transform: 

html, body{
  height: 100%;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
}
.shadow{
  font: 80px sans-serif;
  text-shadow: -100px 200px 69px rgba(0,0,0,0.2);
}
.shadow::after{
  content: "Shadow Text";
    display: block;
    color: rgba(0,0,0,.65);
    transform: rotate3d(1, 0, 0, 148deg) scale(1, 3) skew(-50deg, 0deg);
    margin: 12px 0 0 35px;
}
<span class="shadow">Shadow Text</span>
1 голос
/ 16 июня 2019

Я думаю, что единственный способ - дублировать текст: 

.box {
  font-size:30px;
  margin:20px;
  display:inline-block;
  position:relative;
}
.box:before,
.box:after{
  content:attr(data-text);
}

.box:after {
  position:absolute;
  top:0;
  left:0;
  
  /*text-shadow: 50px 20px 2px rgba(0,0,0,0.4);*/
  filter:blur(2px);
  transform:translate(50px,20px) rotate(15deg);
  color:rgba(0,0,0,0.4);
}
<div class="box" data-text="some text"></div>
...