Author Archives:

CSS3 Flexible Box (aka flexbox) FTW

Posted on by Tony
Reply

If you’re into UI design, or have at least dabbled with it in the past, chances are you’ve run into a situation where you have been frustrated with trying to make a number of elements float next to each other (with various widths) spanning across the entirety of a fixed area.

For example: I have a horizontal navigation with the following links:
Home | About Us | Our Services | Gallery | Contact

Not a big deal right? Well, what if I wanted them to stretch evenly across 960px, and I didn’t want to do a ton of math to figure out what the width would be for each of them individually? This sounds like a nightmare already, but what if I faced my fears and I decide to take it a step further by using something silly like padding or a border on them as well? As Smashing Magazine has said: “PERCENTAGE + PADDING + BORDER = TROUBLE.”

Well, At this point in the past, chances are I would have abandoned the idea completely but because of the lovely flexbox I don’t have to! Check out a few of my examples below as well as the more detailed article: CSS3 Flexible Box Layout Explained from Smashing Magazine for more information.

Example 01: Navigation
Example 02: Newspaper


Boombot is not your grandma’s turntable bot

Posted on by Tony
2

Whether you’ve got 1, or 10,000+ DJ points on turntable.fm you know two things: 1.) you’re so completely addicted that you’re not sure how you survived on Pandora for all those years, and 2.) you’ve always been jealous of those little bots that you have stumbled upon in popular rooms. Some of greet you, some tweet you, and some just talk smack on command but one thing is for sure, none of them are nearly as cool or are nearly as well documented as Boombot is.

Right now you’re saying something along the lines of “Well, thats great dude, but what does that do for me?”  Well… what if I was to tell you that you could have your own?  Yup, it’s true! Go ahead and check out his github page for installation and usage information. Also, don’t forget to circle +Michael Belardo on Google Plus, and buy him a coffee for all of the hard work he’s put into it.

I just backed Gizmachi and you should too

Posted on by Tony
Reply

Gizmachi (a metalcore band from Newburgh, New York) wants to partner up their fans and friends, to help their second album FINALLY see the light of day! Just make a pledge, and in return you get cool Gizmachi stuff. Just think of yourself as the 6th member of the band!

Rewards include : Digital download of new album one week before release, Signed posters, Shirts, Personal thank you inside CD liner notes, Used drum heads/guitar strings, sweaty gym socks, and MUCH MORE.

Check their campaign on Kickstarter for more information

Imageless CSS Star Rating with Javascript

Posted on by Tony
Reply

It was really disturbing to me that there were so many “CSS star rating” examples out there, and every single one of them was relying on images. Surely this wasn’t impossible to do with just CSS. Turns out, it is, but luckily we have Javascript.

So how do you show a star without an image? CSS’s pseudo-element :before is the man for the job.

a.star:before {content:"\2605"}

See the buttons below for more, and special thanks to +Mike Belardo for getting his Javascript on.