Flat iOS 7 Safari Icon

Developer

Size

3,332 Kb

Views

72,864

Flat iOS 7 Safari Icon Previews
Flat iOS 7 Safari Icon HTML Codes
Flat iOS 7 Safari Icon CSS Codes
Flat iOS 7 Safari Icon JS Codes

How do I make an flat ios 7 safari icon?

Just for fun making experiments with iOS 7 flat design icons.. What is a flat ios 7 safari icon? How do you make a flat ios 7 safari icon? This script and codes were developed by Rıza Selçuk Saydam on 02 August 2022, Tuesday.

Flat iOS 7 Safari Icon Previews

Flat iOS 7 Safari Icon - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flat iOS 7 Safari 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/normalize/5.0.0/normalize.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! */ body {	background-color: #fafafa;	min-width: 400px;	min-height: 300px;
}
.safari {	margin: 20px auto;	position: relative;	width: 256px;	height: 256px;	border-radius: 62px;	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(56,197,252,1)), color-stop(100%,rgba(52,183,235,1)));	background: -webkit-linear-gradient(top, rgba(56,197,252,1) 0%,rgba(52,183,235,1) 100%);	background: -moz-linear-gradient(top, rgba(56,197,252,1) 0%,rgba(52,183,235,1) 100%);	background: -o-linear-gradient(top, rgba(56,197,252,1) 0%,rgba(52,183,235,1) 100%);	background: -ms-linear-gradient(top, rgba(56,197,252,1) 0%,rgba(52,183,235,1) 100%);	background: linear-gradient(top, rgba(56,197,252,1) 0%,rgba(52,183,235,1) 100%);
}
.safari:before {	content: "";	display: block;	height: 192px;	width: 192px;	position: absolute;	top: 50%;	left: 50%;	margin: -104px 0 0 -104px; /* 96+8 */
border-radius: 100%;	border: 8px solid #fff;
}
.needle {	position: absolute;	top: 50%;	left: 50%;	z-index: 2;	height: 0;	width: 0;	display: block;	-webkit-transform: rotate(-45deg);	-moz-transform: rotate(-45deg);	-o-transform: rotate(-45deg);	-ms-transform: rotate(-45deg);	transform: rotate(-45deg);	cursor: pointer;
}
.needle:before,.needle:after {	content: "";	display: block;	width: 0;	height: 0;	border-style: solid;	position: absolute;	top: -11.25px;
}
.needle:before {	right: 0;	border-width: 11.25px 90px 11.25px 0;	border-color: transparent #f75a49 transparent transparent;
}
.needle:after {	left: 0;	border-width: 11.25px 0 11.25px 90px;	border-color: transparent transparent transparent #fff;
}
.safari .needle {	-webkit-animation: rotateAnimation 5s infinite;	-moz-animation: rotateAnimation 5s infinite;	-ms-animation: rotateAnimation 5s infinite;	-o-animation: rotateAnimation 5s infinite;	animation: rotateAnimation 5s infinite;
}
@keyframes "rotateAnimation" { 0% { -webkit-transform: rotate(-45deg);	-moz-transform: rotate(-45deg);	-o-transform: rotate(-45deg);	-ms-transform: rotate(-45deg);	transform: rotate(-45deg); } 33% { -webkit-transform: rotate(-30deg);	-moz-transform: rotate(-30deg);	-o-transform: rotate(-30deg);	-ms-transform: rotate(-30deg);	transform: rotate(-30deg); } 66% { -webkit-transform: rotate(-60deg);	-moz-transform: rotate(-60deg);	-o-transform: rotate(-60deg);	-ms-transform: rotate(-60deg);	transform: rotate(-60deg); } 100% { -webkit-transform: rotate(-45deg);	-moz-transform: rotate(-45deg);	-o-transform: rotate(-45deg);	-ms-transform: rotate(-45deg);	transform: rotate(-45deg); }
}
@-moz-keyframes rotateAnimation { 0% { -moz-transform: rotate(-45deg); transform: rotate(-45deg); } 33% { -moz-transform: rotate(-30deg); transform: rotate(-30deg); } 66% { -moz-transform: rotate(-60deg); transform: rotate(-60deg); } 100% { -moz-transform: rotate(-45deg); transform: rotate(-45deg); }
}
@-webkit-keyframes "rotateAnimation" { 0% { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } 33% { -webkit-transform: rotate(-30deg); transform: rotate(-30deg); } 66% { -webkit-transform: rotate(-60deg); transform: rotate(-60deg); } 100% { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
}
@-ms-keyframes "rotateAnimation" {	-ms-transform: rotate(-45deg);	transform: rotate(-45deg);
} 33% { -ms-transform: rotate(-30deg); transform: rotate(-30deg); } 66% { -ms-transform: rotate(-60deg); transform: rotate(-60deg); } 100% { -ms-transform: rotate(-45deg); transform: rotate(-45deg); }
} @-o-keyframes "rotateAnimation" {	-webkit-transform: rotate(-45deg);	-moz-transform: rotate(-45deg);	-o-transform: rotate(-45deg);	-ms-transform: rotate(-45deg);	transform: rotate(-45deg);
} 33% { -webkit-transform: rotate(-30deg);	-moz-transform: rotate(-30deg);	-o-transform: rotate(-30deg);	-ms-transform: rotate(-30deg);	transform: rotate(-30deg); } 66% { -webkit-transform: rotate(-60deg);	-moz-transform: rotate(-60deg);	-o-transform: rotate(-60deg);	-ms-transform: rotate(-60deg);	transform: rotate(-60deg); } 100% { -webkit-transform: rotate(-45deg);	-moz-transform: rotate(-45deg);	-o-transform: rotate(-45deg);	-ms-transform: rotate(-45deg);	transform: rotate(-45deg); } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="safari">	<div class="needle"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Flat iOS 7 Safari Icon - Script Codes CSS Codes

