Not sure about the smileys, but the functional icons are pretty neat, thanks for sharing. Slightly OT, but the codepen highlighting of the various steps taken is incredibly intuitive, and does a great job of visualising how these icons are built up. However, it does highlight (for me personally), the abuse of the before and after pseudo elements; Essentially it is giving you three layers, great. Want 4, add another s…
Show HN: CSS ICON, an icon set crafted by pure CSS
51–60 of 69 posts
Re: Show HN: CSS ICON, an icon set crafted by pure CSS
#52I tip my hat and raise a glass to you, you're a great artist.
Re: Show HN: CSS ICON, an icon set crafted by pure CSS
#53Wow! I'm not really a front end person who works with this kind of stuff, so I don't know the real use case of this versus something else. But: I went through a lot of the simpler ones on the codepen (minus, plus, menu, etc.) and learned some awesome techniques that I didn't know, then recreated them from scratch and was able to create some of the more complicated things. tbh I probably learned more css in the last h…
this made my day! like what I said in the video, I struggled finding use case of it for other people, and decided to spend more time than what I spent on crafting these icons to make this an educational web app with angularjs. I am very glad it is doing what I want it to do. I recorded these tutorials long time ago and never posted it anywhere, i think maybe this will interest you https://www.youtube.com/watch?v=TNCn…
Re: Show HN: CSS ICON, an icon set crafted by pure CSS
#54Not sure about the smileys, but the functional icons are pretty neat, thanks for sharing. Slightly OT, but the codepen highlighting of the various steps taken is incredibly intuitive, and does a great job of visualising how these icons are built up. However, it does highlight (for me personally), the abuse of the before and after pseudo elements; Essentially it is giving you three layers, great. Want 4, add another s…
IE8 doesn't support SVG, which might matter for some websites
Re: Show HN: CSS ICON, an icon set crafted by pure CSS
#55Earlier quoted context omitted.
this is awesome analyze, thanks!
What about caching - is that an advantage over inline SVG? I imagine the css would compress better too? I'd like to see animated ones. Holy geocities! I have no clue how it works. Amazing.
Re: Show HN: CSS ICON, an icon set crafted by pure CSS
#56Re: Show HN: CSS ICON, an icon set crafted by pure CSS
#57What you did with that border radius on the mustache icon is so slick! I had no idea the border-radius could be made to curl up beyond the top of the shape like that. And then making mirrored circles out of a box-shadow, that is tidy! I tip my hat and raise a glass to you, you're a great artist.
Re: Show HN: CSS ICON, an icon set crafted by pure CSS
#58Re: Show HN: CSS ICON, an icon set crafted by pure CSS
#59Re: Show HN: CSS ICON, an icon set crafted by pure CSS
#60Why not just use SVG inside a data url? E.g., as in [1]. [1] https://en.wikipedia.org/wiki/Data_URI_scheme#Examples