{"id":643,"date":"2012-03-28T21:09:43","date_gmt":"2012-03-29T04:09:43","guid":{"rendered":"http:\/\/zsprawl.com\/iOS\/?p=643"},"modified":"2012-03-28T21:09:43","modified_gmt":"2012-03-29T04:09:43","slug":"home-screen-icon-gloss-effect-with-css","status":"publish","type":"post","link":"http:\/\/zsprawl.com\/iOS\/2012\/03\/home-screen-icon-gloss-effect-with-css\/","title":{"rendered":"Home Screen Icon Gloss Effect with CSS"},"content":{"rendered":"

I recently created a new “about” panel for my zApps that will display all of my zApps on the iTunes’ store, much like I did in the panel on the right side of this website. If you’ve ever looked closely at an App’s icon, you will notice that they all have rounded corners and a shine affect, both of which are added after the fact. <\/p>\n

Here is a normal icon:<\/p>\n

\"\"<\/a><\/p>\n

To round the corners, we use the following webkit code:<\/p>\n

<\/p>\n

-webkit-border-radius: 10px;<\/pre>\n
<\/code><\/p>\n
This will give you icons similar to the ones on the right side of this website. I also added an “inset” border to the bottom to give it that raised effect.<\/p>\n
<\/p>\n
border: thin solid #333;\r\nborder-bottom: 2px inset #333;<\/pre>\n
<\/code><\/p>\n
While other browsers may render the icons correctly so far, this is where Safari’s webkit is going to shine. We are going to add the shine effect with CSS directly to the icon. To do this though, we must make the icon a background image, and then hardset the size of the surrounding div.<\/p>\n
<\/p>\n
display: block;\r\nwidth: 57px;\r\nheight: 57px;\r\nbackground-image: -webkit-gradient(radial, 28.5 -47, 0, 28.5 0, 700,\r\n    from(rgba(255,255,255,1)), to(rgba(255,255,255,0)),\r\n    color-stop(10%, rgba(255,255,255,0.3)),\r\n    color-stop(10.5%, rgba(140,140,140,0.4)),\r\n    color-stop(13%, rgba(140,140,140,0)),\r\n    color-stop(13.7%, rgba(255,255,255,0)),\r\n    color-stop(17%, rgba(255,255,255,1))), url('..\/zApps\/Whipped.png');\r\nbackground-size: 57px 57px;<\/pre>\n
<\/code><\/p>\n
And here is the end result (I took a screen capture in case you are not viewing this in Safari).<\/p>\n
\"\"<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
I recently created a new “about” panel for my zApps that will display all of my zApps on the iTunes’ store, much like I did in the panel on the right side of this website. If you’ve ever looked closely at an App’s icon, you will notice that they all have rounded corners and a 
more \u00bb<\/a><\/p>\n","protected":false},"author":318,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24,43,3],"tags":[36,9],"class_list":["post-643","post","type-post","status-publish","format-standard","hentry","category-blog","category-css","category-ios-development","tag-css3","tag-development"],"aioseo_notices":[],"_links":{"self":[{"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/posts\/643"}],"collection":[{"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/users\/318"}],"replies":[{"embeddable":true,"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/comments?post=643"}],"version-history":[{"count":4,"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/posts\/643\/revisions"}],"predecessor-version":[{"id":649,"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/posts\/643\/revisions\/649"}],"wp:attachment":[{"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/media?parent=643"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/categories?post=643"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/tags?post=643"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}