how to move individual words in css

Question

I've got a mock-up (img) that I'm attempting to replicate and I'm having a hard time getting everything in just the right place (img).

If I didn't have the gradient over the top this would be easy -- I would just use two separate h1 elements and move them around as needed. The problem is if I do that, the gradient doesn't persist over both elements (img).

I can do other styling changes to the second word (like making it smaller or changing its colour) by wrapping it inside of another tag but I just want to move it slightly up and slightly to the left and that doesn't seem to work.

Here is some working code, does anyone have any thoughts?

#foo {
  font-family: 'Fugaz One', 'arial black', sans-serif;
 position: relative;
 transform: rotate(-7.7deg);
 color: transparent;
 -webkit-background-clip: text;
 background-clip: text;
 background-image: -webkit-linear-gradient(7.7deg, #ef8181, #fa9551); 
 background-image:    -moz-linear-gradient(7.7deg, #ef8181, #fa9551); 
 background-image:     -ms-linear-gradient(7.7deg, #ef8181, #fa9551); 
 background-image:      -o-linear-gradient(7.7deg, #ef8181, #fa9551); 
 background-image:         linear-gradient(7.7deg, #ef8181, #fa9551); 
 font-size: 16vw;
 left: -2vw;
 top: -10vh;
}

<h1 id="foo">TEXT<br>THERE</h1>

Answer 1

#foo {
  display: flex;
  flex-direction: column;
  font-family: 'Fugaz One', 'arial black', sans-serif;
  position: relative;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  transform: skew(-10deg) rotate(-7.7deg);
  line-height: 0.9;
  background-image: -webkit-linear-gradient(7.7deg, #ef8181, #fa9551);
  background-image: -moz-linear-gradient(7.7deg, #ef8181, #fa9551);
  background-image: -ms-linear-gradient(7.7deg, #ef8181, #fa9551);
  background-image: -o-linear-gradient(7.7deg, #ef8181, #fa9551);
  background-image: linear-gradient(7.7deg, #ef8181, #fa9551);
  font-size: 16vw;
}

span {
  margin-left: 15px;
  margin-bottom: 5px;
}

span:nth-child(even) {
  margin-left: 35px;

}

<h1 id="foo"><span>TEXT</span><span>THERE<span></h1>

I would recommend adding line-height and text-indent to #foo. I added

#foo { line-height: 13vw; text-indent: 11px; }

line-height will help reduce the spacing between each work, and text-indent helps offset the text since it has been rotated. I hope this helps :).

As a side note an SVG would be a great option to use here instead of CSS.

Answer 2

You can adjust the vertical spacing between the two words with the line-height property. You can move the second word to the left by using the text-indent property to move the first line/word to the right and then offsetting the left property.

#foo {
  font-family: 'Fugaz One', 'arial black', sans-serif;
 position: relative;
 color: transparent;
 -webkit-background-clip: text;
 background-clip: text;
        transform:skew(-10deg) rotate(-7.7deg);
        line-height: 0.9;
        text-indent:-10px;
 background-image: -webkit-linear-gradient(7.7deg, #ef8181, #fa9551); 
 background-image:    -moz-linear-gradient(7.7deg, #ef8181, #fa9551); 
 background-image:     -ms-linear-gradient(7.7deg, #ef8181, #fa9551); 
 background-image:      -o-linear-gradient(7.7deg, #ef8181, #fa9551); 
 background-image:         linear-gradient(7.7deg, #ef8181, #fa9551); 
 font-size: 16vw;
 left: 0vw;
 top: -10vh;
}

<h1 id="foo">TEXT<br>THERE</h1>

P.S. I also added a little bit Skew to the transform property. I think in general an easier approach would be to keep each word in a separate h1 element and create two separate linear gradients, one applied to the first word and the other to the second.

Hope this helps. Good luck!