It's amazing how much code is on Google but despite all my looking I could not find a CSS solution to recreate the iPhone badge icon. So here is my own.
a, a:link, a:visited {
background-color: #bc0000;
background: -moz-linear-gradient(100% 59% 90deg, #bc0000, #feb9be);
background: -webkit-gradient(linear, 0% 0%, 0% 78%, from(#feb9be), to(#bc0000));
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
box-shadow: 0px 3px 3px black;
-moz-box-shadow: 0px 3px 3px black;
-webkit-box-shadow: 0px 3px 3px black;
border: 2px solid #fff;
color:#fff;
font-family:helvetica, sans-serif;
font-size:14px;
padding:2px 6px;
text-decoration:none;
text-align:center;
}
4 comments:
Thanks for this.. looks great
Thank you.
I used CSS Hat to produce one from an iPhone PSD, and it was good but the padding and such was funky, so I combined it and yours, here is the result.
.badgeit {
background-color: #f00;
background-clip: padding-box; /* prevents bg color from leaking outside the border */
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2M1MDEwMyIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZTcwZjE5IiBzdG9wLW9wYWNpdHk9IjEiLz4KPHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiNlOTJkMzUiIHN0b3Atb3BhY2l0eT0iMSIvPgo8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmN2IzYjciIHN0b3Atb3BhY2l0eT0iMSIvPgogICA8L2xpbmVhckdyYWRpZW50PgoKPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjaGF0MCkiIC8+Cjwvc3ZnPg==); /* gradient overlay */
background-image: -moz-linear-gradient(90deg, #c50103 0%, #e70f19 49.51%, #e92d35 51.22%, #f7b3b7 100%); /* gradient overlay */
background-image: -o-linear-gradient(90deg, #c50103 0%, #e70f19 49.51%, #e92d35 51.22%, #f7b3b7 100%); /* gradient overlay */
background-image: -webkit-linear-gradient(90deg, #c50103 0%, #e70f19 49.51%, #e92d35 51.22%, #f7b3b7 100%); /* gradient overlay */
background-image: linear-gradient(90deg, #c50103 0%, #e70f19 49.51%, #e92d35 51.22%, #f7b3b7 100%); /* gradient overlay */
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-moz-box-shadow: 0 2px 2px rgba(0,0,0,.7); /* drop shadow */
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,.7); /* drop shadow */
box-shadow: 0 2px 2px rgba(0,0,0,.7); /* drop shadow */
border: 2px solid #fff;
color:#fff;
font-family:helvetica, sans-serif;
font-size:14px;
padding:2px 6px;
text-decoration:none;
text-align:center;
}
The main differences: I reduced the box-shadow, but that's actually personal preference. The background-clip is the biggest positive impact, however. It also slightly alters the rotation of the gradients, which again was based on what came out of the photoshop file for the badge I used.
Post a Comment