I Already Don't Like You™. Pretty Sure The Message Was Clear. GO AWAY

Animated CSS Mask Icons

Damn. This is cool. I’m gonna have to start a sandbox myself to start playing like this guy. You’re gonna have to view this in webkit only browers.

simurai:

Small demo of animated CSS Mask Icons. Note: It uses the non-standard CSS masks that are only implemented in WebKit without a spec. I don’t wanna go into discussing if that’s ok or not, instead I just like to experiment with them because I think you can do cool stuff and hopefully one day it will become standard.

Using CSS masks for icons would have the benefit of being able to create a large icon-set and easily swap textures, colors, shadow effects. And also animate them. Basically everything you can do with CSS backgrounds. It could also be used for other stuff like tooltips, speech bubbles, funky shaped buttons and so on.

The basics of this demo goes something like this:

1. Add a texture and gradients to your element’s background.
2. Use SVG (or PNG) as mask-image to “cut out” the rectangle into the desired shape.
3. Use a second shape together with mask-composite to either add  (source-over -> robot), subtract (source-out -> apple bite, cloud arrow) or intersect (xor -> cloud arrow while pressing) with the first mask.
4. Add some transitions/animations to the mask-position.

So ya, basically you can mask a mask, combine multiple masks or even do the opposite depending if they overlap or not. In total there are a dozen mask-composite options that I’m not quite sure what the exact difference is. I just tried them all till it worked like I wanted. ;-)

Couple notes:

• Pseudo elements (highlight on the cloud) also gets masked.
• CSS filters (Chrome Canary, WebKit nightly) work great with CSS masks, unlike box-shadows. See how the drop-shadow follows the contures of the SVG shape.
• For better cross-browser support you could just animate multiple backgrounds (background-composite works too), but then you loose the ability to use a seamless texture.
• I’m pretty sure, you could do all the effects with SVG alone. It has masks, drop-shadows, animation.. I just haven’t really dugg myself deep enough into them.
• Since it uses mask-position to animate the masks, you can’t rotate them, which is a little limiting.

See demo (WebKit)

pep.jquery.js

gregbabula:

Pep was built out of a need for kinetic drag support for both mobile and desktop devices (click and drag). It uses jQuery and CSS3 animations to bring full-blown ‘kinetic drag’ to HTML5-ready environments.

Celebrating 2 years of dicking around on the internet.

And to commemorate this blogging milestone, I finally debut the 4th redesign of this blog, with a new Tumblr Avatar to boot, no more drunk party photo. I’m all class now:

I was actually suppossed to finish this like in November, but this pesky thing called a job got in my damn way. Curse my need for White Castle frozen burgers!

This is crazy though, guys. I’ve never had this long of a commitment to anything. Women. Jobs. Sobriety. I really have to give it up to Tumblr and the large community that makes maintaining this blog fun and not a chore. My followers have  grown quite a bit since I first started and I’m still amazed that people actually look at this thing.

A lot has happened since year 1.

I got a new job, I’m a full Art-Director now. I moved to Plano. I started eating ground turkey (wtf right? it’s delicious). Got an iPad. Started a podcast. Attempted to do the “Robot” to impress a girl at a bar (that not only didn’t work, but I think I saw a little hate in her eye).

But mainly I have decided that I eventually want to pursue a career in digital/interactive art-direction & design. It’s been a long journey to get to that realization but sometimes that’s just the way it’s gotta be. These side projects I work on and blog about are my mental exercises. I don’t think my interactive work is anywhere near to the level I aspire to, but I’ll sure as hell keep trying. You should like a little insecurity in your designer. Keeps ‘em honest.

Working on this latest redesign of my blog has been pretty intense, especially with the new hours I keep at my job. However, I really wanted to explore the latest web technolgies and practices out there. Besides all the fancy CSS3 you’ll see around the site, I challenged myself by making the whole damn thing responsive & fluid. I also really tried to re-design this site from the ground up. I re-skinned the Disqus comments, adding post jump navigation that follows your mouse, and added Q&A posting capabilities (now you can ask me questions). Hell I even put some thought into the post social share buttons.

This was the hardest web project I’ve ever done, mainly cause I’m a front-end web-designer, not a developer (so please forgive me if you’re looking at my javascript and css files, I really did try at first to be efficient,  haha). I had to go back to the books, do research. If you guys are interested in a list of all the scripts and web components I used to make this site work, check out my humans.txt file.

It was hard work, but it was strangely fun trying to figure this stuff out, and I feel better experience coming out of the other end the process. The minute this thing starts feeling like work is when I need to call it quits.

Holy crap I’ve been rambling. Thanks for being patient and reading this. You guys are the best. And check out the site. Spread it around like the herp. I’m done.

HTML5 Audio Data Burst

Using canvas, audio, and data visualization with the Twitters, they came up with something really unique. Check it out