水平线上的文字...如何制作线条渐变？

我想在水平线上创建文本，并且我成功了。下面的代码水平线上的文字...如何制作线条渐变？

HTML

<div class="featuredtext"> 
     <h2><span>Featured Art Work</span></h2> 
</div>

CSS

.featuredtext { 
    text-align: center; 
} 
.featuredtext h2 { 
    margin-top: 30px; 
    font-family: 'PrintClearlyRegular', Arial, Helvetica, sans-serif; 
    font-weight: normal; 
    font-style: normal; 
    font-size: 36px; 
    position: relative; 
    text-align: center; 
    color: #FFF; 
    z-index: 1; 
} 
.featuredtext h2:before { 
    border-top: 2px solid #ee357a; 
    content:""; 
    margin: 0 auto; 
    position: absolute; 
    top: 17px; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    width: 100%; 
    z-index: -1; 
} 
.featuredtext h2 span { 
    background: #1a132a; 
    padding: 0 12px; 
}

不过，我想行是象这样的线性渐变：http://css-tricks.com/examples/hrs/在列表中的第二条线。但是，它仅适用于<hr>，我无法将其添加到边框顶端。我如何得到我需要的结果？

来源

2013-04-30 Kristina Bressler

创建你的文字上面的''

元素和应用样式哈哈 – PlantTheIdea 2013-04-30 15:25:10

你能设置一个jsfiddle.net所以我们可以编辑你的代码，我知道你的问题是目前。 – Cam 2013-04-30 15:25:36

您提供的链接为您提供了适用于'

'的代码，只需点击该行下面的代码按钮，它就会显示您需要的内容 – Andrew 2013-04-30 15:26:26

你可以很容易地通过删除边界，并给予伪元素的2px的高度适应Coyier代码：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 

<style media="all"> 
.featuredtext { 
    text-align: center; 
} 
.featuredtext h2 { 
    margin-top: 30px; 
    font-family: 'PrintClearlyRegular', Arial, Helvetica, sans-serif; 
    font-weight: normal; 
    font-style: normal; 
    font-size: 36px; 
    position: relative; 
    text-align: center; 
    color: #FFF; 
    z-index: 1; 
} 
.featuredtext h2:before { 
    height: 2px; 
    content:""; 
    margin: 0 auto; 
    position: absolute; 
    top: 17px; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    width: 100%; 
    z-index: -1; 
    background-image: -webkit-linear-gradient(left, rgba(238, 53, 122, 0), rgba(238, 53, 122, 0.75), rgba(238, 53, 122, 0)); 
    background-image: -moz-linear-gradient(left, rgba(238, 53, 122, 0), rgba(238, 53, 122, 0.75), rgba(238, 53, 122, 0)); 
    background-image: -ms-linear-gradient(left, rgba(238, 53, 122, 0), rgba(238, 53, 122, 0.75), rgba(238, 53, 122, 0)); 
    background-image: -o-linear-gradient(left, rgba(238, 53, 122, 0), rgba(238, 53, 122, 0.75), rgba(238, 53, 122, 0)); 
} 
.featuredtext h2 span { 
    background: #1a132a; 
    padding: 0 12px; 
} 
</style> 

</head> 
<body> 

<div class="featuredtext"> 
     <h2><span>Featured Art Work</span></h2> 
</div> 

</body> 
</html>

我不喜欢使用的<hr>，因为它具有不属于这里的语义价值。（这不是一个表象的元素。）

来源

2013-04-30 15:37:42

它的工作原理！谢谢！！！ – 2013-04-30 18:52:16

顺便说一句，我想了解什么语义价值和表达元素是。这是因为它在IE等其他浏览器中效果不好，对吧？ – 2013-04-30 19:06:38

大多数HTML标记具有含义（语义），表示内部和/或周围内容的性质。

元素就像主题中的一个小小的突破（粗略地说），但无论如何你还是有标题。这是一个小问题，但水平线没有任何意义，因此。这只是装饰，所以最好将它保留在表示层中，而不是将它烘焙到HTML本身中。 – 2013-05-01 00:36:37

正如评论中提到的，只是从css-tricks复制意大利面代码。以上是您在上面提供的示例中工作的jsfiddle。

CSS

/* Gradient transparent - color - transparent */ 

hr { 
    border: 0; 
    height: 1px; 
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:  -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:  -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
}

来源

2013-04-30 15:31:58

水平线上的文字...如何制作线条渐变？

回答

相关问题