body {	background-color: #fafafa;	min-width: 400px;	min-height: 300px;
}
.safari {	margin: 20px auto;	position: relative;	width: 256px;	height: 256px;	border-radius: 62px;	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(56,197,252,1)), color-stop(100%,rgba(52,183,235,1)));	background: -webkit-linear-gradient(top, rgba(56,197,252,1) 0%,rgba(52,183,235,1) 100%);	background: -moz-linear-gradient(top, rgba(56,197,252,1) 0%,rgba(52,183,235,1) 100%);	background: -o-linear-gradient(top, rgba(56,197,252,1) 0%,rgba(52,183,235,1) 100%);	background: -ms-linear-gradient(top, rgba(56,197,252,1) 0%,rgba(52,183,235,1) 100%);	background: linear-gradient(top, rgba(56,197,252,1) 0%,rgba(52,183,235,1) 100%);
}
.safari:before {	content: "";	display: block;	height: 192px;	width: 192px;	position: absolute;	top: 50%;	left: 50%;	margin: -104px 0 0 -104px; /* 96+8 */
border-radius: 100%;	border: 8px solid #fff;
}
.needle {	position: absolute;	top: 50%;	left: 50%;	z-index: 2;	height: 0;	width: 0;	display: block;	-webkit-transform: rotate(-45deg);	-moz-transform: rotate(-45deg);	-o-transform: rotate(-45deg);	-ms-transform: rotate(-45deg);	transform: rotate(-45deg);	cursor: pointer;
}
.needle:before,.needle:after {	content: "";	display: block;	width: 0;	height: 0;	border-style: solid;	position: absolute;	top: -11.25px;
}
.needle:before {	right: 0;	border-width: 11.25px 90px 11.25px 0;	border-color: transparent #f75a49 transparent transparent;
}
.needle:after {	left: 0;	border-width: 11.25px 0 11.25px 90px;	border-color: transparent transparent transparent #fff;
}
.safari .needle {	-webkit-animation: rotateAnimation 5s infinite;	-moz-animation: rotateAnimation 5s infinite;	-ms-animation: rotateAnimation 5s infinite;	-o-animation: rotateAnimation 5s infinite;	animation: rotateAnimation 5s infinite;
}
@keyframes "rotateAnimation" { 0% { -webkit-transform: rotate(-45deg);	-moz-transform: rotate(-45deg);	-o-transform: rotate(-45deg);	-ms-transform: rotate(-45deg);	transform: rotate(-45deg); } 33% { -webkit-transform: rotate(-30deg);	-moz-transform: rotate(-30deg);	-o-transform: rotate(-30deg);	-ms-transform: rotate(-30deg);	transform: rotate(-30deg); } 66% { -webkit-transform: rotate(-60deg);	-moz-transform: rotate(-60deg);	-o-transform: rotate(-60deg);	-ms-transform: rotate(-60deg);	transform: rotate(-60deg); } 100% { -webkit-transform: rotate(-45deg);	-moz-transform: rotate(-45deg);	-o-transform: rotate(-45deg);	-ms-transform: rotate(-45deg);	transform: rotate(-45deg); }
}
@-moz-keyframes rotateAnimation { 0% { -moz-transform: rotate(-45deg); transform: rotate(-45deg); } 33% { -moz-transform: rotate(-30deg); transform: rotate(-30deg); } 66% { -moz-transform: rotate(-60deg); transform: rotate(-60deg); } 100% { -moz-transform: rotate(-45deg); transform: rotate(-45deg); }
}
@-webkit-keyframes "rotateAnimation" { 0% { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } 33% { -webkit-transform: rotate(-30deg); transform: rotate(-30deg); } 66% { -webkit-transform: rotate(-60deg); transform: rotate(-60deg); } 100% { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
}
@-ms-keyframes "rotateAnimation" {	-ms-transform: rotate(-45deg);	transform: rotate(-45deg);
} 33% { -ms-transform: rotate(-30deg); transform: rotate(-30deg); } 66% { -ms-transform: rotate(-60deg); transform: rotate(-60deg); } 100% { -ms-transform: rotate(-45deg); transform: rotate(-45deg); }
} @-o-keyframes "rotateAnimation" {	-webkit-transform: rotate(-45deg);	-moz-transform: rotate(-45deg);	-o-transform: rotate(-45deg);	-ms-transform: rotate(-45deg);	transform: rotate(-45deg);
} 33% { -webkit-transform: rotate(-30deg);	-moz-transform: rotate(-30deg);	-o-transform: rotate(-30deg);	-ms-transform: rotate(-30deg);	transform: rotate(-30deg); } 66% { -webkit-transform: rotate(-60deg);	-moz-transform: rotate(-60deg);	-o-transform: rotate(-60deg);	-ms-transform: rotate(-60deg);	transform: rotate(-60deg); } 100% { -webkit-transform: rotate(-45deg);	-moz-transform: rotate(-45deg);	-o-transform: rotate(-45deg);	-ms-transform: rotate(-45deg);	transform: rotate(-45deg); }

