CODEWITHSUNDEEP
htmlcssline
Kristina Bressler
Kristina Bressler

Reputation: 1722

text over horizontal line...How do I make the line gradient?

I am trying to create text over horizontal line and I succeed. Here's the code

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

However, I wanted the line to be like a linear gradient like this:http://css-tricks.com/examples/hrs/ with the second line in the list. However, it's only for <hr> and I couldn't add it to border-top. How do I get the result I needed?

Upvotes: 0

Views: 1226

Answers (2)

ralph.m
ralph.m

Reputation: 14345

You could easily adapt Coyier's code by removing the border and giving the pseudo element a height of 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>

I prefer not to use the <hr> because it has semantic value that doesn't belong here. (It's not a presentational element.)

Upvotes: 0

Nick Fury
Nick Fury

Reputation: 1313

As mentioned in the comments, just copy-pasta the code from css-tricks. Here's a working jsfiddle of the example you provided above.

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

Upvotes: 1

Related Questions