Flat Instagram Logo
How do I make an flat instagram logo?
Dribbble Rebound from Pavel Proshin http://dribbble.com/shots/1349552-Instagram-7-0All CSS good fun. What is a flat instagram logo? How do you make a flat instagram logo? This script and codes were developed by Tyler Fry on 16 July 2022, Saturday.
Flat Instagram Logo Previews
Flat Instagram Logo - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flat Instagram Logo</title> <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! */ * { box-sizing: border-box;
}
body { background: #fff;
}
.icon { margin: 50px auto 0; width: 200px; height: 200px; background: #e2ded4; border-radius: 45px; overflow: hidden; position: relative;
}
.icon:before { content: ''; width: 110px; height: 140px; background: #c8c1b0; position: absolute; bottom: -9px; right: 9px; transform: rotate(-45deg);
}
.icon .circle { border-radius: 50%; position: relative; z-index: 10;
}
.icon .circle.flash { background: #101318; width: 40px; height: 40px; float: right; margin: 15px;
}
.icon .circle.flash .flare { width: 24px; height: 24px; margin: 8px; border: 3px solid #182432;
}
.icon .circle.flash .spot { width: 14px; height: 14px; margin: 2px;
}
.icon .circle.flash .spot:before { content: ''; border-radius: 50%; width: 8px; height: 8px; background: #29486b; position: absolute; left: 3px; top: 1px;
}
.icon .circle.flash .spot:after { content: ''; border-radius: 50%; width: 2px; height: 2px; background: #29486b; position: absolute; left: 6px; bottom: 2px;
}
.icon .circle.lens { background: #e2ded4; width: 115px; height: 115px; margin: -20px auto 0;
}
.icon .circle.lens .flare { width: 99px; height: 99px; border: 10px solid #182432; position: relative; top: 8px; left: 8px;
}
.icon .circle.lens .spot { width: 54px; height: 54px; top: 12px; left: 12px;
}
.icon .circle.lens .spot:before { content: ''; border-radius: 50%; width: 29px; height: 29px; background: #29486b; position: absolute; left: 13px; top: 5px;
}
.icon .circle.lens .spot:after { content: ''; border-radius: 50%; width: 8px; height: 8px; background: #29486b; position: absolute; left: 24px; bottom: 8px;
}
.icon .circle .flare { border-radius: 50%; background: #1f3854;
}
.icon .circle .spot { background: #182432; border-radius: 50%; position: relative;
}
.icon .top { background: #8e6051; overflow: hidden; border-radius: 45px 45px 0 0; height: 65px; border-bottom: 2px solid #6e4a3e;
}
.icon .top .rainbow { margin-left: 15px;
}
.icon .top .rainbow .color { width: 8px; height: 65px; display: block; float: left;
}
.icon .top .rainbow .red { background-color: #f13e32;
}
.icon .top .rainbow .yellow { background-color: #ffd700;
}
.icon .top .rainbow .green { background-color: #60e37e;
}
.icon .top .rainbow .blue { background-color: #40bce4;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="icon"> <div class="top"> <div class="rainbow"> <span class="color red"></span> <span class="color yellow"></span> <span class="color green"></span> <span class="color blue"></span> </div> <div class="circle flash"> <div class="flare"> <div class="spot"></div> </div> </div> </div> <div class="circle lens"> <div class="flare"> <div class="spot"></div> </div> </div>
</div>
</body>
</html>
Flat Instagram Logo - Script Codes CSS Codes
* { box-sizing: border-box;
}
body { background: #fff;
}
.icon { margin: 50px auto 0; width: 200px; height: 200px; background: #e2ded4; border-radius: 45px; overflow: hidden; position: relative;
}
.icon:before { content: ''; width: 110px; height: 140px; background: #c8c1b0; position: absolute; bottom: -9px; right: 9px; transform: rotate(-45deg);
}
.icon .circle { border-radius: 50%; position: relative; z-index: 10;
}
.icon .circle.flash { background: #101318; width: 40px; height: 40px; float: right; margin: 15px;
}
.icon .circle.flash .flare { width: 24px; height: 24px; margin: 8px; border: 3px solid #182432;
}
.icon .circle.flash .spot { width: 14px; height: 14px; margin: 2px;
}
.icon .circle.flash .spot:before { content: ''; border-radius: 50%; width: 8px; height: 8px; background: #29486b; position: absolute; left: 3px; top: 1px;
}
.icon .circle.flash .spot:after { content: ''; border-radius: 50%; width: 2px; height: 2px; background: #29486b; position: absolute; left: 6px; bottom: 2px;
}
.icon .circle.lens { background: #e2ded4; width: 115px; height: 115px; margin: -20px auto 0;
}
.icon .circle.lens .flare { width: 99px; height: 99px; border: 10px solid #182432; position: relative; top: 8px; left: 8px;
}
.icon .circle.lens .spot { width: 54px; height: 54px; top: 12px; left: 12px;
}
.icon .circle.lens .spot:before { content: ''; border-radius: 50%; width: 29px; height: 29px; background: #29486b; position: absolute; left: 13px; top: 5px;
}
.icon .circle.lens .spot:after { content: ''; border-radius: 50%; width: 8px; height: 8px; background: #29486b; position: absolute; left: 24px; bottom: 8px;
}
.icon .circle .flare { border-radius: 50%; background: #1f3854;
}
.icon .circle .spot { background: #182432; border-radius: 50%; position: relative;
}
.icon .top { background: #8e6051; overflow: hidden; border-radius: 45px 45px 0 0; height: 65px; border-bottom: 2px solid #6e4a3e;
}
.icon .top .rainbow { margin-left: 15px;
}
.icon .top .rainbow .color { width: 8px; height: 65px; display: block; float: left;
}
.icon .top .rainbow .red { background-color: #f13e32;
}
.icon .top .rainbow .yellow { background-color: #ffd700;
}
.icon .top .rainbow .green { background-color: #60e37e;
}
.icon .top .rainbow .blue { background-color: #40bce4;
}
| Developer | Tyler Fry |
| Username | frytyler |
| Uploaded | July 16, 2022 |
| Rating | 4 |
| Size | 3,730 Kb |
| Views | 34,408 |
Do you need developer help for Flat 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!
Tyler Fry (frytyler) Script Codes
| Name | Size |
| Flat UI Kit - Dribbble Rebound | 7,038 Kb |
| Old School Mac - Pure CSS | 3,329 Kb |
| To Do Task Widget | 8,229 Kb |
| Mini Profile | 3,828 Kb |
| A Pen by Tyler Fry | 8,249 Kb |
| Responsive Viewer | 7,013 Kb |
| Login Form | 4,656 Kb |
| Check | 4,482 Kb |
| Volume | 2,370 Kb |
| HTML5 Video Player UI | 7,794 Kb |
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!
Similar Scripts & Codes
| Name | Username | Size |
| Filter inputs | Rowinf | 1,721 Kb |
| Practice using Wixel | Emnk | 3,057 Kb |
| Google Chrome Icon using Pure CSS in one DIV | Grssam | 3,627 Kb |
| Faces SVG animation | ScavengerFrontend | 2,957 Kb |
| Sinclair Research Computers | MattCowley | 3,068 Kb |
| Slide like Mailbox | Hmps | 3,758 Kb |
| Ionic - Wordpress REST API starter | Superpikar | 2,961 Kb |
| Client-side Email Validation | Collizo4sky | 1,538 Kb |
| A simple log in form made with css | Mayurelbhar | 2,160 Kb |
| Brown by pure CSS, no image, no javascript | Aaronchuo | 2,652 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!