Flat iOS 7 Safari Icon - Script Codes JS Codes

/***
This is a CSS3 Flat iOS 7 Safari Icon.
Design: Vladimir Carrer http://drbl.in/hUDR
Front-End: Rıza Selçuk Saydam http:/rss-ems.com
***/

Home Page	Home
Developer	Rıza Selçuk Saydam
Username	rss
Uploaded	August 02, 2022
Rating	3.5
Size	3,332 Kb
Views	72,864

Do you need developer help for Flat iOS 7 Safari 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!

Rıza Selçuk Saydam (rss) Script Codes

Name	Size
Loader Animation	2,761 Kb
SOCIAL BANG	8,251 Kb
Star Wars Toggle Icon Animation	3,180 Kb
Pigecon	3,730 Kb
METU CSS3 Logo	2,504 Kb
Flat iOS 7 Safari Icon	3,332 Kb
CSS3 Loading Animation	5,219 Kb
CSS3 Loader Animation - Peeek	3,854 Kb
Button Switch	5,239 Kb
Animated Flat Camera Icon	3,843 Kb

Create amazing sales emails 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!

Similar Scripts & Codes

Name	Username	Size
Pure CSS Read More Arrow	Zephyr	1,747 Kb
Multi column experiment.	Spylefkaditis	2,805 Kb
Sticky menu on scroll	Senff	2,869 Kb
Experiment - SCSS SVG Background Image with Variables	See8ch	3,270 Kb
Classy Blockquote Styling	Andrewwright	3,212 Kb
Highbrow Basic HTML Lesson 8	Kimlarocca	2,094 Kb
Simple Weather App	Cmwebby	0 Kb
Wip elementary os navbar	Nickcolley	2,993 Kb
Direction-icon	Alexandremasy	3,323 Kb
The CodePen Logo	Kindofone	4,259 Kb

Do you want hide your ip address?

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!