4

введите сюда описание изображения

Подскажите пожалуйста как сделать обводку букв с помощью css ?

8

2 ответа 2

3

Вариант с text-shadow:

body {
  background: #ccc;
}

h1 {
  text-transform: uppercase;
  font-family: Arial Black;
  text-align: center;
  font-size:3.5rem;
  
  -webkit-text-stroke: 1px black;
   color: white;
    text-shadow:
       2px  2px 0 #000,
      -1px -1px 0 #000,  
       1px -1px 0 #000,
      -1px  1px 0 #000,
       1px  1px 0 #000;
  
}
<h1>Почувствуй атмосферу</h1>

Вариант с svg:

body {
  background: #ccc;
}

svg text {
  text-transform: uppercase;
  font-family: Arial Black;
  font-size:32px;
}
<svg  width="100%" viewBox="0 0 600 100">
<text x=0 y=32 fill='white' stroke='black' stroke-width='2'>
    Почувствуй атмосферу
</text>
</svg>

0
0

Можно с помощью теней, накладываете 4 тени и каждую двигаете в разные стороны

div {
  font-size: 46px;
  color: #fff;
  font-family: sans-serif;
  font-weight: bold;
  text-shadow: .04em 0 #000, -.04em 0 #000, 0 .04em #000, 0 -.04em #000;
}
<div>ПОЧУВСТВУЙ АТМОСФЕРУ</div>

Можете также посмотреть в сторону -webkit-text-stroke

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.