CODEWITHSUNDEEP
csshtml-heading
Mego
Mego

Reputation: 164

Create heading text with a weak same text behind the heading with CSS

I really don't know, how to call that. I need to do something like this: enter image description here

h2 {
text-shadow: 5px 5px #000;
}
<h2>My Text</h2>

So there is my heading text, and the same text on background. It should be auto-upgradable, so when someone will change "KONTAKT", the background text will automatically change too to be the same.

Ideally, if is possible to do that only with CSS?

I thought, this could be done with text-shadow property, but it seems not.

Upvotes: 0

Views: 362

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 105853

You need two pieces of text to which you can apply different style.

to type it once, you can use a data-attribute and generate the text via ::before and :: after. (possible issue, text is missing from HTML)

example with data attributes (not the best in my opinion, for the text missing)

h2 {
  display: grid;
  height: 100px;
}

[data-text]::before,
[data-text]::after {
  content: attr(data-text);
  margin: auto;
  grid-column: 1;
  grid-row: 1;
  z-index: 1;
  color: brown;
  text-shadow: 0 0 2px white, 0 0 2px white, 0 0 2px white;
}

::before {
  z-index: 0;
  transform: scale(2.5);
  opacity: 0.25
}
<h2 data-text=" My text to show"></h2>

another exampe , where you need to type twice the text .

h2 {
  display: grid;
  height: 100px;
  justify-content: center;
  text-align: center;
  align-items: center;
  color: brown;
}

[data-text]::before {
  content: attr(data-text);
  position: absolute;
  grid-row: 1;
  grid-column: 1;
  left: 0;
  right: 0;
}

::before {
  z-index: 0;
  transform: scale(2.5);
  opacity: 0.25
}
<h2 data-text="My text to show">My text to show</h2>

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 272590

Use the text as data attribute then you can have it twice in each pseudo element and easily achieve what you want.

h2 {
  font-family:arial;
  position:relative;
  display:table;
  margin:auto;
  color:#bda000;
}

h2:before {
  content:attr(data-text);
  font-size:3em;
  opacity:0.25;
}
h2:after {
  content:attr(data-text);
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  left:0;
  right:0;
  text-align:center;
}
<h2 data-text="MY Text"></h2>

<h2 data-text="Another text"></h2>

Upvotes: 1

Related Questions