Gradient Quote Text

by will525

HTML

<div class="row-fluid">
    <div class="span12">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh sapien, accumsan ac fermentum eget, aliquam id risus. Aenean sed purus nisl, quis dapibus mauris. Maecenas congue feugiat venenatis. Vestibulum interdum laoreet ornare. Praesent sit amet lacus odio. Maecenas sed turpis lectus, non dapibus odio. Duis pretium tellus ut lacus ullamcorper iaculis.</p>
<blockquote class="fancyQuote">Determine never to be idle. No person will have occasion to complain of the want of time who never loses any. It is wonderful how much may be done if we are always doing. 
<small class="fancyQuote-source">Thomas Jefferson </small>
</blockquote>
<p>In blandit metus vitae neque viverra lacinia. Vivamus feugiat euismod ante non posuere. Vestibulum vehicula, justo vitae blandit sagittis, ipsum orci gravida nisi, eu condimentum leo leo id lectus. Nullam pellentesque, ligula nec hendrerit pellentesque, felis dui sollicitudin justo, eu ullamcorper turpis justo dignissim mauris. Aenean imperdiet nisl sit amet augue blandit non imperdiet velit adipiscing. Sed ornare luctus nunc, id consectetur felis iaculis quis. Phasellus nisi nisi, adipiscing et fringilla et, dapibus at sem. Quisque laoreet quam in quam dictum id dapibus dui suscipit.</p>
    </div>
</div>

CSS

body {padding:25px 150px;}

/* Base style */
.fancyQuote{
    color: #FF0052;
    font-size:26px;
    line-height:35px;
    margin:25px 0;
}
.fancyQuote-source {
    margin:15px 0 0;
}

/* Use Modernizr feature detection */
.backgroundsize.cssgradients .fancyQuote {
    background: -webkit-gradient(linear,left top,left bottom,from(#FF0052),to(#8E2B88));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

JavaScript

/*
    This example uses Modernizr to detect if the browser supports backgroundsize and cssgradients 
*/