Very nice effect, but there's nothing squircley (?) about iOS 7 icons -- they're just squares with [more gradually] rounded corners.<p>Edit: inserted bracketed qualifier after reading cheeaun's article.
There's also this article that has quite a detailed analysis of the rounded corners of iOS7 icons <a href="http://www.mani.de/backstage/?p=483" rel="nofollow">http://www.mani.de/backstage/?p=483</a>
Nice! One minor tweak that reduces redundancy in the CSS: You can set 'background-color: inherit' on the :before and :after pseudo-classes for the icon links and it works the same way without having to apply the background-color on the element and it's :before/:after.
As someone who is learning front-end, the way this tutorial presented is really valuable to me. Standard tutorials too often miss the 'whys' for your actions, and more. It's great to see the decision making and fine tuning done live.
You kids and your Squircles! In my day, all we had were Round Rects<p><a href="http://www.folklore.org/StoryView.py?story=Round_Rects_Are_Everywhere.txt" rel="nofollow">http://www.folklore.org/StoryView.py?story=Round_Rects_Are_E...</a>
Mouseover effects are neat for mouse users. I see on mobile the mouseover happens on touch/press. Assuming your icons are linking somewhere, is this useful for mobile or just for mouse folks?
Who coined the phrase 'squircle". Are these not superellipses[1]?<p>[1] <a href="http://en.wikipedia.org/wiki/Superellipse" rel="nofollow">http://en.wikipedia.org/wiki/Superellipse</a>
So in Chrome for Mac the icons glitch with the pinch effect but it works fine on Chrome for Windows. Why is the difference between the two Chromes not more acknowledged?
very cool, thanks for this. btw -- to make the jumpiness disappear on the hover effect, add:<p>.icons a, .icons a:before, .icons a:after {
-webkit-backface-visibility: hidden;
}