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 06 October 2021, Wednesday.

How do I make an flat ios 7 safari icon?
  1. Flat iOS 7 Safari Icon Previews
  2. Flat iOS 7 Safari Icon HTML Codes
  3. Flat iOS 7 Safari Icon CSS Codes
  4. Flat iOS 7 Safari Icon JS Codes
Flat iOS 7 Safari Icon Previews

Flat iOS 7 Safari Icon 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 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 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

***/
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.