Проблема с text-shadow

230

14 апреля 2018, 17:25

Нужно сделать вот такой текст:

CSS Hat выдает следующий код по нему:

Когда применяю эти стили получаем совершенно другой рисунок. Предпологаю что CSS Hat не выдает какие-то градиенты. Помогите разобраться, как сделать такой же текст.

Upd Текст должен быть прозрачным и одновременно от контура букв распространялась тень.

p { 
	font-size: 128px; 
	font-weight: 700; 
	text-shadow: 0 0 85px #131824; 
	text-transform: uppercase; 
	color: transparent; 
}

<p>details</p>

Answer 1

Вариант с применением `svg filter`

В вопросе автору нужен был и прозрачный текст и одновременно тень от текста на background. Может и есть вариант решения с mask, чтобы сделать прозрачные буквы, но одновременное выполнение двух условий: прозрачности и тени в этом варианте не получилось.

Решение состоит из суммы нескольких простых приемов:

Прозрачность текста достигается - fill="none" stroke="white"
Применение двух команд c одинаковым текстом друг над другом
К нижней строчке текста применяется фильтр размытия Гаусса
Используя все эти составляющие и комбинируя изменения атрибутов внутри них можно получить интересные эффекты:

Прозрачность букв и внешняя тень, как у автора вопроса:

#txt1 { 
   font: 900 500% 'Arial Black', sans-serif; 
  font-size:160px; 
   filter:url(#gauss); 
}  
#txt2 { 
   font: 900 500% 'Arial Black', sans-serif; 
  font-size:160px; 
}

 <div  class="container"> 
<svg   width="100%" height="100%" viewBox="0 0 800 800" > 
 
    <defs> 
 	<mask id="txt1" width="1000px" height="1000px"> 
		 <rect width="100%" height="100%" filter="url(#gauss)"/> 
		 <text x="-100" y="200px"  style="fill:white;stroke-width:1;stroke:white;text-transform: uppercase;">details</text> 
    </mask>  
	<filter id="gauss" 
	   x="-20%" y="-20%" width="1000" height="1000"> 
       <feGaussianBlur in="SourceAlpha" stdDeviation="15"/>  
      <feOffset dx="10" dy="10" result="offsetblur"/>  
	  </filter> 
   </defs> 
   
 <image x="-200" y="-410" width="1000px" height="1000px" 
 xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/hawaii-beach.jpg"  > 
 </image>   
 <text id="txt1" x="10" y="240px"  style="fill:none;stroke-width:12;stroke:white;text-transform: uppercase; ">details</text>  
 <text id="txt2" x="10" y="245px"  style="fill:none;stroke-width:5;stroke:white;text-transform: uppercase; ">details</text> 
</svg> 
	</div>

Прозрачность букв с внутренней тенью:

#txt1 { 
   font: 900 500% 'Arial Black', sans-serif; 
  font-size:160px; 
   filter:url(#gauss); 
}  
#txt2 { 
   font: 900 500% 'Arial Black', sans-serif; 
  font-size:160px; 
  
  
}

 <div  class="container"> 
<svg   width="100%" height="100%" viewBox="0 0 800 800" > 
 
    <defs> 
 	<mask id="txt1" width="1000px" height="1000px"> 
		 <rect width="100%" height="100%" filter="url(#gauss)"/> 
		 <text x="-100" y="200px"  style="fill:white;stroke-width:1;stroke:white;text-transform: uppercase;">details</text> 
    </mask>  
	<filter id="gauss" 
	   x="-20%" y="-20%" width="1000" height="1000"> 
       <feGaussianBlur in="SourceAlpha" stdDeviation="5"/>  
      <feOffset dx="2" dy="5" result="offsetblur"/>  
	  </filter> 
   </defs> 
   
 <image x="-200" y="-410" width="1000px" height="1000px" 
 xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Foro_Romano.jpg/1200px-Foro_Romano.jpg"  > 
 </image>   
 <text id="txt1" x="10" y="240px"  style="fill:none;stroke-width:12;stroke:white;text-transform: uppercase; ">details</text>  
 <text id="txt2" x="10" y="235px"  style="fill:none;stroke-width:5;stroke:white;text-transform: uppercase; ">details</text> 
  
	</svg> 
	</div> 
</html>

Чёрно белый фон:

#txt1 { 
   font: 900 500% 'Arial Black', sans-serif; 
  font-size:160px; 
   filter:url(#gauss); 
}  
#txt2 { 
   font: 900 500% 'Arial Black', sans-serif; 
  font-size:160px; 
}

 <div  class="container"> 
