Making iOS 7 squircles using CSS3

TannerLD wrote: post #4

andybak wrote: post #2

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

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

ah!

Re: Making iOS 7 squircles using CSS3

#6

Post by cheeaun » Fri, Oct 18, 2013, 12:56 PM UTC

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

Re: Making iOS 7 squircles using CSS3

#7

Post by didgeoridoo » Fri, Oct 18, 2013, 12:57 PM UTC

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.

Re: Making iOS 7 squircles using CSS3

#8

Post by douglee650 » Fri, Oct 18, 2013, 1:13 PM UTC

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

Re: Making iOS 7 squircles using CSS3

#9

Post by taspeotis » Fri, Oct 18, 2013, 1:14 PM UTC

didgeoridoo wrote: post #7

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

Re: Making iOS 7 squircles using CSS3

#10

Post by josefresco » Fri, Oct 18, 2013, 1:27 PM UTC

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?