This is the beginning of a new article series. The first series ever. And it's all about random shit I'm involved in.
The rise of Browserhacks
Hugo Giraudel & myself (with contributions of the #4ae9b8 team) created Browserhacks, an extensive list of browser specific CSS and JavaScript hacks from all over the interwebs.
But you should read Hugo's comprehensive article for a proper introduction.
hugogiraudel.com/2013/02/25/browserhacks/
It's all open source and you can fork it on GitHub.
github.com/4ae9b8/browserhacks
We are very proud of this project and it's awesome that so many people like it.
reddit.com/r/web_design
There are even people following @Browserhacks on twitter.
twitter.com/Browserhacks
And here it is: Hack what ever you want!
browserhacks.com
Browserhack has 3323 visitors today.
1/2 clock animation
It was a boring day and I had nothing to do. So I searched for unanswered questions on Stackoverflow. Yeah, even more boring. But I found this one:
stackoverflow.com/questions/14374092
A simple clockwise animation? This should be possible in CSS.
I tried and tried and tried... I hated everything and tried again. My solution? A 1/2 clock animation D: Can someone please help me?
codepen.io/TimPietrusky/pen/jqpog
Convert a random string to css color
Some time ago I found this interesting question on Stackoverflow:
Jeremy Goodell
Why do weird things in font color attribute produce real colors?
stackoverflow.com/questions/12939234
What does this mean?
Put a random string into a CSS color and the browser generates a color out of that.
So how does this work?
The author of the question provided a 5-step algorithm to convert a string into a hex color.
You don't have to understand it, because I transformed these 5-steps into this:
randomstringtocsscolor.com
Fork me on GitHub.
github.com/TimPietrusky/randomstringtocsscolor
Inspiration is everywhere
Oh, what's this? A tweet by Francesco Trillini:
twitter.io/Francext/status/311594881292320770
Francesco Trillini
@TimPietrusky Just found it http://www.nimbletank.com 'n I want to share it with you. Try it on Chrome mobile. What else to say?!?!!!
That inspired me to create a creepy eye, which is build with a big box-shadow and a mousemove/touchmove event.
codepen.io/TimPietrusky/pen/eiAwb
Pro tip: Move the eye around!
Having fun.
Combine animation + box-shadow + filter + transform and you get a loading animation :D
codepen.io/TimPietrusky/pen/jFzGJ
Diary. I hate it.
I love Grumpy Cat, the grumpiest cat on the interwebs. That's why I have created a meme generator. Oh yes, that's true.
grumpycathatesyou.com
You can edit the meme (choose title, picture or font), save it and copy the URL of your browser bar to share the link with everyone.
Like every project this one is open source and you can fork it on GitHub.
github.com/TimPietrusky/grumpycathatesyou
33,254 unique people visited Browserhacks from March 1st until now.
Last & least
A friend gave me a screenshot and wrote: Can you please create the HTML/CSS for this? And yes, you can create your own style :D
Awesome! I had a lot of fun building this intranet administration interface for him.
codepen.io/TimPietrusky/pen/epcIx
It's full responsive and stuff :D