Прозрачный текст с белым бордером

135

19 сентября 2019, 22:20

Каким образом достичь данного результата?

Способы:

color: rgba(255,255,255,0.01)
background-clip
color: transparent + text-shadow

Не дали результатов

Answer 1

Можно с помощью svg:

body { 
  background: #b4e391; 
  background: -moz-linear-gradient(-45deg, #b4e391 0%, #61c419 50%, #b4e391 100%); 
  background: -webkit-linear-gradient(-45deg, #b4e391 0%, #61c419 50%, #b4e391 100%); 
  background: linear-gradient(135deg, #b4e391 0%, #61c419 50%, #b4e391 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4e391', endColorstr='#b4e391', GradientType=1); 
}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 80"> 
	<text y="50" fill="transparent" 
    font-size="50px"  
    font-weight="bold" 
    stroke="#FFFFFF" stroke-width="1">Ваш текст</text> 
</svg>

Answer 2

А как же старый добрый -webkit-text-stroke? Вроде уже и поддержка неплохая. Может я чего-то не понял, но в метках есть [CSS], а это он самый, в чистом виде и с минимумом кода:

body { 
  background: url(http://lorempixel.com/600/600/) no-repeat; 
  font: bold 96px 'Arial Black'; 
  text-align: center; 
} 
 
.txt-1 { 
  color: rgba(255, 141, 0, 0.0); 
  -webkit-text-stroke: 1px white; 
} 
.txt-2 { 
  color: rgba(255, 141, 0, 0.38); 
  -webkit-text-stroke: 1px black; 
} 
.txt-3 { 
  color: rgba(128, 255, 0, 0.38); 
  -webkit-text-stroke: 4px red; 
}

<span class="txt-1">SYSTEM</span><br> 
<span class="txt-2">SYSTEM</span><br> 
<span class="txt-3">SYSTEM</span>

Answer 3

Используйте значение rgba() для свойства color

div { 
  font-family: Arial Black, Arial Bold, Gadget, sans-serif; 
  color: rgba(255, 255, 255, 0.4); 
  font-size: 80px; 
  margin-left: 25px; 
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; 
}

<div>Некоторый текст</div>

Или вы можете использовать :pseudo-element.

div { 
  position: relative; 
  font-family: Arial Black, Arial Bold, Gadget, sans-serif; 
  font-size: 80px; 
  margin-left: 25px; 
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; 
} 
 
div:after { 
  position: absolute; 
  top: 0; 
  left:0; 
  content: 'Некоторый текст'; 
  width: 100%; 
  height: 100%; 
  font-family: Arial Black, Arial Bold, Gadget, sans-serif; 
  color: white; 
  opacity: 0.4; 
  font-size: 80px; 
  z-index: 1; 
  pointer-events: none; 
}

<div>Некоторый текст</div>

Или вы можете использовать SVG.

body, html { 
  height: 100%; 
  margin: 0; 
  background: url(http://lorempixel.com/500/200/) no-repeat; 
}

<svg width="460" height="100"> 
  <text fill="white" fill-opacity="0.4" font-size="60" x="240" y="70" text-anchor="middle" stroke="black">Некоторый текст</text> 
</svg>

Перевод ответа со Stack Overflow на английском

Answer 4

Попробуй с помощью псевдо элементов:

div { 
position: relative; 
font-family: Arial Black, Arial Bold, Gadget, sans-serif; 
font-size: 80px; 
margin-left: 25px; 
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; 
} 
div:after { 
position: absolute; 
top: 0; 
left:0; 
content: 'Some text'; 
width: 100%; 
height: 100%; 
font-family: Arial Black, Arial Bold, Gadget, sans-serif; 
color: white;
opacity: 0.4; 
font-size: 80px; 
z-index: 1; 
pointer-events: none; 
}