HTML/CSS Instagram Logo

Developer
Casey Callis
Size
4,441 Kb
Views
6,072
  1. HTML/CSS Instagram Logo Previews
  2. HTML/CSS Instagram Logo HTML Codes
  3. HTML/CSS Instagram Logo CSS Codes

How do I make an html/css instagram logo?

My first code illustration AND my first pen! The Instagram logo seemed like a simple enough shape to tackle. The only image is the leather texture - the rest is pure html/css. . What is a html/css instagram logo? How do you make a html/css instagram logo? This script and codes were developed by Casey Callis on 09 January 2023, Monday.

HTML/CSS Instagram Logo Previews
IQ Test

HTML/CSS Instagram Logo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>HTML/CSS Instagram Logo</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='https://fonts.googleapis.com/css?family=Bevan' rel='stylesheet' type='text/css'>
<div class="camera-body">	<div class="lens">	<div class="blue-highlight-top"></div>	<div class="inner-lens">	<div class="reflections">	<div class="reflection"></div>	<div class="reflection2"></div>	</div>	<div class="shutter">	<div class="glare"></div>	</div>	</div>	<div class="blue-highlight-bottom"></div>	<div class="lens-glow"></div>	<div class="long-shadow"></div>	</div>	<div class="camera-top">	<ul class="stripes">	<li class="red stripe"></li>	<li class="yellow stripe"></li>	<li class="green stripe"></li>	<li class="blue stripe"></li>	</ul>	<div class="view-finder-inset">	<div class="view-finder">	<div class="view-finder-glare"></div>	<div class="view-finder-lens">	<div class="view-finder-reflections">	<div class="view-finder-reflection"></div>	<div class="view-finder-reflection2"></div>	</div>	</div>	</div>	</div>	</div>	</div>
<p>Best Viewed In Chrome.</p>
</body>
</html>

HTML/CSS Instagram Logo - Script Codes CSS Codes

