2
Можно ли создать двойной контур для номера, как вы видите на картинке ниже (я имею в виду зеленый и белый контур)Можно создать двойной контур для числа с css?
Любая идея?
A
ответ
2
В зависимости от браузеров, которые необходимо поддерживать, это не тот же самый эффект, но вы могли бы достичь чего-то подобное с комбинацией текста-тени и -webkit-текст-тактный.
text-shadow: 4px 4px 0 green;
-webkit-text-stroke: 2px white;
https://jsfiddle.net/agentfitz/rs27av43/4/
Вот еще один вариант (возможно, лучше) с помощью ::before и custom data attributes - подпорки к Код Carnivore для этого интеллектуального решения)
+0
Да точно. Я тоже пытался с этим сочетанием. Спасибо @Brian FitzGerald –
+0
Ницца! Рад, что это сработает для вас. –
+0
Это будет трудно от ответной точки, так как при изменении размеров шрифта все выглядит уродливо –
2
Вы можете играть с текстовой тенью. Это выглядит не круто, но я думаю, что это все, что вы можете сделать с помощью css.
Оригинал article на CSSTricks.
body {
background-color: green;
}
span {
font-size: 70px;
font-family: Arial;
font-weight: bold;
color: block;
text-shadow:
-2px -2px 0 green,
2px -2px 0 green,
-2px 2px 0 green,
2px 2px 0 green,
-3px -3px 0 white,
3px -3px 0 white,
-3px 3px 0 white,
3px 3px 0 white;
}<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>A</span>
<span>B</span>+0
Хмм хорошая идея, но при создании номеров меньше всех раздавит, мне нужно какое-то отзывчивое решение @ 3rdthemagical –
+0
@AnahitDEV Для небольших размеров шрифтов вы можете уменьшить размер тени текста от 2px до 1px и от 3px до 2px. Или вы можете использовать только внешнюю тень. Это все, что я могу порекомендовать. – 3rdthemagical
+0
Да, я вижу. спасибо @ 3rdthemagical –
Просто чтобы прояснить, сделать вы хотите это для ** _ любого _ ** числового символа в телетексте или числа внутри контейнера (div, span и т. д.)? –
Мне нужно для ЛЮБОГО числового и текстового символа @Lars Kristensen. Спасибо за разъяснение –