IOS 7 Icon

Developer
Haeman
Size
6,964 Kb
Views
38,456
  1. IOS 7 Icon Previews
  2. IOS 7 Icon HTML Codes
  3. IOS 7 Icon CSS Codes

How do I make an ios 7 icon?

Brand New iOS 7 Icon Camera icon inspired by http://dribbble.com/shots/1115045-Photo-Icon-ios7. What is a ios 7 icon? How do you make a ios 7 icon? This script and codes were developed by Haeman on 29 August 2022, Monday.

IOS 7 Icon Previews
IQ Test

IOS 7 Icon - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>iOS 7 Icon</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline;
}
html { line-height: 1;
}
ol, ul { list-style: none;
}
table { border-collapse: collapse; border-spacing: 0;
}
caption, th, td { text-align: left; font-weight: normal; vertical-align: middle;
}
q, blockquote { quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none;
}
a img { border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block;
}
html { height: 100%;
}
body { font-family: "Open Sans", sans-serif; background: #d95d5d; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY1YTM4MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU4Y2E4ZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #65a383), color-stop(100%, #58ca8e)); background-image: -moz-linear-gradient(#65a383, #58ca8e); background-image: -webkit-linear-gradient(#65a383, #58ca8e); background-image: linear-gradient(#65a383, #58ca8e); color: #333; height: 100%;
}
#container { width: 370px; margin: 40px auto;
}
*[class^="icon7-"] { background: #d9d9d9; width: 100px; height: 100px; display: inline-block; border-radius: 10px; position: relative; margin: 10px; margin-bottom: 30px; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.35), 0px -30px 65px -25px rgba(0, 0, 0, 0.25) inset;
}
*[class^="icon7-"] p { position: absolute; bottom: -25px; left: 0px; right: 0px; text-align: center; font-weight: normal; color: #fff;
}
.icon7-camera { background: #4E4E4E;
}
.icon7-camera:after { content: ""; position: absolute; top: 20px; left: 20px; bottom: 20px; right: 20px; background: #444; display: block; border-radius: 100%; box-shadow: 0px 0px 0px 5px #444, 0px 0px 0px 10px #D9D9D9 inset;
}
.icon7-camera:before { content: ""; position: absolute; top: 34px; left: 43px; width: 15px; height: 15px; background: #f1f1f1; border-radius: 100%; z-index: 1; box-shadow: 35px -25px 0px -3px #E21B1B, 35px -24px 3px -2px #9E0F0F;
}
.icon7-chat { background: #18CBF8;
}
.icon7-chat:after { content: ""; position: absolute; bottom: 15px; right: 35px; height: 0; background: transparent; width: 0; border: 10px solid #fff; border-left: 10px solid transparent; border-bottom: 10px solid transparent;
}
.icon7-chat:before { content: ""; position: absolute; top: 20px; left: 15px; bottom: 30px; right: 15px; background: #fff; border-radius: 100%;
}
.icon7-calendar { background: #fff; font-weight: 300;
}
.icon7-calendar:after { content: "10"; position: absolute; top: 30px; left: 0px; right: 0px; font-size: 60px; text-align: center; color: #333;
}
.icon7-calendar:before { content: "Monday"; position: absolute; left: 0px; right: 0px; text-align: center; background: #DD3434; padding: 5px 0px; border-radius: 10px 10px 0px 0px; color: #fff; box-shadow: 0px -25px 25px -25px rgba(0, 0, 0, 0.25) inset;
}
.icon7-twitter { background: url(https://abs.twimg.com/a/1371147400/images/resources/twitter-bird-dark-bgs.png) #00A4D8; background-size: cover;
}
.icon7-gallery { background: #f3f3f1;
}
.icon7-gallery:after { content: ""; background: #faa71d; width: 20px; height: 20px; position: absolute; border-radius: 100%; top: 20px; left: 40px; box-shadow: 0px 0px 0px #faa71d, 0px 40px 0px rgba(239, 228, 0, 0.81), -20px 20px 0px rgba(195, 221, 60, 0.8), 20px 20px 0px rgba(106, 193, 158, 0.8), 15px 5px 0px rgba(115, 175, 225, 0.8), 15px 35px 0px rgba(166, 141, 198, 0.81), -15px 35px 0px rgba(218, 128, 163, 0.81), -15px 5px 0px rgba(243, 109, 97, 0.81);
}
.icon7-safari { background: #28DADA;
}
.icon7-safari:before, .icon7-safari:after { content: ""; display: block; position: absolute; top: 15px; right: 30px; width: 0px; height: 0px; border: 40px solid #FF4A4A; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 0px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);
}
.icon7-safari:after { border-bottom: 0px; border-top: 40px solid #fff; top: 45px; left: 30px;
}
footer { text-align: center; color: #fff; font-size: 13px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>	<div id="container">	<i class="icon7-camera"><p>Camera</p></i>	<i class="icon7-chat"><p>Messenger</p></i>	<i class="icon7-calendar"><p>Calendar</p></i>	<i class="icon7-gallery"><p>Gallery</p></i>	<i class="icon7-twitter"><p>Twitter</p></i>	<i class="icon7-safari"><p>Safari</p></i>	</div>	<footer>	iOS 7 Icon CSS3 By Martabak	</footer> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

IOS 7 Icon - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline;
}
html { line-height: 1;
}
ol, ul { list-style: none;
}
table { border-collapse: collapse; border-spacing: 0;
}
caption, th, td { text-align: left; font-weight: normal; vertical-align: middle;
}
q, blockquote { quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none;
}
a img { border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block;
}
html { height: 100%;
}
body { font-family: "Open Sans", sans-serif; background: #d95d5d; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY1YTM4MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU4Y2E4ZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #65a383), color-stop(100%, #58ca8e)); background-image: -moz-linear-gradient(#65a383, #58ca8e); background-image: -webkit-linear-gradient(#65a383, #58ca8e); background-image: linear-gradient(#65a383, #58ca8e); color: #333; height: 100%;
}
#container { width: 370px; margin: 40px auto;
}
*[class^="icon7-"] { background: #d9d9d9; width: 100px; height: 100px; display: inline-block; border-radius: 10px; position: relative; margin: 10px; margin-bottom: 30px; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.35), 0px -30px 65px -25px rgba(0, 0, 0, 0.25) inset;
}
*[class^="icon7-"] p { position: absolute; bottom: -25px; left: 0px; right: 0px; text-align: center; font-weight: normal; color: #fff;
}
.icon7-camera { background: #4E4E4E;
}
.icon7-camera:after { content: ""; position: absolute; top: 20px; left: 20px; bottom: 20px; right: 20px; background: #444; display: block; border-radius: 100%; box-shadow: 0px 0px 0px 5px #444, 0px 0px 0px 10px #D9D9D9 inset;
}
.icon7-camera:before { content: ""; position: absolute; top: 34px; left: 43px; width: 15px; height: 15px; background: #f1f1f1; border-radius: 100%; z-index: 1; box-shadow: 35px -25px 0px -3px #E21B1B, 35px -24px 3px -2px #9E0F0F;
}
.icon7-chat { background: #18CBF8;
}
.icon7-chat:after { content: ""; position: absolute; bottom: 15px; right: 35px; height: 0; background: transparent; width: 0; border: 10px solid #fff; border-left: 10px solid transparent; border-bottom: 10px solid transparent;
}
.icon7-chat:before { content: ""; position: absolute; top: 20px; left: 15px; bottom: 30px; right: 15px; background: #fff; border-radius: 100%;
}
.icon7-calendar { background: #fff; font-weight: 300;
}
.icon7-calendar:after { content: "10"; position: absolute; top: 30px; left: 0px; right: 0px; font-size: 60px; text-align: center; color: #333;
}
.icon7-calendar:before { content: "Monday"; position: absolute; left: 0px; right: 0px; text-align: center; background: #DD3434; padding: 5px 0px; border-radius: 10px 10px 0px 0px; color: #fff; box-shadow: 0px -25px 25px -25px rgba(0, 0, 0, 0.25) inset;
}
.icon7-twitter { background: url(https://abs.twimg.com/a/1371147400/images/resources/twitter-bird-dark-bgs.png) #00A4D8; background-size: cover;
}
.icon7-gallery { background: #f3f3f1;
}
.icon7-gallery:after { content: ""; background: #faa71d; width: 20px; height: 20px; position: absolute; border-radius: 100%; top: 20px; left: 40px; box-shadow: 0px 0px 0px #faa71d, 0px 40px 0px rgba(239, 228, 0, 0.81), -20px 20px 0px rgba(195, 221, 60, 0.8), 20px 20px 0px rgba(106, 193, 158, 0.8), 15px 5px 0px rgba(115, 175, 225, 0.8), 15px 35px 0px rgba(166, 141, 198, 0.81), -15px 35px 0px rgba(218, 128, 163, 0.81), -15px 5px 0px rgba(243, 109, 97, 0.81);
}
.icon7-safari { background: #28DADA;
}
.icon7-safari:before, .icon7-safari:after { content: ""; display: block; position: absolute; top: 15px; right: 30px; width: 0px; height: 0px; border: 40px solid #FF4A4A; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 0px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);
}
.icon7-safari:after { border-bottom: 0px; border-top: 40px solid #fff; top: 45px; left: 30px;
}
footer { text-align: center; color: #fff; font-size: 13px;
}
IOS 7 Icon - Script Codes
IOS 7 Icon - Script Codes
Home Page Home
Developer Haeman
Username pedox
Uploaded August 29, 2022
Rating 3.5
Size 6,964 Kb
Views 38,456
Do you need developer help for IOS 7 Icon?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Haeman (pedox) Script Codes
Name
Commuter Line Tokyu 8500
Loading Hourglass
Keroppi
Pure CSS3 Button
The Yosemite
Twitter info
Google Metro Flatten
Thin Google Homepage
Terminal
Handbook CSS3
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!