Как создать стиль как в приложении

Question

Я начинающий с CSS.Как я могу сгенерировать CSS для создания эффекта тени как во вложении?

Answer 1

Используйте свойство text-shadow.

Вот пример, который дает внутреннюю тень текста.

font: bold 200px arial, sans-serif;
background-color: #565656;
color: transparent;
text-shadow: 2px 2px 3px rgba(255,255,255,0.5);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;

Вот пример

Answer 2

HTML:

<p>
  CUSTOM FRAMING from $99
</p>

CSS:

p {
  -webkit-text-fill-color: rgb(255, 255, 255);
  color: rgb(255, 255, 255);
  -webkit-text-stroke: 1px rgb(150, 150, 150);
  text-shadow: -2px 0px 2px rgb(150, 150, 150);
  font-size: 30px; /* Optional. Just for demo purposes. */
}

Фрагмент ниже:

p {
  -webkit-text-fill-color: rgb(255, 255, 255);
  color: rgb(255, 255, 255);
  -webkit-text-stroke: 1px rgb(150, 150, 150);
  text-shadow: -2px 0px 2px rgb(150, 150, 150);
  font-size: 30px; /* Optional. Just for demo purposes. */
}

<p>
  CUSTOM FRAMING from $99
</p>

Answer 3

Вы можете использовать это, и все готово ...

span {
    -webkit-text-fill-color: white; /* Will override color (regardless of order) */
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: grey;
    text-shadow: -2px -1px 10px rgba(0,0,0,0.6);
}