CSS 3 Transparent Gradient
This is the demo page for this blog post.
Each box uses some CSS to add a gradient to the top and give the effect of the text fading out on scroll. The effect isn't as clear in example one as the colour fades through a grey.
Scroll the following three boxes
Example 1
This first box has a very obvious gradient between blue and red, so you can see where the gradient box is.
background:
linear-gradient(
top,
#1e5799 0%,
#ff3232 100%
);
Bacon ipsum dolor sit amet jerky hamburger drumstick turkey, boudin chicken strip steak bacon tenderloin. Tongue hamburger chuck, sirloin biltong turkey beef ribs chicken. Pork loin sirloin leberkase, flank bacon tail salami tri-tip shoulder. Shoulder chuck beef prosciutto pig.
Ribeye boudin ham, salami filet mignon bresaola pork pork chop turkey frankfurter pork loin. Fatback bresaola ham hock, kielbasa ribeye flank pig bacon. Beef ribs brisket ribeye bacon, shoulder strip steak flank fatback hamburger tongue venison corned beef ham chuck. Capicola prosciutto strip steak, ham ribeye short ribs shank chicken turducken shoulder.
Example 2
This second box has a gradient from white to transparent
background:
linear-gradient(
top,
#FFFFFF 0%,
transparent 100%
);
You can see that it actually becomes an ugly grey colour. Only Opera does this correctly
Bacon ipsum dolor sit amet jerky hamburger drumstick turkey, boudin chicken strip steak bacon tenderloin. Tongue hamburger chuck, sirloin biltong turkey beef ribs chicken. Pork loin sirloin leberkase, flank bacon tail salami tri-tip shoulder. Shoulder chuck beef prosciutto pig.
Ribeye boudin ham, salami filet mignon bresaola pork pork chop turkey frankfurter pork loin. Fatback bresaola ham hock, kielbasa ribeye flank pig bacon. Beef ribs brisket ribeye bacon, shoulder strip steak flank fatback hamburger tongue venison corned beef ham chuck. Capicola prosciutto strip steak, ham ribeye short ribs shank chicken turducken shoulder.
Example 3
This third box uses rgba
background:
linear-gradient(
top,
rgba(255,255,255,1) 0%,
rgba(255,255,255,0) 100%
);
Notice the text fade neatly as you scroll
Bacon ipsum dolor sit amet jerky hamburger drumstick turkey, boudin chicken strip steak bacon tenderloin. Tongue hamburger chuck, sirloin biltong turkey beef ribs chicken. Pork loin sirloin leberkase, flank bacon tail salami tri-tip shoulder. Shoulder chuck beef prosciutto pig.
Ribeye boudin ham, salami filet mignon bresaola pork pork chop turkey frankfurter pork loin. Fatback bresaola ham hock, kielbasa ribeye flank pig bacon. Beef ribs brisket ribeye bacon, shoulder strip steak flank fatback hamburger tongue venison corned beef ham chuck. Capicola prosciutto strip steak, ham ribeye short ribs shank chicken turducken shoulder.
Styles used on this page
.examples {
display: block;
position: relative;
height: 280px;
width: 280px;
margin-left: 12px;
float: left;
}
.examples pre {
margin: 0;
padding: 0;
}
.examples .content {
display: block;
position: relative;
height: 280px;
width: 280px;
overflow: auto;
}
.examples h3 {
margin-top: 60px;
}
.examples:after {
display: block;
height: 60px;
width: 100%;
position: absolute;
top: 0;
left: 0;
content:" ";
}
#example1:after {
background: -moz-linear-gradient(top, #1e5799 0%, #ff3232 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#ff3232));
background: -webkit-linear-gradient(top, #1e5799 0%,#ff3232 100%);
background: -o-linear-gradient(top, #1e5799 0%,#ff3232 100%);
background: -ms-linear-gradient(top, #1e5799 0%,#ff3232 100%);
background: linear-gradient(top, #1e5799 0%,#ff3232 100%);
}
#example2:after {
background: -moz-linear-gradient(top, #FFFFFF 0%, transparent 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,transparent));
background: -webkit-linear-gradient(top, #FFFFFF 0%,transparent 100%);
background: -o-linear-gradient(top, #FFFFFF 0%,transparent 100%);
background: -ms-linear-gradient(top, #FFFFFF 0%,transparent 100%);
background: linear-gradient(top, #FFFFFF 0%,transparent 100%);
}
#example3:after {
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
}