Создание инсульта и тени - HTML, CSS - PullRequest
0 голосов
/ 22 февраля 2019

Возможно ли создать текст, подобный изображенному ниже?Text Shadow Image

Самое близкое, что я могу получить, это css:

-webkit-text-fill-color: white;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
text-shadow: 0px 0px red, 3px 3px red;

Ответы [ 2 ]

0 голосов
/ 23 февраля 2019

Вот еще одна идея с mix-blend-mode, где вы, вероятно, будете иметь лучшую поддержку, чем text-fill и text-stroke, но вам придется дублировать текст:

.text {
  font-family: 'Roboto', sans-serif;
  font-size:50px;
  font-weight: bold;
  position:relative;
  display:inline-block;
  letter-spacing:4px;
}
.text::before,
.text::after {
  content:attr(data-text);
}
.text::before {
  color:red;
  position:relative;
  /*offset the red text*/
  top:3px;
  left:3px;
}
.text::after {
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  color:#fff; /*use white*/
  /*create the stroke around text*/
  text-shadow:
    1px 0 0 #000,
    0 1px 0 #000,
    1px 1px 0 #000,
    -1px 0 0 #000,
    0 -1px 0 #000,
    -1px -1px 0 #000,
    -1px 1px 0 #000,
    1px -1px 0 #000;
  mix-blend-mode: darken; /*means that white on red will give red! */
}
<link href="https://fonts.googleapis.com/css?family=Roboto:900" rel="stylesheet">

<div class="text" data-text="LEARN TO CODE"></div>
0 голосов
/ 22 февраля 2019

Используйте это

div {
  font-family: 'Roboto', sans-serif;
  font-size:50px;
  font-weight: bold;
  color:transparent;
  text-shadow:3px 3px 0 red;
   -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:900" rel="stylesheet">

<div>LEARN TO CODE</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...