Making iOS 7 squircles using CSS3

http://thecodeplayer.com/walkthrough/css3-squircles

by _kushagra • 13 years ago

56 22 13 years ago

thecodeplayer.com

andybak2• 13 years ago

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

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

TannerLD• 13 years ago

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

andybak2• 13 years ago

ah!

ericcumbee• 13 years ago

Wasn't a squircle the name for the control pad on Zune?

jimbobjim• 13 years ago

I thought Nokia 'owned' the squircle http://interuserface.net/2011/06/own-a-shape/

lnanek2• 13 years 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• 13 years ago

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

sambeau• 13 years ago

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

silv3r_m00n• 13 years ago

looks good

cheeaun• 13 years 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

mortenjorck• 13 years 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• 13 years ago

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

nickheer• 13 years ago

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

didgeoridoo• 13 years 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• 13 years 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-Ap... (hope this isn't someone recreating it...)

douglee650• 13 years 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; }

josefresco• 13 years 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?

chiaro• 13 years 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• 13 years ago

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

cvalleskey• 13 years 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• 13 years 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_E...

Kiro• 13 years 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?

Making iOS 7 squircles using CSS3

Related Stories