Ben's Lab

Brought to you in stunning HTML5!

CSS Experiments

CSS3 Animations Inspired By CSS-Tricks

Monday, January 24th, 2011

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

Thursday, May 27th, 2010

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?

(more…)