CSS3 работает с: before,: after текста, чтобы создать врезку и врезку - PullRequest
Новая
       23

CSS3 работает с: before,: after текста, чтобы создать врезку и врезку

0 голосов
/ 06 декабря 2018

Я пытаюсь сделать две тени текста - вставку и выезд.Я успешно сделал вставку и пытаюсь нанести еще одну белую тень - что-то вроде 

text-shadow: x x x black, y y y white;

Это выглядит немного уродливо, поэтому я решил сделать это через :before и :afterпсевдо-элементы.У меня возникли проблемы:

Bad text shadow

.CWE1 {
  position: relative;
  font-family: "GillSansMT Bold";
  text-align: center;
  font-size: 60px;
  z-index: 0;
}

.CWE1:before {
  position: relative;
  content: attr(data-text);
  color: transparent;
  background-color: black;
  -webkit-background-clip: text;
  text-shadow: 0px 1px 1px #6b4848;
  z-index: 1;
}

.CWE1:after {
  position: absolute;
  content: attr(data-text);
  left: 0;
  top: 0;
  text-shadow: 2px 3px 1px white;
  z-index: -1;
}
<span class="CWE1" data-text="Clean, Wonderful & Effective"></span>

Ответы [ 2 ]

0 голосов
/ 06 декабря 2018

span - встроенный элемент, и если вы сделаете интервал inline-block or block, вы сможете достичь того, что ищете. 

.CWE1 {
  position: relative;
  display: inline-block;
  font-family: "GillSansMT Bold";
  text-align: center;
  font-size: 60px;
  z-index: 0;
}

.CWE1:before {
  position: relative;
  content: attr(data-text);
  color: transparent;
  background-color: black;
  -webkit-background-clip: text;
  text-shadow: 0px 1px 1px #6b4848;
  z-index: 1;
}

.CWE1:after {
  position: absolute;
  content: attr(data-text);
  left: 0;
  top: 0;
  text-shadow: 2px 3px 1px white;
  z-index: -1;
}
<span class="CWE1" data-text="Clean, Wonderful & Effective"></span>
0 голосов
/ 06 декабря 2018

У вас проблемы с коллапсом.Если у вас .CWE1, .CWE1:before и .CWE1:after все есть display: block;, похоже, он должен выполнить то, что вам нужно. 

.CWE1 {
  display: block;
  position: relative;
  font-family: "GillSansMT Bold";
  text-align: center;
  font-size: 60px;
  z-index: 0;
}

.CWE1:before {
  display: block;
  position: relative;
  content: attr(data-text);
  color: transparent;
  background-color: black;
  -webkit-background-clip: text;
  text-shadow: 0px 1px 1px #6b4848;
  z-index: 1;
}

.CWE1:after {
  display: block;
  position: absolute;
  content: attr(data-text);
  left: 0;
  top: 0;
  text-shadow: 2px 3px 1px white;
  z-index: -1;
}
<span class="CWE1" data-text="Clean, Wonderful & Effective"></span>
...