текст над горизонтальной линией ... Как сделать градиент линии?

Я пытаюсь создать текст по горизонтальной линии, и мне это удастся. Вот кодтекст над горизонтальной линией ... Как сделать градиент линии?

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

создать элемент '

' над вашим текстом и применить стиль haha – PlantTheIdea

Можете ли вы настроить jsfiddle.net, чтобы мы могли редактировать ваш код, я знаю, где ваша проблема в настоящее время. – Cam

Ссылка, которую вы предоставили, дает код для применения к '

' просто нажмите кнопку кода под линией, и он должен показать вам, что вам нужно. – Andrew

Вы можете легко адаптировать код Coyier, удалив границы и давая псевдо элемент высоты 2px:

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

Это работает! Благодаря!!! –

Кстати, я пытаюсь понять, что такое смысловое значение и элемент представления. Это так, как будто это плохо работает в других браузерах, таких как IE, верно? –

Большая часть разметки HTML имеет смысл (семантику), который указывает природу содержимого внутри и/или вокруг него. Элемент

похож на мини-перерыв в теме (грубо говоря), но заголовок, который у вас есть, все равно. Здесь мало, но горизонтальная линия не имеет никакого значения, как таковая. Это просто украшение, поэтому лучше оставить его в презентационном слое, чем испечь его в самом HTML. –

Как упоминалось в комментариях, просто скопируйте-макаронный код от css-трюки. Вот рабочий 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

текст над горизонтальной линией ... Как сделать градиент линии?

ответ

Смежные вопросы