IOS 7 Icon
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 - 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;
}
Developer | Haeman |
Username | pedox |
Uploaded | August 29, 2022 |
Rating | 3.5 |
Size | 6,964 Kb |
Views | 38,456 |
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!
Name | Size |
Instagrabber | 7,997 Kb |
Windows 8 metro UI | 4,213 Kb |
Lollipop Loading | 3,119 Kb |
Keroppi | 3,522 Kb |
Handbook CSS3 | 3,032 Kb |
Thomas Bangalter Daft Punk helmet | 5,729 Kb |
Mac | 2,892 Kb |
The Rainbow | 3,309 Kb |
Custom Select Checkbox | 2,600 Kb |
Martabak Box | 2,895 Kb |
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!
Name | Username | Size |
SVG Animation | Thepheer | 4,793 Kb |
DNA Double Helix | Hugo | 5,112 Kb |
Vanilla modal window | Jasonhowmans | 3,554 Kb |
Ghost Buttons with CSS3 | Mithicher | 2,509 Kb |
Simple DevTools | Deegill | 2,511 Kb |
Button shaking | SusanneLundblad | 2,227 Kb |
A Pen by Alexandru Pora | Axpro | 1,615 Kb |
CSS Google Now | Jackmoran | 3,196 Kb |
Svg sky | Omodev | 7,070 Kb |
Ocean | Gordonnl | 2,817 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!