Блог

Главная - Вопросы по программированию - Добавление полосатого текста-тень и обводка

Добавление полосатого текста-тень и обводка

#html #css #shadow

#HTML #css #тень

Вопрос:

Я пытаюсь добавить полосатую текстовую тень вместе с обводкой, как на изображении ниже

полосатый текст

Это то, что у меня есть до сих пор, это близко, но не правильно. Я не могу заставить его работать точно так, как показано на картинке

 .headingStyle {
    background-image: -webkit-repeating-linear-gradient(60deg, #ccc, #ccc 1px, #fff 2px, #fff 3px);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position:relative;
    text-transform: uppercase;
    font-weight: 700;
}
.headingStyle:after {
    background: none;
    content: attr(data-text);
    left: -.1em;
    position: absolute;
    text-shadow: 1px 1px 0px #000;
    top: -.05em;
    text-transform: uppercase;
}









/**/
h1 {
  font-size: 5em;
  font-family: sans-serif;
  margin-left: 100px;}  
 <h1 class="headingStyle" data-text="UNION">UNION</h1>

Найдите здесь рабочий пример:https://codepen.io/patie/pen/KKzWmNV

Ответ №1:

Вот еще одно приближение, но без прозрачности:

 .headingStyle {
  position: relative;
  display:inline-block;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing:5px;
  overflow:hidden;
}

.headingStyle:before {
  content: attr(data-text);
  left: 0;
  position: absolute;
  z-index:-1;
  text-shadow:
   1px 1px 0px #fff,
   1.3px 1.3px 0px #fff,
   2px 2px 0px #000,
   3px 3px 0px #000,
   4px 4px 0px #000,
   5px 5px 0px #000,
   6px 6px 0px #000,
   7px 7px 0px #000;
  top: 0;
  color:transparent;
}
.headingStyle:after {
  content:"";
  position:absolute;
  z-index:-1;
  top:-200vmax;
  left:0;
  right:0;
  bottom:-200vmax;
  background-image:repeating-linear-gradient(0deg, transparent 0 1px, #fff 1.5px 3px);
  transform:skewY(45deg);
}

/**/

h1 {
  font-size: 5em;
  font-family: sans-serif;
  margin-left: 100px;  
 <h1 class="headingStyle" data-text="UNION">UNION</h1>