20 17
Aleksandrs Cudars shared a design

Coderbits logo in pure...NO,... not even pure.. DISTILLED CSS!

Took me 3h to make this. A good morning exercise (due to technical issues couldn't upload sooner)!

As the logo consists of many irregular shapes, recreating it required a lot of "thinking in layers and masks". The most surprising way to make irregular shapes that I found out was using various border-radius properties that vary depending on the border as well as applying various border-widths to various borders. [this sentence sounded dodgy...]

Naturally, as a creator, I am my own most "critical critic criticizing to the fullest", so I am still aware that the white hair between the eyes could be improved using some CSS magic. Same applies for the tongue and mouth area overall.

I also didn't know what font was used for the numbers inside the eyes, so I had to search for the closest match. Those were fun 20 minutes... XD

In the image below the original is on the right and my creation is on the left.

See the result: http://codepen.io/achudars/full/cinde See the code: http://codepen.io/achudars/pen/cinde


Scott Smith made a comment

I knew you could do it! This is so cool. Amazing work!

Thabo Fletcher made a comment

Awesome job!

Scott Smith made a comment

To show our appreciation, we would like to set you up with some swag from our Shop. Pick something out and tell us the size, color, and where to ship via email.


androidcrawler made a comment

Jay Leno :D

Exarchiasghost made a comment

Awesome! :D

Scott Smith made a comment

The font is Oleo Script with the "s" customized.

Aleksandrs Cudars made a comment

@Scott Smith Is the email social@coderbits.com the one that I need to send me postal address to? Can I have the power mug? The fact that it has "power" in it, already makes it sound cool and I'm just in a need for a large mug... =)

Also @Scott Smith I was actually asking about the font used for numbers in the eyes (as you cansee the font I used is slightly taller, narrower and slimmer than in the original). Recreating the customised Oleo Script font is quite complicated, so I believe the mascot without text will suffice. =D

@everyone, thanks for the likes! =)

@androidcrawler, when you code for fun, why not have some fun embedded in code? =D

Kevin Granger made a comment

Master piece !

Scott Smith made a comment

Yes, the email is social@coderbits.com and sure thing on the mug.

Scott Smith made a comment

Pretty involved discussion going on over at Reddit about this. Check it out:


Aleksandrs Cudars made a comment

I totally agree with peex: "I don't get why everyone is so butthurt about this. The guy did a cool a thing and shared it with the internet. We all know and I believe the maker of this thing also knows this is unnecessary. It is just a cool piece of art done with CSS. Appreciate it and move on."

I'm also confused why everyone is so worried about those 3h. Those are 3h and that's it. It wasn't difficult it just took time. =)

Lastly I don't care about the old IE support. If you can see it fine, good! XD

It is funny, how people worry about cross browser functionality and practical applicability! It is not meant for that, haha!

I wonder if people were saying the same thing when Mona Lisa was made. Why wasn't it painted on the ceiling? It doesn't support wood-carving! Using a real-life --> oil-paint converter would have been more efficient! It doesn't support the brushes 3. I'm looking at it through my 13th century glasses and I cannot understand the size of it. Negative margins! XD

Scott Smith made a comment

I completely agree Aleksandrs. What you made was just plain cool. You did something very challenging using a technology that wasn't originally meant for it. This is how we innovate and grow!

Thabo Fletcher made a comment

There is a difference between people who actually do things, and people that talk about doing things. Let's face it, redditors are not know for being highly productive, I'm sure the average redditor has lost far more than 3 hours on there, and learned almost nothing.

Talking about efficiency is a great way to be extremely inefficient and look like a pro in front of people who don't know any better. "I hate to be a negative Nancy, but...". Pffft. They can't help doing it, and it's why no one wants to work with them.

Aleksandrs Cudars made a comment

Thanks, @Thabo Fletcher!

Aleksandrs Cudars made a comment

same story, same comments: http://www.theverge.com/2013/5/22/4354794/london-underground-map-css-john-galantini

Scott Smith made a comment

shakes head

Piper Chester made a comment

Awesome work! I didn't even realize it was possible to create something like this with CSS... thanks for opening my eyes!

You must be signed in to comment - Sign in or Sign up

Intelligent portfolios for developers and designers.

We build factual up-to-date portfolios from sites you use to showcase your skills, expertise, traits, code, designs, education, and more.


Aleksandrs Cudars

automagically is my favourite word

Newest opportunities

Newest posts