YuWebdesign




CSS fading horizontal line with gradient and gradient border

By yulia

Solution 1: using hr tag with gradient background (+ alpha transparency)

Fading gradient line with rgba transparency uses browser prefixes, which makes it reliable for most major browsers.

You can make all of your hr tags gradient or create a class, that will apply styles to certain horizontal rules.

Here is html code:


‹hr›
or
‹hr class="hrGradient" ›

Here is css code:


hr { /*or .hrGradient*/
height: 1px;
background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1), rgba(255,0,0,0)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1), rgba(255,0,0,0)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1), rgba(255,0,0,0)); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1), rgba(255,0,0,0)); /* Standard syntax (must be last) */
}

Solution 2: using css class applied to span

Here is html code:


‹div›
  ‹span class="fadingLine"› ‹/span›
  ‹p›Some content that you want to wrap with fading line on top and bottom here.
  Or just use it once.‹/p›
  ‹span class="fadingLine"› ‹/span›
‹/div›

Here is css code:


.fadingLine {
  display: block;
  border: none;
  color: white;
  height: 1px;
  background: black;
background: -webkit-linear-gradient(left, white, black, white); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, white, black, white); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, white, black, white); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, white, black, white); /* Standard syntax (must be last) */
}

Solution 3: using css class applied to div or other block element

Here is html code:


‹div class="fadingLine"› This gradient imitates transparency by using the background color in the beginning and at the end.‹/div›

Here is css code:


.fadingLine {
height: 1px;
background: -webkit-linear-gradient(left, white, black, white); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, white, black, white); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, white, black, white); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, white, black, white); /* Standard syntax (must be last) */
}

Solution 4: Using gradient as border-image

This gradient border method works well in Opera, Safari, and Chrome. However it does not work in Firefox and IE, so you might want to use SVG or single color borders as fallback for those browsers.

Here is html code:


‹div class="borderedContent"›
Content that has gradient vertical fading border-bottom.
This technique can also be used for :hover underline effect.
‹/div›

Here is css code:


.borderedContent {
border-left: 1px solid #7dabab;
background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1), rgba(255,0,0,0)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1), rgba(255,0,0,0)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1), rgba(255,0,0,0)); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1), rgba(255,0,0,0)); /* Standard syntax (must be last) */
}

This topic was discussed at http://css-tricks.com, where you can see other examples of CSS3 fading line.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>