Long Shadow Camera Icon
How do I make an long shadow camera icon?
Camera icon with long shadows.. What is a long shadow camera icon? How do you make a long shadow camera icon? This script and codes were developed by Miro Karilahti on 07 July 2022, Thursday.
Long Shadow Camera Icon - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Long Shadow Camera Icon</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="icon"> <div id="lens"> <div id="dot"></div> </div>
</div>
</body>
</html>
Long Shadow Camera Icon - Script Codes CSS Codes
*{margin:0;padding:0;}
body{ background:#356;
}
#icon{ width:256px; height:256px; background:#e0e0e0; position:absolute; top:50%;left:50%; margin:-128px 0 0 -128px; border-radius:40px; box-shadow: 0 1px #aaa, 0 2px #aaa, 0 3px #aaa, 0 4px #aaa, 0 5px #aaa, 0 6px #aaa, 0 7px #aaa, 0 8px #aaa, 0 9px #aaa, 0 10px #aaa;
}
#lens{ width:60%; height:60%; background:#628; position:absolute; margin:20%; border-radius:50%; box-shadow: /*Black border*/ 0 0 0 15px #222 inset, /*Inside shadow*/ 0 10px 0 10px #406 inset, /*Darker violet circle*/ 0 0 0 30px #517 inset, /*Outside shadow*/ 0 1px 0 #aaa, 0 2px 0 #aaa, 0 3px 0 #aaa, 0 4px 0 #aaa, 0 5px 0 #aaa, 0 6px 0 #aaa, 0 7px 0 #aaa, 0 8px 0 #aaa, 0 9px 0 #aaa, 0 10px 0 #aaa;
}
#dot{ width:15%; height:15%; background:rgba(255,255,255,.5); position:absolute; margin:22%; border-radius:50%;
}
Developer | Miro Karilahti |
Username | miroot |
Uploaded | July 07, 2022 |
Rating | 3 |
Size | 1,825 Kb |
Views | 40,480 |
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 |
Calendar | 2,033 Kb |
Color changing text | 2,068 Kb |
Navigation | 2,298 Kb |
Login Form | 2,519 Kb |
Button with sliding information | 2,387 Kb |
Pure CSS Gallery | 3,817 Kb |
Flat sidebar | 2,664 Kb |
Social Icons | 2,941 Kb |
Pure CSS Card Deck | 3,245 Kb |
Simple personal profile | 2,856 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 |
Polygon Dodecahedron in CSS | Vennsoh | 7,606 Kb |
Underlined form fields | Mitchdot | 2,323 Kb |
Jstam.com Home Page | Jstam | 10,558 Kb |
Starting out with Ember.JS | Cfleschhut | 4,808 Kb |
Twitch | SarahDunlap | 2,937 Kb |
After America | Jonathangarner | 2,686 Kb |
HTML5 Video Autoplay | Zivcos | 1,352 Kb |
Swiftype Lower Third | Zumwalt | 4,796 Kb |
Personal Website Redesign v2.0 | DevItWithDavid | 5,168 Kb |
Base-Style | Daniel_gooss | 2,614 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!