body{	margin: 100px;	z-index: 0; background: radial-gradient(rgb(255, 255, 255), rgb(204, 186, 161), rgb(63, 37, 2));	}	*{	box-sizing: border-box;	-webkit-box-sizing: border-box;	}	.camera-body{	width: 400px;	height: 400px;	border-radius: 70px;	background: radial-gradient(#f9f9f8,#f7f5f1, #f1ece6, #ebe5da, #dcd0c0, #B9A288, #72594D, #3F2E29);	background: -webkit-radial-gradient(#f9f9f8,#f7f5f1, #f1ece6, #ebe5da, #dcd0c0, #B9A288, #72594D, #3F2E29);	overflow: hidden;	margin: 0 auto;	box-shadow: -6px -4px 34px #3B2F28 inset;	}	.camera-top{	width: 100%;	height: 130px;	background: radial-gradient(rgba(166, 122, 93, 0.7), rgba(141, 93, 72, 0.7), rgba(94, 52, 38, 0.7), rgba(49, 34, 30, 0.8)), url(http://www.caseycallis.com/images/leather-brown.png);	background: -webkit-radial-gradient(rgba(166, 122, 93, 0.7), rgba(141, 93, 72, 0.7), rgba(94, 52, 38, 0.7), rgba(49, 34, 30, 0.8)), url(http://www.caseycallis.com/images/leather-brown.png);	margin: 0 auto;	box-shadow: 0px -7px 15px rgba(60, 29, 22, 0.9) inset;	}	.camera-top:before{	content: "";	position: absolute;	width: 150px;	height: 60px;	border-radius: 50%;	background: radial-gradient(#FCBF99, #ae866d);	background: -webkit-radial-gradient(#FCBF99, #ae866d);	background: -moz-radial-gradient(#FCBF99, #ae866d);	background: -o-radial-gradient(#FCBF99, #ae866d);	filter: blur(20px);	-webkit-filter: blur(20px);	margin-left: 131px;	margin-top: 19px;	opacity: 0.75;	}	.lens{	width: 200px;	height: 200px;	margin: 0 auto;	background: -webkit-linear-gradient(#f0efef, #eeeaea, #d7d1cf, #cbc3be, #b5a9a8);	background: linear-gradient(#f0efef, #eeeaea, #d7d1cf, #cbc3be, #b5a9a8);	border-radius: 50%;	position: absolute;	margin-left: 100px;	margin-top: 100px;	box-shadow: 0px 11px 7px #726158;	z-index: 0;	}	.lens:before{	content: "";	width: 175px;	height: 175px;	margin: 0 auto;	background: #040609;	border-radius: 50%;	position: absolute;	margin-left: 13px;	margin-top: 13px;	box-shadow: 0px 5px 7px #ece9e7;	}	.lens:after{	content:"";	position: absolute;	background:transparent;	border-radius: 50%;	width: 200px;	height: 200px;	box-shadow: 0px 2px 6px #877f79 inset;	}	.blue-highlight-top{	position: absolute;	z-index: 9;	background: radial-gradient(top center, #59C2E4, #3F7ECA, #0A2B68);	background: -webkit-radial-gradient(top center, #59C2E4, #3F7ECA, #0A2B68);	width: 101px;	height: 105px;	border-radius: 50%;	margin-left: 48px;	margin-top: 25px;	filter: blur(8px);	-webkit-filter: blur(8px);	}	.inner-lens{	width: 130px;	height: 130px;	border-radius: 50%;	position: absolute;	background: -webkit-radial-gradient(#0C1B17, #222B27, #5B9297);	background: radial-gradient(#071A15, #1B3026, #5B9297);	margin: 35px;	z-index: 999;	box-shadow: 0px 4px 4px rgba(126, 140, 155, 0.88) inset;	perspective: 47px;	}	.inner-lens:before{	content: "";	width: 15px;	height: 56px;	background: linear-gradient(to left, rgba(255, 255, 255, 0.4), rgba(255,255,255, 0.25), rgba(255, 255, 255, 0.0));	background: -webkit-linear-gradient(to left, rgba(255, 255, 255, 0.4), rgba(255,255,255, 0.25), rgba(255, 255, 255, 0.0));	position: absolute;	border-radius: 62%;	top: -13px;	left: 57px;	z-index: 999999;	filter: blur(6px);	-webkit-filter: blur(6px);	}	.inner-lens:after{	content: "";	position: absolute;	border-radius: 50%;	width: 175px;	height: 175px;	box-shadow: 0px 2px 6px #877f79 inset;	background: linear-gradient(left, rgba(8, 9, 13, 0.7), rgba(8, 9, 13, 0.29) ,transparent);	background: -webkit-linear-gradient(left, rgba(8, 9, 13, 0.7), rgba(8, 9, 13, 0.29) ,transparent);	opacity: 0.85;	z-index: 9999;	margin-left: -22px;	margin-top: -22px;	}	.shutter{	width: 90px;	height: 90px;	border-radius: 50%;	position: absolute;	background: radial-gradient(#4C2555, #322841, #191A25, #21252b, #14181c);	background: -webkit-radial-gradient(#4C2555, #322841, #191A25, #21252b, #14181c);	margin: 20px;	z-index: 99999;	box-shadow: 0px 5px 9px rgba(67, 98, 112, 0.6) inset;	border: 4px solid rgba(18, 24, 24, 0.75);	}	.reflections{	position: absolute;	width: 120px;	height: 120px;	background: transparent;	border-radius: 50%;	overflow: hidden;	margin-left: -12px;	margin-top: 18px;	transform-origin: bottom center;	transform: rotatey(-20deg) rotatez(-1deg);	z-index: 999999;	filter: blur(0.75px);	-webkit-filter: blur(0.75px);	}	.reflection{	background: linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,0.65));	background: -webkit-linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,0.65));	right: 0px;	height: 39px;	position: relative;	width: 8px;	top: 4px;	float: right;	transform-origin: center center;	transform: rotate(-126deg) skew(1deg);	}	.reflection2{	height: 31px;	position: relative;	width: 14px;	float: right;	top: 0px;	transform-origin: center center;	transform: rotate(51deg);	perspective: 350px;	background: linear-gradient(rgba(255,255,255,0.25), rgba(255,255,255,0.35));	background: -webkit-linear-gradient(rgba(255,255,255,0.25), rgba(255,255,255,0.35));	right: 0px;	}	.lens-glow{	width: 138px;	height: 117px;	border-radius: 41%;	background: radial-gradient(rgba(255, 255, 255, 0.85), #67918E , #349481);	background: -webkit-radial-gradient(rgba(255, 255, 255, 0.85), #67918E , #349481);	filter: blur(10px);	-webkit-filter: blur(10px);	box-shadow: 6px -11px 10px #17243D inset;	position: absolute;	margin: 35px;	margin-left: 36px;	margin-top: 49px;	}	.blue-highlight-bottom{	position: absolute;	z-index: 99;	background: -webkit-radial-gradient(bottom center, #9CC5D3, #015DCC, #002466);	width: 101px;	height: 105px;	border-radius: 50%;	margin-left: 49px;	margin-top: 70px;	-webkit-filter: blur(8px);	}	.glare{	width: 153px;	height: 52px;	border-radius: 100%;	background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1));	position: absolute;	z-index: 99999;	left: -33px;	}	.glare:before {	content: "";	width: 5px;	height: 4px;	border-radius: 50%;	background: -webkit-radial-gradient(rgba(216, 192, 230, 1), rgba(216, 192, 230, 0));	background: radial-gradient(rgba(216, 192, 230, 1), rgba(216, 192, 230, 0));	position: absolute;	margin-top: 45px;	margin-left: 74px;	-webkit-filter: blur(1.5px);	}	.glare:after {	content: "";	border-radius: 50%;	background: -webkit-radial-gradient(rgba(216, 192, 230, 1), rgba(216, 192, 230, 0.5));	background: radial-gradient(rgba(216, 192, 230, 1), rgba(216, 192, 230, 0.5));	position: absolute;	margin-top: 34px;	margin-left: 68px;	width: 0px;	height: 0px;	border-left: 8px solid transparent;	border-right: 8px solid transparent;	-webkit-filter: blur(1.5px);	border-top: 8px solid rgba(193, 156, 214, 0.5);	}	.long-shadow{	top: 79px;	left: 27px;	border-radius: 50%;	background: radial-gradient(rgba(128, 92, 78, 1), rgba(128, 92, 78, 0.5));	position: absolute;	width: 0px;	height: 0px;	border-left: 73px solid transparent;	border-right: 71px solid transparent;	-webkit-filter: blur(15px);	border-top: 71px solid rgba(128, 92, 78, 0);	border-bottom: 89px solid rgba(75, 52, 43, 0.65);	z-index: -1;	}	.stripes{	display: inline-block;	list-style: none;	-webkit-margin-before: 0em;	-webkit-margin-after: 0em;	-webkit-padding-start: 0px;	margin-left: 28px;	width: 85px;	height: 130px;	float: left;	}	.stripes:before{	content:"Insta";	font-family: "Bevan";	text-shadow: 2px 3px 2px #3F3530;	text-align: center;	color: #f0eded;	position: absolute;	width: 90px;	box-shadow: 0px -3px 5px rgba(43, 37, 37, 0.86) inset;	background: linear-gradient(rgba(43, 37, 37, 0.61), rgba(45, 37, 37, 0.0));	margin-left: -3px;	margin-top: 112px;	line-height: 35px;	font-size: 1.45em;	letter-spacing: 0.5px;	height:35px;	border-radius: 30px;	z-index: 99999;	}	.stripes:after{	content: "";	position: absolute;	width: 90px;	background: -webkit-linear-gradient(-45deg, rgba(27, 23, 23, 1) 0%, rgba(103,85,74,1) 19%, rgba(153, 131, 104, 1) 50%, rgba(88, 77, 69, 1) 80%, rgba(73,57,56,1) 100%);	background: linear-gradient(-45deg, rgba(27, 23, 23, 1) 0%, rgba(103,85,74,1) 19%, rgba(153, 131, 104, 1) 50%, rgba(88, 77, 69, 1) 80%, rgba(73,57,56,1) 100%);	box-shadow: 0px -3px 6px rgba(37, 33, 31, 0.47);	margin-left: -3px;	margin-top: 112px;	height:35px;	border-radius: 30px;	z-index: 8;	display: inherit;	}	.stripe{	float: left;	display: inline-block;	width: 21.25px;	height: 130px;	background-blend-mode: multiply;	background-image: url(http://www.caseycallis.com/images/leather.png);	}	.red{	background-color: #f93552;	background-position-x: 50%;	box-shadow: 0px 12px 25px #893e4c inset;	}	.yellow{	background-color: #fbca3d;	background-position-y: 50%;	box-shadow: 0px 12px 25px #ac782b inset;	}	.green{	background-color: #6cca94;	background-position-x: 25%;	box-shadow: 0px 12px 25px #4b7453 inset;	}	.blue{	background-color: #418efc;	background-position-y: 25%;	box-shadow: 0px 12px 25px #2c5bd5 inset;	}	.view-finder{	margin-left: 4px;	margin-top: 3px;	width: 60px;	height: 60px;	border-radius: 15px;	background: radial-gradient(#369E98, #324B40, #0A0A0A);	background: -webkit-radial-gradient(#369E98, #324B40, #0A0A0A);	box-shadow: 15px 10px 25px rgba(10, 11, 16, 0.83) inset;	}	.view-finder:after{	content: "";	position: absolute;	width: 40px;	height: 30px;	-webkit-filter: blur(5px);	margin-top: 20px;	margin-left: 13px;	border-radius: 50%;	background: linear-gradient(rgba(98, 207, 178, 1), rgba(84, 161, 180, 0.92), rgba(58, 128, 96, 1));	}	.view-finder-inset{	float: right;	margin-right: 28px;	margin-top: 28px;	width: 68px;	height: 69px;	border-radius: 15px;	background: -webkit-linear-gradient(rgba(76, 49, 40, 0.7), rgba(84, 53, 38, 0.7), rgba(106, 67, 56, 0.7), rgba(141, 86, 40, 0.7), rgba(167, 110, 96, 0.69)), url(leather-brown.png);	background: linear-gradient(rgba(76, 49, 40, 0.7), rgba(84, 53, 38, 0.7), rgba(106, 67, 56, 0.7), rgba(141, 86, 40, 0.7), rgba(167, 110, 96, 0.69)), url(leather-brown.png);	}	.view-finder-lens{	width: 41px;	height: 41px;	border-radius: 50%;	background: -webkit-radial-gradient(#140D16, #262131, #252547);	border: 4px solid #0d1a28;	position: absolute;	margin-top: 10px;	margin-left: 10px;	z-index: 99999;	box-shadow: -3px -3px 4px #343769 inset;	}	.view-finder-lens:before{	width: 2px;	height: 2px;	border-radius: 50%;	content: "";	background: rgba(255, 202, 255, 1);	position: absolute;	top: 18px;	left: 16px;	-webkit-filter: blur(1px);	box-shadow: 4px 4px 4px #1F1B1D;	}	.view-finder-lens:after{	content: "";	border-radius: 50%;	background: radial-gradient(rgba(240, 215, 255, 1), rgba(239, 211, 255, 0.5));	position: absolute;	margin-top: 10px;	margin-left: 13px;	width: 0px;	height: 0px;	border-left: 4px solid transparent;	border-right: 4px solid transparent;	-webkit-filter: blur(1.5px);	border-top: 4px solid rgba(193, 156, 214, 0.5);	box-shadow: 4px 4px 4px #1F1B1D;	}	.view-finder-glare{	width: 59px;	height: 21px;	border-radius: 100%;	background: linear-gradient(to bottom right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15));	position: absolute;	z-index: 9999999;	margin-top: 16px;	box-shadow: 0px 3px 5px rgba(27, 28, 31, 0.4);	}	.view-finder-glare:before{	content: "";	width: 19px;	height: 19px;	border-radius: 40%;	background: radial-gradient(#85414E, #5D477E, #3d2f51);	position: absolute;	-webkit-filter: blur(4px);	right: 3px;	top: 6px;	opacity: 0.8;	}	.view-finder-glare:after{	content: "";	position: absolute;	width: 60px;	height: 60px;	border-radius: 15px;	box-shadow: 15px 10px 25px rgba(10, 11, 16, 0.47) inset;	top: -16px;	}	.view-finder-reflections{	position: absolute;	width: 40px;	height: 40px;	background: transparent;	border-radius: 50%;	overflow: hidden;	transform-origin: bottom center;	transform: rotatey(-20deg) rotatez(-1deg);	z-index: 999999;	-webkit-filter: blur(0.75px);	margin-left: 2px;	top: -3px;	}	.view-finder-reflection{	background: linear-gradient(rgba(255,255,255,0.35), rgba(255,255,255,0.95));	right: 0px;	height: 16px;	position: relative;	width: 6px;	top: 2px;	float: right;	transform-origin: center center;	transform: rotate(-126deg) skew(1deg);	}	.view-finder-reflection2{	height: 9px;	position: relative;	width: 8px;	float: right;	top: 0px;	transform-origin: center center;	transform: rotate(51deg);	perspective: 350px;	background: linear-gradient(rgba(255,255,255,0.25), rgba(255,255,255,0.35));	right: 0px;	}	p{	font-size: 12px;	color: black;	margin-top: 60px;	display: block;	text-align: center;	font-family: 'Bevan';	}
HTML/CSS Instagram Logo - Script Codes
HTML/CSS Instagram Logo - Script Codes
Home Page Home
Developer Casey Callis
Username caseycallis
Uploaded January 09, 2023
Rating 4.5
Size 4,441 Kb
Views 6,072
Do you need developer help for HTML/CSS Instagram Logo?

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!

Casey Callis (caseycallis) Script Codes
Name
SVG Logo Animation
Parallax Grid
Create amazing web content 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!