Есть такая картинка, на которой текст:
Можно ли на чистом CSS сверстать такой текст? Чтобы была обводка и свечение, как на картинке.
Есть такая картинка, на которой текст:
Можно ли на чистом CSS сверстать такой текст? Чтобы была обводка и свечение, как на картинке.
Есть более простой и удобный способ сделать это используя возможности webkit, предлагаю такое решение:
body {
background: rgb(19, 18, 24);
}
.glowing-text {
-webkit-text-stroke: 2px var(--color);
text-shadow: var(--color) 0 0 15px;
color: transparent;
font-family: Arial, 'Segeo UI';
font-size: 65px;
}
<span class="glowing-text" style="--color: rgb(31, 198, 234);">БОНУС<br> 100 FS</span>
<span class="glowing-text" style="--color: rgb(212, 17, 245);">150%</span>
Сначала сделаем саму обводку текста, цвет обводки берётся из переменной --color
которая указывается в inline-стилях (Стили указанные в HTML, в атрибуте style
). Далее делаем сам эффект свечения, он делается благодаря свойству text-shadow
в котором мы просто делаем тень размытой, цвет также взят с той же переменной. После чего мы делаем цвет текста прозрачным чтобы можно было увидеть фон сзади текста. После всё по вкусу, но если требуется объяснение, то вот: сделал текст более гладким с помощью шрифтов Arial
и Segoe UI
и сам текст большим (65 пикселей).
Можно на CSS:
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');
body {
background-color: #1c2555;
}
.text-light {
vertical-align: top;
display: inline-block;
font-size: 80px;
font-family: 'Roboto', sans-serif;
font-weight: 700;
white-space: nowrap;
color: rgba(28, 37, 85);
--os: 2px; /* outline size */
--osc: #fff; /* outline color */
--osb: 20px; /* outline shadow blur */
--osbc: rgba(255,255,255,.75); /* outline shadow blur color */
text-shadow:
calc(var(--os) * 1.306562965) calc(var(--os) * .541196101) 0 var(--osc),
calc(var(--os) * 1.414213562) 0 0 var(--osc),
calc(var(--os) * 1.306562965) calc(var(--os) * -.541196101) 0 var(--osc),
calc(var(--os) * 1) calc(var(--os) * -1) 0 var(--osc),
calc(var(--os) * .541196101) calc(var(--os) * -1.306562965) 0 var(--osc),
0 calc(var(--os) * -1.414213562) 0 var(--osc),
calc(var(--os) * -.541196101) calc(var(--os) * -1.306562965) 0 var(--osc),
calc(var(--os) * -1) calc(var(--os) * -1) 0 var(--osc),
calc(var(--os) * -1.306562965) calc(var(--os) * -.541196101) 0 var(--osc),
calc(var(--os) * -1.414213562) 0 0 var(--osc),
calc(var(--os) * -1.306562965) calc(var(--os) * .541196101) 0 var(--osc),
calc(var(--os) * -1) calc(var(--os) * 1) 0 var(--osc),
calc(var(--os) * -.541196101) calc(var(--os) * 1.306562965) 0 var(--osc),
0 calc(var(--os) * 1.414213562) 0 var(--osc),
calc(var(--os) * .541196101) calc(var(--os) * 1.306562965) 0 var(--osc),
calc(var(--os) * 1) calc(var(--os) * 1) 0 var(--osc),
0 0 var(--osb) var(--osbc);
}
.text-lignt--color-1 {
--osc: #20bde0;
--osbc: rgba(32,189,224, .75);
margin-right: 1ch;
}
.text-lignt--color-2 {
--osc: #bc23d6;
--osbc: rgba(188,35,214, .75);
}
<div class="text-light text-lignt--color-1">БОНУС<br>100 FS</div>
<div class="text-light text-lignt--color-2">150%</div>
Но лучше такое сделать на SVG, предварительно конвертировать текст в кривые.
По просьбе комментатора делаю описание кода)
Основная масса кода - text-shadow
, много параметров, т.к. они создают обводку вокруг текста, несмотря на то, что есть как -webkit-text-stroke
, но оно полностью не поддерживается IE, если требуется его поддержка, то придётся костылить засчёт text-shadow
.
Первая строчка text-shadow
просто белая подложка, чтобы прозрачный цвет не сливался с обводной.
Со второй до предпоследней - специально высчитанный мной код, чтобы сделать обводку более плотной, там каждый цвет располагается на определённый угол, кол-во строк == кол-ву сегментов (для примера скрин - где текст имеет обводку из 4х теней (4х сегментов), 12 и 40. Но в данном коде выше, используется 16 сегментов и этот параметр не изменяется. Код генерировался тут (Миксин outline text для Stylus)).
Последняя строчка отвечает уже за свечение текста.
CSS переменные используются для удобной "кастомизации" всех значений:
--os
- размер "обводки"
--osc
- цвет обводки
--osb
- размер размытия свечения
--osbc
- цвет свечения
Каждый параметр может быть общим для всех и\или изменятся для конкретного элемента.