6 ms·

Making iOS 7 squircles using CSS3

56 points by _kushagra 13y ago

douglee650 13y ago
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; }
chiaro 13y ago
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 13y ago
  I had the same thought, the editing of the css and html was more valuable to me than the actual tutorial.
andybak 13y ago
Who coined the phrase 'squircle". Are these not superellipses[1]? [1] http://en.wikipedia.org/wiki/Superellipse http://en.wikipedia.org/wiki/Superellipse
- TannerLD 13y ago
  http://en.wikipedia.org/wiki/Squircle http://en.wikipedia.org/wiki/Squircle
  - andybak 13y ago
    ah!
- ericcumbee 13y ago
  Wasn't a squircle the name for the control pad on Zune?
  - jimbobjim 13y ago
    I thought Nokia 'owned' the squircle http://interuserface.net/2011/06/own-a-shape/ http://interuserface.net/2011/06/own-a-shape/
- lnanek2 13y ago
  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.
  - recursive 13y ago
    "Rounded corners" suggests garden-variety border-radius usage.
- sambeau 13y ago
  "Squircle, the superellipse with n = 4, a = b = 1"
silv3r_m00n 13y ago
looks good
cheeaun 13y ago
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
- mortenjorck 13y ago
  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).
- micheljansen 13y ago
  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).
- nickheer 13y ago
  This is probably the best analysis that I've seen of the iOS 7 icon shape: http://blog.mikeswanson.com/post/62341902567/unleashing-genetic-algorithms-on-the-ios-7-icon http://blog.mikeswanson.com/post/62341902567/unleashing-gene... (I am slightly biased, though.)
didgeoridoo 13y ago
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 13y ago
  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-App-Store-icon.jpg http://ua-mac.org/wp-content/uploads/2013/09/iOS-7-Styled-Ap... (hope this isn't someone recreating it...)
  - deleted 13y ago
    [deleted]
josefresco 13y ago
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?
deleted 13y ago
[deleted]
cvalleskey 13y ago
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.
charlesism 13y ago
You kids and your Squircles! In my day, all we had were Round Rects http://www.folklore.org/StoryView.py?story=Round_Rects_Are_Everywhere.txt http://www.folklore.org/StoryView.py?story=Round_Rects_Are_E...
Kiro 13y ago
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?

56 points by _kushagra 13y ago

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; }

chiaro 13y ago

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 13y ago
I had the same thought, the editing of the css and html was more valuable to me than the actual tutorial.

andybak 13y ago

Who coined the phrase 'squircle". Are these not superellipses[1]? [1] http://en.wikipedia.org/wiki/Superellipse http://en.wikipedia.org/wiki/Superellipse

TannerLD 13y ago
http://en.wikipedia.org/wiki/Squircle http://en.wikipedia.org/wiki/Squircle
- andybak 13y ago
  ah!
ericcumbee 13y ago
Wasn't a squircle the name for the control pad on Zune?
- jimbobjim 13y ago
  I thought Nokia 'owned' the squircle http://interuserface.net/2011/06/own-a-shape/ http://interuserface.net/2011/06/own-a-shape/
lnanek2 13y ago
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.
- recursive 13y ago
  "Rounded corners" suggests garden-variety border-radius usage.
sambeau 13y ago
"Squircle, the superellipse with n = 4, a = b = 1"

silv3r_m00n 13y ago

looks good

cheeaun 13y ago

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

mortenjorck 13y ago
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).
micheljansen 13y ago
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).
nickheer 13y ago
This is probably the best analysis that I've seen of the iOS 7 icon shape: http://blog.mikeswanson.com/post/62341902567/unleashing-genetic-algorithms-on-the-ios-7-icon http://blog.mikeswanson.com/post/62341902567/unleashing-gene... (I am slightly biased, though.)

didgeoridoo 13y ago

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

josefresco 13y ago

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?

deleted 13y ago

[deleted]

cvalleskey 13y ago

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.

charlesism 13y ago

You kids and your Squircles! In my day, all we had were Round Rects http://www.folklore.org/StoryView.py?story=Round_Rects_Are_Everywhere.txt http://www.folklore.org/StoryView.py?story=Round_Rects_Are_E...

Kiro 13y ago

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?