The button made use of three typical states: regular, hover and active. I started out by coding the buttons so they’d look fine in non-animation capable browsers. I split the animated parts separately and placed them into spans:

<a class="btnSellers" title="Sellers Video Overview" href="#">
	<span class="monitor"></span>
	<span class="play"></span>
</a>
 
<a class="btnBuyers" title="Buyers Video Overview" href="#">
	<span class="monitor"></span>
	<span class="play"></span>
</a>

These are styled and formatting quite normally:

#btnVideos .btnSellers, #btnVideos .btnBuyers { background: url('images/btnSellers.jpg') no-repeat; float: left; height: 92px; margin-top: 80px; position: relative; width: 229px; }
#btnVideos span { display: block; position: absolute; }
#btnVideos .monitor { background: url('images/iconSellers.jpg') no-repeat; left: 20px; height: 69px;  top: -26px; width: 102px; }
#btnVideos a:hover .monitor { top: -36px; }
#btnVideos .play { background: url('images/btnPlay.png') no-repeat; height: 51px; right: 25px; top: -12px; width: 51px; }
#btnVideos .play:active { background-position: bottom; }
 
#btnVideos .btnSellers:hover { background-position: left -91px; }
#btnVideos .btnSellers:active { background-position: left -183px; }
 
#btnVideos .btnBuyers { background-image: url('images/btnBuyers.jpg'); margin-top: 54px; }
#btnVideos .btnBuyers:hover { background-position: left -92px; }
#btnVideos .btnBuyers:active { background-position: 1px -184px; }
#btnVideos .btnBuyers .monitor { background: url('images/iconBuyers.jpg') no-repeat; }

Adding the animation in was really very easy. First, we needed to tell the buttons that we wanted to animate them eventually. You’ll put these in your normal states:

#btnVideos .monitor { background: url('images/iconSellers.jpg') no-repeat; left: 20px; height: 69px; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; transition:all 0.3s linear; top: -26px; width: 102px; }
#btnVideos .play { background: url('images/btnPlay.png') no-repeat; height: 51px; right: 25px; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; top: -12px; width: 51px; }

As you can see, I’m using different transition easing – a linear and an ease-in-out. There’s no hard rule for which to use, just experiment until you get an effect you like.

To animate the play button, all we had to do was give it a 360 degree rotate:

#btnVideos a:hover .play { -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -ms-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg); }

To pull the monitor graphic up was even easier, I just adjusted the top value:

#btnVideos a:hover .monitor { top: -36px; }

Definitely much quicker and cleaner than jQuery!

You can see a demo of this here.

What is SASS & LESS?

Both SASS & LESS are CSS preprocessors, basically they’re created to help you code CSS quicker by allowing the use of basic programming principles. Both allow you to use variables, mixins, nested elements, functions and operators.

You basically put your CSS into a special file, and then when finished, your CSS is run through the preprocessor and it kicks out “normal” CSS. Huh.

I found LESS to be a lot easier to understand and install, although both of them worked pretty much the same way. You’re able to create variables within your CSS so you can reuse certain elements (for example, a hex code), and if it needs changing, you only have to do it in one place. Here’s where my inner-awesome-developer-sense kicks in. You can pretty much already do this with a basic class.

Another major feature in both SASS and LESS is the use of nesting, where you can “save” on repeating code by indenting elements instead of having to retype them, for example, if you indented p {} underneath an id of #header, then the CSS that’s printed out is actually #header p {}

While this seems pretty cool at first, I can easily see this as becoming cumbersome and crazy really quickly. When you’re not paying attention to what’s being outputted, your’re more likely to be lax in your coding.

Important Questions

I had several important questions before and after I read up on the technologies, and most of them really weren’t answered by any of the articles I read:

1. What happens if another developer needs to edit the CSS and doesn’t know or realize a preprocessor is being used? How do you sync the two?
2. When no longer writing CSS yourself, how do you control the structure and organization of the code? How do you ensure you’re optimizing it correctly?
3. What happens if JS is down?
4. Does it work with one line CSS?

