Pure CSS Steemit Logo
- The CSS Reddit Alien in pure CSS
- The Facebook Icon in pure CSS
- Larry the Twitter Bird in pure CSS
You haven't made it as a social network until someone has tried to create a pure css version of your icon, so I did just that for Steemit.
The Pure CSS Steemit Logo is here
No javascript; no images; no SVG's; just some div soup and cascading style sheets.
Here is more or less what you are looking at:
As you can see each peice of the logo is comprised of several div elements layered on top of one another to achieve the effect. It is scalable, but has some minor rendering issues at certain resolutions and on some mobile browsers. I didn't even bother to look at IE because - what's the point?
Source: Imgur
What is it good for?
Just like most pure CSS versions, it is pretty useless. Maybe if you really optimize the markup you can save like 1/2 KB on your page size.
It did keep me occupied while I was sick and in bed all day today, so that's something.
Probably could use bit more extra refining in FF and Chrome, does not look that good on IE11... and yes, some people still do use that:
Yep. Agree with everything you wrote. It's just not super clean, but given that it really has limited practical purpose, it's not really worth my time to try to make it perfect.
Also, you are still using IE! OH NO!
Source: MemeGuy
Just kidding - we each use what is best for us.
Thanks for the comment.
Nice piece of art :D
How about an SVG version? I mean, search engines already know how to deal with SVG and use them to generate thumbnails/previews. Just curious about what is the use case for your creation?
Use case? None.
I think sometimes people just like to try to see what they can create with CSS alone. That's what I did here since, as I mentioned above, I was sick in bed today :(
Here is an SVG if you want one.
Rock on! Thanks for the link @mynameisbrian!
-- develCuy
@mynameisbrian epic work my friend!
The logo looks great in chrome, firefox, firefox developer edition, opera, safari and brave.