

Making iOS 7 squircles using CSS3 - _kushagra
http://thecodeplayer.com/walkthrough/css3-squircles

======
didgeoridoo
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.

~~~
taspeotis
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...](http://ua-mac.org/wp-content/uploads/2013/09/iOS-7-Styled-App-Store-
icon.jpg) (hope this isn't someone recreating it...)

------
cheeaun
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](http://www.mani.de/backstage/?p=483)

~~~
micheljansen
Reminds me a lot between the G1 and G3 curvature functions from Autodesk Alias
([http://www.youtube.com/watch?v=GSIIU03NGlY](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](http://en.wikipedia.org/wiki/Freeform_surface_modelling)).

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

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

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

------
charlesism
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...](http://www.folklore.org/StoryView.py?story=Round_Rects_Are_Everywhere.txt)

------
andybak
Who coined the phrase 'squircle". Are these not superellipses[1]?

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

~~~
TannerLD
[http://en.wikipedia.org/wiki/Squircle](http://en.wikipedia.org/wiki/Squircle)

~~~
andybak
ah!

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

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

------
silv3r_m00n
looks good