<svg   width="100%" height="100%" viewBox="0 0 800 800" > 
 
    <defs> 
 	<mask id="txt1" width="1000px" height="1000px"> 
		 <rect width="100%" height="100%" filter="url(#gauss)"/> 
		 <text x="-100" y="200px"  style="fill:white;stroke-width:1;stroke:white;text-transform: uppercase;">details</text> 
    </mask>  
	<filter id="gauss" 
	   x="-20%" y="-20%" width="1000" height="1000"> 
       <feGaussianBlur in="SourceAlpha" stdDeviation="20"/>  
      <feOffset dx="10" dy="-10" result="offsetblur"/>  
	  </filter> 
   </defs> 
   
 <image x="-200" y="-410" width="1000px" height="1000px" 
 xlink:href="https://i.stack.imgur.com/J7KjZ.jpg"  > 
 </image>   
 <text id="txt1" x="10" y="240px"  style="fill:none;stroke-width:12;stroke:white;text-transform: uppercase; ">details</text>  
 <text id="txt2" x="10" y="250px"  style="fill:none;stroke-width:5;stroke:white;text-transform: uppercase; ">details</text> 
  
	</svg> 
	</div>

Answer 2

В общем если требуется создать прозрачность тексту то нам на помощь приходит SVG а конкретно mask т.е по другому сказать мы маскируем под буквами прозрачность (как меня здесь научили).

html { 
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale; 
  text-rendering: optimizelegibility; 
} 
 
html, 
body { 
  height: 100%; 
} 
 
body { 
  font-family: 'Open Sans', sans-serif; 
  font-weight: 900; 
} 
 
.text { 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 250px; 
  z-index: 10; 
} 
 
svg { 
  width: 100%; 
  height: inherit; 
} 
 
svg text { 
  text-anchor: middle; 
} 
 
svg #alpha { 
  fill: #666666; 
} 
 
svg #title { 
  letter-spacing: -2px; 
  font-size: 6em; 
  font-weight: 800; 
} 
 
svg #subtitle { 
  letter-spacing: 8px; 
  font-size: 1.2em; 
  font-weight: 300; 
  text-transform: uppercase; 
} 
 
svg #base { 
  fill: black; 
  -webkit-mask: url(#mask); 
  mask: url(#mask); 
} 
 
section.intro { 
  background: url(https://million-wallpapers.ru/wallpapers/2/79/10148432354989272479.jpg) no-repeat top center; 
  background-size: cover; 
  position: relative; 
  width: 100%; 
  min-height: 100%; 
}

<div class="text"> 
  <svg> 
   <defs> 
     <mask id="mask" x="0" y="0" width="100%" height="100%" > 
       <rect id="alpha" x="0" y="0" width="100%" height="100%"/> 
       <text id="title" x="50%" y="0" dy="1.58em" font-weight="900">SVG + CSS</text> 
       <text id="subtitle" x="50%" y="0" dy="9.8em" font-weight="900">Use it please!</text> 
     </mask> 
    </defs> 
 
    <rect id="base" x="0" y="0" width="100%" height="100%"/> 
  </svg> 
</div> 
 
<section class="intro"></section>

Пример взят : от сюда

или градиент с маской :

@import url("https://fonts.googleapis.com/css?family=Oswald:300,700"); 
body { 
  margin: 0; 
  font-family: "Oswald", sans-serif; 
  font-weight: 700; 
} 
 
svg { 
  display: block; 
} 
 
picture img { 
  position: fixed; 
  will-change: transform; 
  width: 100%; 
  z-index: -1; 
}

<picture> 
  <img src="https://s.cdpn.io/387787/header.jpg" alt=""> 
  <svg width="100%" height="1280"> 
    <defs> 
      <linearGradient id="gradient" gradientTransform="rotate(75)"> 
        <stop offset="15%" stop-color="#1a237e" /> 
        <stop offset="80%" stop-color="#00e5ff" /> 
      </linearGradient> 
      <mask id="mask"> 
        <rect width="100%" height="100%" fill="#fff" /> 
        <text x="10%" y="25%" font-size="4em" font-weight="300">Introducing</text> 
        <text x="10%" y="50%" font-size="17em" letter-spacing="10">SVG MASK</text> 
      </mask> 
    </defs> 
    <rect width="100%" height="100%" fill="url(#gradient)" fill-opacity="0.8" mask="url(#mask)" /> 
  </svg> 
</picture>

пример взят : от сюда

Answer 3

Добавьте белый цвет шрифту, добавьте размер тени:

p { 
	font-size: 128px; 
	font-weight: 700; 
	text-shadow: 0 0 100px #131824; 
	text-transform: uppercase; 
	color: white; 
}

<p>details</p>

Создание сайта для доставки еды в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

checkbox unchecked как отловить событие?

Мне нужно отловить событие когда чекбоксы был отжаты (их может быть сколько угодно вставляются циклом в HTML таблицу), и занести его значение...

293

HTML

Ссылка на всю кнопку меню

Помогите, не получаетсяКак сделать чтобы на всей кнопке в меню при наведении была бы ссылка?

210

HTML

Управление частотным диапазоном тега audio [Javascript]

211

HTML

В верстке появился символ, которого в ней нет

Добрый деньВерстаем проект для личных целей и в мобильной версии между блоками на некоторых страницах проявляется цифра "1"

137

Проблема с text-shadow

Вариант с применением svg filter

checkbox unchecked как отловить событие?

Ссылка на всю кнопку меню

Управление частотным диапазоном тега audio [Javascript]

В верстке появился символ, которого в ней нет

Вариант с применением `svg filter`