Question

我有一个要复制的模型(img)，很难将所有内容都放在正确的位置(img)。

如果我没有顶部的渐变，这将很容易-我将使用两个单独的h1元素并根据需要移动它们。问题是，如果我这样做，则梯度不会在两个元素(img)上都持续存在。

我可以通过将第二个单词包装在另一个标签中来对第二个单词进行其他样式更改（例如使其变小或更改其颜色），但是我只想将其稍微向上和向左移动一点，似乎没有工作。

这里有一些工作代码，有人有什么想法吗？

#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>

我建议将line-height和text-indent添加到#foo。我添加了

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

line-height将有助于减小每件作品之间的间隔，而text-indent则有助于抵消文本，因为它已经被旋转了。我希望这会有所帮助：）。

作为一个侧面说明，在这里使用SVG代替CSS是一个不错的选择。

Answer 2

您可以使用line-height属性调整两个单词之间的垂直间距。通过使用text-indent属性将第一行/单词向右移动，然后偏移left属性，可以将第二个单词向左移动。

#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。我还向transform属性添加了一些偏斜。我认为通常来说，一种更简单的方法是将每个单词保留在单独的h1元素中，并创建两个单独的线性渐变，一个应用于第一个单词，另一个应用于第二个单词。

希望这会有所帮助。祝你好运！

如何在css中移动单个单词

2 个答案: