Я хотел сделать обводку уже имеющегося текста на чистом css, но столкнулся с проблемой позиционирования и создания обводки шрифта. Есть ли у вас идеи, как сделать это правильно сделать или популярный метод решения этого вопроса
4 ответа
Есть как минимум 2 варианта, как сделать такую обводку текста с помощью:
-webkit-text-stroke
- svg text
body {
background: black;
}
h1 {
text-transform: uppercase;
font-size: 72px;
font-family: 'Aerial', sans-serif;
position: relative;
left: 2rem;
color: white;
}
h1:before {
content: attr(data-style);
position: absolute;
left: -1.5rem;
color: transparent;
-webkit-text-stroke: 1px #ffffff50;
z-index: 0;
}
<h1 data-style="About Us">About Us</h1>
<svg viewbox="0 0 10 2">
<text x="3" y="1" text-anchor="middle" font-size="1" font-weight="bold" fill="#fff" stroke-width=".015" font-family="Arial, sans-serif">ABOUT US</text>
<text x="2.7" y="1" text-anchor="middle" font-size="1" font-weight="bold" fill="none" stroke-width=".015" stroke="#ffffff50" font-family="Arial, sans-serif">ABOUT US</text>
</svg>
Пример
Для обводки текста -webkit-text-stroke, поддержка > 97%
body {
padding: 3rem;
background-color: #000;
}
.heading {
position: relative;
font-family: sans-serif;
}
.heading__title {
font-size: 8vw;
color: #fff;
margin: 0;
position: relative;
z-index: 2;
text-transform: uppercase;
}
.heading__title--stroke {
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 1px rgba(255, 255, 255, .25);
position: absolute;
top: 50%;
left: -3vw;
transform: translateY(-50%);
}
<div class="heading">
<h1 class="heading__title">About us</h1>
<h1 class="heading__title heading__title--stroke">About us</h1>
</div>
Не совсем оно, но без повтора текста, и на вид похоже:
body {
background: black;
}
h1 {
text-transform: uppercase;
font-size: 3em;
letter-spacing: .25ch;
font-family: sans-serif;
padding: .5em 2em;
color: white;
text-shadow: -1ch 0 2px black, -1ch 0 white;
}
<h1>About us</h1>
Можно сделать основной текст обведённым, а белый - тенью:
body {
background: black;
}
h1 {
text-transform: uppercase;
font-size: 3em;
letter-spacing: .25ch;
font-family: sans-serif;
color: white;
padding: .5em 1em;
}
@supports (-webkit-text-stroke: 1px rgba(255, 255, 255, .5)) {
h1 {
color: transparent;
-webkit-text-stroke: 1px rgba(255, 255, 255, .5);
text-shadow: 1ch 0 white;
}
}
<h1>About us</h1>