Making iOS 7 squircles using CSS3 | Hacker News Reader

Making iOS 7 squircles using CSS3

thecodeplayer.com

56 points_kushagra22 comments

Very nice effect, but there's nothing squircley (?) about iOS 7 icons -- they're just squares with [more gradually] rounded corners.

Edit: inserted bracketed qualifier after reading cheeaun's article.

Yeah I'm looking at my app icons and they're squares with rounded corners [1].

Not sure if the author is lumping in iOS 7 for clicks or if he's got some fancy European version of iOS.

[1] http://ua-mac.org/wp-content/uploads/2013/09/iOS-7-Styled-Ap... (hope this isn't someone recreating it...)

There'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).

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).

This is probably the best analysis that I've seen of the iOS 7 icon shape: http://blog.mikeswanson.com/post/62341902567/unleashing-gene...

(I am slightly biased, though.)

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.

I had the same thought, the editing of the css and html was more valuable to me than the actual tutorial.

You kids and your Squircles! In my day, all we had were Round Rects

http://www.folklore.org/StoryView.py?story=Round_Rects_Are_E...

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]?

[1] http://en.wikipedia.org/wiki/Superellipse

http://en.wikipedia.org/wiki/Squircle

ah!

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/

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.

"Rounded corners" suggests garden-variety border-radius usage.

"Squircle, the superellipse with n = 4, a = b = 1"

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:

.icons a, .icons a:before, .icons a:after { -webkit-backface-visibility: hidden; }

looks good

Reply on news.ycombinator.com