가로줄 위의 텍스트 ... 어떻게 선 그래디언트를 만드나요?

가로줄로 텍스트를 만들려고하는데 성공합니다. 목록의 두 번째 라인 http://css-tricks.com/examples/hrs/ : 여기에 코드가로줄 위의 텍스트 ... 어떻게 선 그래디언트를 만드나요?

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; 
}

그러나, 나는이 같은 선형 그라데이션처럼되고 선을 원이다. 그러나, 그것은 단지 <hr>이고 나는 border-top에 그것을 추가 할 수 없었다. 필요한 결과를 얻으려면 어떻게해야합니까?

출처

2013-04-30 Kristina Bressler

텍스트 위에 '

'요소를 만들고 스타일을 적용합니다. haha – PlantTheIdea

jsfiddle.net을 설정하여 코드를 편집 할 수 있습니까? 현재 문제가있는 곳을 압니다. – Cam

당신이 제공 한 링크는 '

'에 적용 할 코드를 제공합니다. 라인 하단의 코드 버튼을 클릭하면 필요한 내용이 표시됩니다. – Andrew

쉽게 국경을 제거하고 의사 요소를 2 픽셀의 높이 제공함으로써 Coyier의 코드를 적응할 수 : 나는 <hr> 그것 때문에 사용하지 않으

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

을 여기에 속하지 않는 의미 론적 가치가있다. (프레젠테이션 요소가 아닙니다.)

출처

2013-04-30 15:37:42

작동합니다! 감사!!! –

Btw, 의미 론적 가치와 표현 요소가 무엇인지 이해하려고합니다. IE와 같은 다른 브라우저에서 제대로 작동하지 않는 것입니까? –

대부분의 HTML 마크 업에는 내용의 본질 및/또는 내용을 나타내는 의미 (의미)가 있습니다.

요소는 주제의 미니 브레이크와 비슷하지만 (대략 넣으려는 것) 제목에 어쨌든 적용됩니다. 여기에는 작은 문제이지만, 수평선에는 의미가 없습니다. 단지 장식 일 뿐이므로 HTML 자체에 구울 수있는 것보다 프레젠테이션 계층에 보관하는 것이 가장 좋습니다. –

의견에서 언급 한대로 의 코드 -의 코드를 복사 - 파스타로 복사하십시오. 위에 제공된 예제의 작동하는 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

가로줄 위의 텍스트 ... 어떻게 선 그래디언트를 만드나요?

답변

관련 문제