How to Squircle an App Icon Image with Just CSS

How to squircle an app icon image with just CSS

The easiest solution might be to create the image with a transparent background until some of the following features are implemented.

If you can add the image via CSS then you could just add height, width, background-image and background-size to the link (.icons a).

Note: This might not be the desired effect as it is complemented by a background colour.

.icons a {
      height: 100px;
      width: 100px;
      background-image: url(https://picsum.photos/256/);
      background-size: cover;
      text-decoration: none;
      color: white;
      display: inline-block;
      margin: 20px;
      border-radius: 24px;
      position: relative;
    }

    .icons a:before,
    .icons a:after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: inherit;
      border-radius: 100%;
      -webkit-transform: scaleX(2) scaleY(1.05);
      transform: scaleX(2) scaleY(1.05);
      clip: rect(0, 66px, 100px, 34px);
      z-index: -1;
    }

    .icons a:after {
      -webkit-transform: scaleY(2) scaleX(1.05) rotate(90deg);
      transform: scaleY(2) scaleX(1.05) rotate(90deg);
    }

<div class="icons">
    <a href="#"></a>
</div>

How to round-off an image with CSS

Apparently the shape is called an Squircle. After I found that term, it was quite easy to find someone who has already found a solution to creating the shape. I will leave the solution here, if somebody else needs it (definitely not as simple as border-radius):

Please be aware that I did NOT create this solution, all credit should be given to Mkmueller, https://codepen.io/mkmueller/, for his solution here: https://codepen.io/mkmueller/pen/wRJYKa

* {    box-sizing: border-box;}
body {    display: flex;    align-items: center;    justify-content: center;    height: 100vh;    margin: 0;}
svg.defs {    position: absolute;    width: 0;    height: 0;}
.squircle {    width: 75vmin;    height: 75vmin;    background: url(https://source.unsplash.com/user/mkmueller/likes/1000x1000) center / cover, #aaa;    clip-path: url(#squircle);}
.wrapper {    filter: drop-shadow(0 0 100px rgba(#000, .25));}

<svg class="defs">    <defs>        <clipPath id="squircle" clipPathUnits="objectBoundingBox">            <path d="M .5 0 C .1 0 0 .1 0 .5 0 .9 .1 1 .5 1 .9 1 1 .9 1 .5 1 .1 .9 0 .5 0 Z" fill="#f00"/>        </clipPath>    </defs></svg>
<div class="wrapper">    <div class="squircle"></div></div>

Mimicking Android Home screen icons in CSS

Some calculated and statice values....
This shape felt somewhat close, although not sure if could be much useful due to too much CSS applied just for a single icon.

body {  margin: 0px;}div {  box-sizing: border-box;}.icon-wrap {  display: inline-block;  padding: 10px;  width: 80px;  height: 70px;}.icon-wrap > div {  position: absolute;  background-color: lightgray;  height: 50px;  width: 58px;  display: block;  border-radius: 15px/30px;  background: rgb(247, 247, 247);  background: -moz-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(229, 229, 229, 1) 100%);  background: -webkit-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(229, 229, 229, 1) 100%);  background: linear-gradient(to bottom, rgba(247, 247, 247, 1) 0%, rgba(229, 229, 229, 1) 100%);  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7', endColorstr='#e5e5e5', GradientType=0);}.icon-wrap > div:before {  content: '';  display: inline-block;  position: relative;  z-index: -1;  height: 59px;  width: 48px;  left: 5px;  top: -5px;  background-color: lightgray;  border-radius: 30px/15px;  background: rgb(247, 247, 247);  background: -moz-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(229, 229, 229, 1) 100%);  background: -webkit-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(229, 229, 229, 1) 100%);  background: linear-gradient(to bottom, rgba(247, 247, 247, 1) 0%, rgba(229, 229, 229, 1) 100%);  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7', endColorstr='#e5e5e5', GradientType=0);}.icon-wrap > div > img {  position: relative;  width: 40px;  height: 40px;  top: -60px;  left: 9px;}

<div class="icon-wrap">  <div>    <img src="http://diylogodesigns.com/blog/wp-content/uploads/2016/04/whatsapp-logo-PNG-Transparent.png" />  </div></div>
<div class="icon-wrap">  <div>    <img src="http://diylogodesigns.com/blog/wp-content/uploads/2016/04/whatsapp-logo-PNG-Transparent.png" />  </div></div>
<div></div>
<div class="icon-wrap">  <div>    <img src="http://diylogodesigns.com/blog/wp-content/uploads/2016/04/whatsapp-logo-PNG-Transparent.png" />  </div></div>

<div class="icon-wrap">  <div>    <img src="http://diylogodesigns.com/blog/wp-content/uploads/2016/04/whatsapp-logo-PNG-Transparent.png" />  </div></div>

svg fill image quality. How to fix?

patternUnits="userSpaceOnUse" add to <pattern >

<svg xmlns="http://www.w3.org/2000/svg" width="146" height="146" viewBox="-10 -10 470 468"><defs><pattern id="image-as_profile_widget-4" height="100%" width="100%" patternUnits="userSpaceOnUse" patternContentUnits="objectBoundingBox" viewBox="0 0 1 1" preserveAspectRatio="xMidYMid slice"><image itemprop="photo" height="1" width="1" preserveAspectRatio="xMidYMid slice" xlink:href="http://www.gravatar.com/avatar/4a7131ab3b3fa22f2fea9fadaa018981?s=146"></image></pattern></defs><path fill="url(#image-as_profile_widget-4)" d="M9.635 132.808C24.782 59.782 71.388 19.109 144.085 6.822c53.74-9.081 107.5-9.196 161.15.255 74.852 13.185 119.85 56.23 134.185 130.36 11.075 57.29 11.249 115.191-.174 172.427-15.324 72.52-63.132 117.285-135.561 129.527-53.74 9.08-107.5 9.195-161.15-.255-74.852-13.186-120.05-58.38-134.384-132.509-11.64-57.668-10.52-115.935 1.484-173.82z" id="path-1"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="146" height="146" viewBox="-10 -10 146 146"><defs><pattern id="image-as_profile_widget-2" patternUnits="userSpaceOnUse" height="100%" width="100%" patternContentUnits="objectBoundingBox" viewBox="0 0 1 1" preserveAspectRatio="xMidYMid slice"><image itemprop="photo" height="1" width="1" preserveAspectRatio="xMidYMid slice" xlink:href="http://www.gravatar.com/avatar/4a7131ab3b3fa22f2fea9fadaa018981?s=146"></image></pattern></defs>    <rect x="0" y="0" rx="4" ry="4" width="146" height="146" fill="url(#image-as_profile_widget-2)" stroke="#ffffff" stroke-width="0" stroke-opacity="1" id="path-1"></rect>

Java swixml in an OSX app bundle

You can set the WorkingDirectory property in the App's Info.plist..

http://www.blog.jasonederle.com/?p=15

---

Related Topics