All in all, I don’t think I’ll be using either SASS or LESS. Installation time, upkeep and the fact that it ruins the simplicity of CSS will keep me away. If you’re a developer who’s spent a lot of time optimizing your code and really learning the in’s of CSS (not just top level stuff), then you’ll find this pretty useless, as you already can quickly do the type of code it spits out.

I’m also worried on our recent reliance on Javascript and the trend of forcing languages and browsers to do something they’re not meant to do. It wasn’t even a year ago that everyone was worried about best practices and making sure we didn’t rely on Javascript for anything but the beauty layer. Now this is one more thing that can break.

Some of the features, like mixins and operators actually made the code a lot more convoluted an jumbled, and seemed to take a lot more code than if you were just to type it out correctly in the first place. I also don’t see the point of operators – CSS isn’t a programming language and you can’t dynamically update styles so why not just type in the correct number in the first place?

Final Thoughts

Perhaps I’m wrong and you disagree – maybe you think SASS or LESS is the greatest thing since sliced bread. It’s just not for me. I would love your thoughts on it though!

I stumbled across 12412.org when looking at Paul Davis’s work. Consisting of three developers including Paul, Anthony Killeen, and Stephen Fulljames, 12412 aims to log their activities throughout 2012 as they choose a new technology or technique every month to learn and play with.

I thought this was a fantastic idea. I’ve had an insanely busy 2011 and haven’t spent much time learning new things like I should. What better way than to make a goal to learn something new every month? I thought I’d take their idea and list out a few items of my own that I want to do some research on and learn.

January

January’s going to be a short and busy month for me, due to moving across the seas to London. So I thought I’d start the year off a bit easy by doing some research on SASS. I’m very skeptical on this technique, but promised to at least read about it.

February

Inspired by Jeff Croft’s tumblog, I want to make my own to house all of my social media updates. I plan to incorporate Twitter, Instagram, Ravelry, Pinterest, Goodreads, Dribbble, Foursuare and Codesnippit. Building this will force me to learn how to work with APIs, while extending my knowledge of PHP in tying them together.

March

I plan on finishing my Objective-C book that I’ve been working on for so long. After that, I need to make a decision whether to give iPhone development some serious commitment, or move on.

April

Build a premium WordPress theme with admin panels. I haven’t had a chance to build any custom admin panels before, so this will be another great learning experience.

May

Again I want to further my knowledge of PHP and create some kind of user submission gallery site. I’m thinking along the lines of responsive and CSS3 submissions.

2012

That’s all I’m planning for now. Who knows what the next few months will bring in our world. What do you think about 12412?

What will you accomplish this year?

CSS for Print Designers was a quick read, at only 167 pages long in full color and large type. It sticks to the fairly basics, assuming you’ve absolutely never seen CSS and HTML before. I like the fact that it touches on the basics of HTML and semantics before jumping over to CSS. I think a lot of non-coders, especially print-turned-web designers, are lacking in proper HTML skills, and this gives you a good foundation to start on.

While the book certainly won’t make you an expert by far, it gets you started and is a good primer to learning how to read the code. I think it’s a great read before you pick up a more comprehensive coding book, as it will help to assage the anxiety one gets while staring at a bunch of gooble-de-gook (which I think aptly describes our code, don’t you?).

While the book does have many pluses, it also came up short for me in a lot of ways. The fact that it is so short and broad is also a negative. JD mentions a lot of ideas and pieces of code in the book, but then tells you to just “google it” instead of explaining. I think he should’ve either briefly explained the item or skipped mentioning it at all.

I also disagreed with some of the coding techniques he used, but that was more personal and since we all eventually develop our own way of coding, I was able to overlook those.

I recommend the book only if you’re an absolute beginner in terms of coding to the web. If you know basic HTML and CSS already, skip this one. You can get it on Amazon for $19.49 if interested.

What do you want to learn in 2012?