Responsive Video Embeds With CSS

You may be thinking to yourself right now, “Wow, this site is amazing. It’s really one of the great blog designs of our time. Plus, how did he get these embedded videos to be responsive?” First of all, thank you. That’s very flattering. Secondly, it’s actually a pretty simple little trick.

Creating a Flipping Countdown Clock

In order to teach myself a little bit about CSS3 animations and transforms I’ve decided to put together a flipping clock countdown to the St. Louis Cardinals opening day. So I’m going to try and create the design above (you’ll notice the repeating 11. I’d say it was a choice during the design to signify the Cardinals National League leading 11 World Series wins, but it wasn’t planned. We’ll just call it a happy coincidence) using CSS3 to control the rotating, style, etc. and jQuery to control the countdown. We’re talking no images here. Luckily I was able to find a great example to learn from at CodePen.