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

#css #svg #текст

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



Способы:

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


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

Ответы

Ответ 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);
}



Ответ 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;
}
SYSTEM

SYSTEM

SYSTEM


Ответ 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;
}
Некоторый текст




Или вы можете использовать :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;
}
Некоторый текст




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



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





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


Ответ 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; 
}


Источник с другими решениями