Say hello to the CSS3 octocat!!
A CSS3 octocat?
Yes a CSS3 octocat!!
…c’mon you know me…
Nothing can stop me. hehe…
Look at the Image or see it live here:
Demo
Source
Comic coding can be so much fun.
And again. Whyyyyy?
I’m actually still preparing for my workshop tomorrow.
I wanted to know how long it would take me to make this one, so I know how much time to plan . Well this one took me about 2 1/2 hours (well I drank 2 beer and ate something in a restaurant while I did it. So I’d guess like near two hours would be realistic.)
Is this really a subject for a workshop?. Yes definitely. Not only that you can learn a lot about semantic code and CSS’s special cases + browser support but it’s also so much fun to do and takes away the fear of having to create elements in CSS.
Trust me, I’m honest about this.
tutorial?
I’m not going to write a tutorial on the CSS3 octocat, but since it’s an octocat I will put the source code on https://github.com.
BTW I use Compass/SCSS for making these.
http://sass-lang.com/
http://compass-style.org/
So where’s the code for the CSS3 octocat???
https://github.com/pixelass/css3-octocat
Here you go.
Please remember, this is just a proof of concept and I only tested it on Chrome (it should look perfect on Safari Firefox and IE10 too though).
So let’s see what the participants of my workshop do tomorrow. I’m pretty confident that some awesome CSS3 comic coding is going to happen tomorrow.
I will probably write a follow up on this and just because it’s so much fun, I might just do a few more of these CSS3 icons/logos/comic characters… whatever.
Cheers have fun and feel free to fork and improve the octocat (I know it can be improved quite a bit)
Gregor Adams
I specialize in CSS, HTML and JavaScript. As I am a huge fan and also a student of open-source, I try to help other programmers (especially newcomers) as much as I can. I am also very happy for "true" criticism. So feel free to ask any question you like and I will try to give the best possible answer.
