YuWebdesign




CSS vertical fading line with gradient and css gradient border

By yulia

Solution 1. Using absolutely positioned generated content in :before and :after pseudoelements with CSS gradients as background

This method perfectly works in Safari, Opera, IE, Chrome, and Firefox. But you might want to use SVG or regular single-color borders as a fallback.

Here is html code:


‹p class="borderedContent"›
 Content that has vertical fading border to the left.
‹/p›

Here is css code:


.borderedContent {
position: relative; /*needed for before after positioning*/
}
/*-fading line through before: and after:--*/
.borderedContent:before {
content: "";
position: absolute; /*div of before and after will need relative positioning*/
top: 0;
left: 0;
width: 1px;
height: 100%;
background: -moz-linear-gradient(top, rgba(210,241,241,0.2) 0%, rgba(152,208,208,0.48) 10%, rgba(125,171,171,1) 50%,
rgba(125,171,171,0.42) 85%, rgba(210,241,241,0.2) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(210,241,241,0.2)), color-stop(10%,rgba(152,208,208,0.48)),
color-stop(50%,rgba(125,171,171,1)), color-stop(85%,rgba(125,171,171,0.42)), color-stop(100%,rgba(210,241,241,0.2))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(210,241,241,0.2) 0%,rgba(152,208,208,0.48) 10%,rgba(125,171,171,1) 50%,
rgba(125,171,171,0.42) 85%, rgba(210,241,241,0.2) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(210,241,241,0.2) 0%,rgba(152,208,208,0.48) 10%,rgba(125,171,171,1) 50%,
rgba(125,171,171,0.42) 85%,rgba(210,241,241,0.2) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(210,241,241,0.2) 0%,rgba(152,208,208,0.48) 10%,rgba(125,171,171,1) 50%,
rgba(125,171,171,0.42) 85%,rgba(210,241,241,0.2) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(210,241,241,0.2) 0%,rgba(152,208,208,0.48) 10%,rgba(125,171,171,1) 50%,
rgba(125,171,171,0.42) 85%,rgba(210,241,241,0.2) 100%);
}

See the example of fading vertical line made with css, info is taken from here.

Solution 2. 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:


‹p class="borderedContent"›
 Content that has gradient vertical fading border to the left.
‹/p›

Here is CSS


.borderedContent {
border-left: 1px solid #7dabab;
-moz-border-image: -moz-linear-gradient(top, rgba(125,171,171, 0), #7dabab, #7dabab, rgba(125,171,171, 0)) 1 100%;/* FF3.6+ */
-webkit-border-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(125,171,171, 0)), color-stop(33.33333%, #7dabab),
color-stop(66.66667%, #7dabab), color-stop(100%, rgba(0, 0, 0, 0))) 1 100%;/* Chrome,Safari4+ */
-webkit-border-image: -webkit-linear-gradient(top, rgba(125,171,171, 0), #7dabab, #7dabab, rgba(125,171,171, 0)) 1 100%;/* Chrome10+,Safari5.1+ */
-o-border-image: -o-linear-gradient(top, rgba(125,171,171, 0), #7dabab, #7dabab, rgba(0, 0, 0, 0)) 1 100%;/* Opera 11.10+ */
-ms-border-image: -ms-linear-gradient(top, rgba(210,241,241,0.2) 0%,rgba(152,208,208,0.48) 10%,rgba(125,171,171,1) 50%,
rgba(125,171,171,0.42) 85%,rgba(210,241,241,0.2) 100%); /* IE10+ */
border-image: linear-gradient(top, rgba(125,171,171, 0), #7dabab, #7dabab, rgba(125,171,171, 0)) 1 100%;/* W3C */

Solution 3. Using div with a gradient background

Position div with this class where you want to have the gradient fading border.

This method works in all major browsers (add a single-color background or SVG as a fallback if you wish).

Here is CSS code


.verticalFadingLine {
height: 100%;
position: relative;
float: left;
overflow: hidden;
border: 0;
background: -moz-linear-gradient(top, rgba(210,241,241,0.2) 0%, rgba(152,208,208,0.48) 10%, rgba(125,171,171,1) 50%,
rgba(125,171,171,0.42) 85%, rgba(210,241,241,0.2) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(210,241,241,0.2)), color-stop(10%,rgba(152,208,208,0.48)),
color-stop(50%,rgba(125,171,171,1)), color-stop(85%,rgba(125,171,171,0.42)), color-stop(100%,rgba(210,241,241,0.2))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(210,241,241,0.2) 0%,rgba(152,208,208,0.48) 10%,rgba(125,171,171,1) 50%,
rgba(125,171,171,0.42) 85%, rgba(210,241,241,0.2) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(210,241,241,0.2) 0%,rgba(152,208,208,0.48) 10%,rgba(125,171,171,1) 50%,
rgba(125,171,171,0.42) 85%,rgba(210,241,241,0.2) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(210,241,241,0.2) 0%,rgba(152,208,208,0.48) 10%,rgba(125,171,171,1) 50%,
rgba(125,171,171,0.42) 85%,rgba(210,241,241,0.2) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(210,241,241,0.2) 0%,rgba(152,208,208,0.48) 10%,rgba(125,171,171,1) 50%,
rgba(125,171,171,0.42) 85%,rgba(210,241,241,0.2) 100%)
}

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>