futurejournalismproject: Your Single Page CSS and JavaScript Scrolling Animation for a Cause Site of the Day Every Last Drop is a single page Web site by Waterwise, a UK NGO focused on water issues, to demonstrate how and where you can conserve water on a daily basis. Earlier today we posted on repetition in Web design so count this among the ways to do it better. Our sophisticated internal critique of the site ran something like this: Michael: You want to see something neat. [Sends URL] Jihii: Oh my God, I can’t even take this, it’s so cute. Michael: It’s… Jihii: Oh my God, I love this little man. Sophistication, FJP style. Image: Partial screenshot, Every Last Drop. Select to Embiggen.
Pop-upView Separately

futurejournalismproject:

Your Single Page CSS and JavaScript Scrolling Animation for a Cause Site of the Day

Every Last Drop is a single page Web site by Waterwise, a UK NGO focused on water issues, to demonstrate how and where you can conserve water on a daily basis.

Earlier today we posted on repetition in Web design so count this among the ways to do it better.

Our sophisticated internal critique of the site ran something like this:

Michael: You want to see something neat. [Sends URL]

Jihii: Oh my God, I can’t even take this, it’s so cute.

Michael: It’s…

Jihii: Oh my God, I love this little man.

Sophistication, FJP style.

Image: Partial screenshot, Every Last Drop. Select to Embiggen.

onethingwell: Gradient makes it easy to generate CSS3 background gradients. The retro sci-fi UI might not be to everyone’s taste, but in practice it’s simple to use, fast and reliable. For those unfamiliar with CSS and wondering why you’d need a dedicated app for something as seemingly simple as a gradient, here’s the code required to get the grey-to-black fade shown above working across all the popular browsers: background-color: #dbcfdb; background-image: -webkit-gradient(linear, left center, right center, to(rgb(219, 207, 219)), from(rgb(61, 61, 60))); background-image: -webkit-linear-gradient(left, rgb(219, 207, 219), rgb(61, 61, 60)); background-image: -moz-linear-gradient(left, rgb(219, 207, 219), rgb(61, 61, 60)); background-image: -o-linear-gradient(left, rgb(219, 207, 219), rgb(61, 61, 60)); background-image: -ms-linear-gradient(left, rgb(219, 207, 219), rgb(61, 61, 60)); background-image: linear-gradient(left, rgb(219, 207, 219), rgb(61, 61, 60)); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#dbcfdb', EndColorStr='#3d3d3c');
View Separately

onethingwell:

Gradient makes it easy to generate CSS3 background gradients. The retro sci-fi UI might not be to everyone’s taste, but in practice it’s simple to use, fast and reliable.

For those unfamiliar with CSS and wondering why you’d need a dedicated app for something as seemingly simple as a gradient, here’s the code required to get the grey-to-black fade shown above working across all the popular browsers:

background-color: #dbcfdb;
background-image: -webkit-gradient(linear, left center, right center, to(rgb(219, 207, 219)), from(rgb(61, 61, 60)));
background-image: -webkit-linear-gradient(left, rgb(219, 207, 219), rgb(61, 61, 60));
background-image: -moz-linear-gradient(left, rgb(219, 207, 219), rgb(61, 61, 60));
background-image: -o-linear-gradient(left, rgb(219, 207, 219), rgb(61, 61, 60));
background-image: -ms-linear-gradient(left, rgb(219, 207, 219), rgb(61, 61, 60));
background-image: linear-gradient(left, rgb(219, 207, 219), rgb(61, 61, 60));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#dbcfdb', EndColorStr='#3d3d3c');