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.
Making iOS 7 squircles using CSS3
11–20 of 25 posts
Re: Making iOS 7 squircles using CSS3
#12[deleted]
Re: Making iOS 7 squircles using CSS3
#13There's also this article that has quite a detailed analysis of the rounded corners of iOS7 icons http://www.mani.de/backstage/?p=483
That's much better than the "superellipse" formula that was going around a few weeks ago. It was a good try, but it was pretty imprecise (based on an image that was too low-res to accurately compare).
Re: Making iOS 7 squircles using CSS3
#14Who coined the phrase 'squircle". Are these not superellipses[1]? [1] http://en.wikipedia.org/wiki/Superellipse
Wasn't a squircle the name for the control pad on Zune?
Re: Making iOS 7 squircles using CSS3
#15Who coined the phrase 'squircle". Are these not superellipses[1]? [1] http://en.wikipedia.org/wiki/Superellipse
I don't think I know anyone who wouldn't just call them rounded corners. Except maybe blogs trying to coin a new term to make them seem interesting again.
Re: Making iOS 7 squircles using CSS3
#16As 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.
I had the same thought, the editing of the css and html was more valuable to me than the actual tutorial.
Re: Making iOS 7 squircles using CSS3
#17Who coined the phrase 'squircle". Are these not superellipses[1]? [1] http://en.wikipedia.org/wiki/Superellipse
"Squircle, the superellipse with n = 4, a = b = 1"
Re: Making iOS 7 squircles using CSS3
#18Who coined the phrase 'squircle". Are these not superellipses[1]? [1] http://en.wikipedia.org/wiki/Superellipse
Wasn't a squircle the name for the control pad on Zune?
I thought Nokia 'owned' the squircle http://interuserface.net/2011/06/own-a-shape/
Re: Making iOS 7 squircles using CSS3
#19Nice! 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.
Re: Making iOS 7 squircles using CSS3
#20There's also this article that has quite a detailed analysis of the rounded corners of iOS7 icons http://www.mani.de/backstage/?p=483
Reminds me a lot between the G1 and G3 curvature functions from Autodesk Alias (http://www.youtube.com/watch?v=GSIIU03NGlY). More control points are used for more curvature continuity (see also http://en.wikipedia.org/wiki/Freeform_surface_modelling).