Ben's Lab

Brought to you in stunning HTML5!

Latest Experiments:

CSS3 Animations Inspired By CSS-Tricks


I was recently reading a post by Chris Coyier on his informative website, CSS Tricks, and I had to try out his cool animation ideas (they’re accomplished using nothing but CSS and a hint of jQuery).

Here’s what I came up with:

Animation Demo

Just to reiterate, this was Chris Coyier’s initial idea. I just messed with a few other properties to achieve extra badassness.

P.S. Make sure to view the source to see how everything is done. I’ll write more about it later, but it’s all pretty self-explanatory and I’m ready to hit the hay. Enjoy!

The Hidden Message Trick


Hello World! In today’s experiment, I’m going to show you how to mix super-secret messages into your webpages using nothing but css! It’s pretty sweet, really neat, and always discrete (lamest rhyme ever?). Using the ::-moz-selection and ::selection style properties, it’s possible to create hidden messages you can sprinkle throughout your site. Is this practical for use in production websites that serve an actual purpose? Probably not. Is it bad ass though? Yeah! To give you a better idea of what I’m talking about, select this paragraph by dragging your cursor over the text as if you were going to copy it. You’ll then see the secret phrase. Do you see it? The effect is super easy to achieve. How ’bout we jump right in?

Read More

Welcome to the Web Lab!


Welcome to my laboratory! Here you’ll find an array of my whacky experiments using modern web technologies.*

Due to the fact that a lot of these technologies aren’t 100% complete and/or they’re not fully ready to be implemented without bugginess, please excuse me if something breaks or doesn’t work as it is intended. I’m also bound to make a mistake or two, so if you find something out of the ordinary or you’ve spotted that I’ve written something wrong, feel free to tell me about it.

With that said, enjoy my little playground. And remember, always wear your safety goggles.

* This page alone employs some awesome new web tricks. You can change the page title to whatever you want (the changes will remain intact, even if you refresh the page). The headers on the page are utilizing Google’s new Fonts API. Throughout the page, I’ve added subtle gradients thanks to -webkit-gradient. Also, by using the amazing -webkit-transform, I’ve tilted the tagline under the site’s header. Sweet!