Making iOS 7 squircles using CSS3

View code Play Walkthrough

Experiments

Description

If you have noticed iOS 7 app icons, they are not normal squares with rounded corners. They are squircles which have properties of both a circle and a square.

This demo is an attempt to achieve a similar effect using CSS3. Pseudo elements are used to create 2 fish eye shapes which are later clipped to make the sides of the suqare a bit curved.

Add New Comment

8 Comments

(close)
Paul Radzkov

Paul Radzkov

Nice demo.

One improvement.
Use background: inherit to get rid of repeating when setting color.

.icons a:before,
.icons a:after {

background: inherit;

}

/*colors*/
.tw {background: #00ACF0;}
.fb {background: #3B5997;}
.gp {background: #DB4F48;}
.ig {background: #447397;}
.li {background: #007DB8;}
.yt {background: #D12E2E;}

Joshua Hutt

Joshua Hutt

You should consider adding this to the CSS for the icons, to eliminate the shifting effect in Chrome:

-webkit-backface-visibility: hidden;

Hope this helps!

Chris

Chris

Would it be possible to display a picture (e.g. user-avatar) instead of the basic background colors?

jabez128

jabez128

so impressive!!
expect much more good works!!

Sammy

Sammy

Is there any way for me to get icons for other websites too like Blogger for example?

Richard Mišenčík

Richard Mišenčík

What is it supposted to do? From border-radius it all looks the same, no changes.

5x 10x 15x 20x

8 Comments

Description