Making iOS 7 squircles using CSS3

@ thecodeplayer

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

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