Chronotope

I’ve been having sweet dreams about the fancy text fade-out on Polygon’s front page. It’s such an elegant solution to avoid worrying about excerpts. 

Since I’ve encountered that issue on two projects this month, I figured I’d dig in and do what every good web developer with a problem someone has already solved (but hasn’t talked about) should do - look at the source code. 

I initially thought that the solution was some sort of javascript, but that wasn’t it, I had turned off javascript and it was still there. 

So it turns out to be some CSS that is just as elegant as the effect itself.

Popping up the site in Opera allowed me to easily view the pseudo classes in use; which is where I spotted this very clever bit of styling:

.polygon .block.block_g .block_body .meta::after {

background-image: -o-linear-gradient(top, rgba(231, 231, 226, 0) 0px, #E7E7E2 100%);

background-size: 100%;

bottom: 0px;

content: “”;

display: block;

height: 20%;

left: 0px;

position: absolute;

width: 100%;

}

It one of those ‘oh, I should totally have thought of that’ moments. Now to play with it. 

Also some nifty use of the CSS flexbox module going on there. For more on that: http://net.tutsplus.com/tutorials/html-css-techniques/an-introduction-to-css-flexbox/

EDIT: the latest version of the code I generated:

box:after {

content:“”;

*zoom:1;

zoom:1;

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#00e7e7e2’, endColorstr=’#e7e7e2’,GradientType=0 ); /* IE6-9 */

background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiYSgyMzEsIDIzMSwgMjI2LCAwKSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2U3ZTdlMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==’);

background-size:100%;

background: -moz-linear-gradient(top,  rgba(231,231,226,0) 0%, rgba(231,231,226,0) 1%, rgba(231,231,226,1) 95%, rgba(231,231,226,1) 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(231,231,226,0)), color-stop(1%,rgba(231,231,226,0)), color-stop(95%,rgba(231,231,226,1)), color-stop(100%,rgba(231,231,226,1))); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top,  rgba(231,231,226,0) 0%,rgba(231,231,226,0) 1%,rgba(231,231,226,1) 95%,rgba(231,231,226,1) 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top,  rgba(231,231,226,0) 0%,rgba(231,231,226,0) 1%,rgba(231,231,226,1) 95%,rgba(231,231,226,1) 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top,  rgba(231,231,226,0) 0%,rgba(231,231,226,0) 1%,rgba(231,231,226,1) 95%,rgba(231,231,226,1) 100%); /* IE10+ */

background: linear-gradient(to bottom,  rgba(231,231,226,0) 0%,rgba(231,231,226,0) 1%,rgba(231,231,226,1) 95%,rgba(231,231,226,1) 100%); /* W3C */

display:block;

position:absolute;

pointer-events:none;

bottom:24px;

right:0;

width: 42.50853%;

height:20%;

}