Spider-man with Box-shadow CSS
How do I make an spider-man with box-shadow css?
What is a spider-man with box-shadow css? How do you make a spider-man with box-shadow css? This script and codes were developed by Emerson Thompson on 11 August 2022, Thursday.
Spider-man with Box-shadow CSS - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Spider-man with Box-shadow CSS</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<main class="main"> <div class="spider-shadow"></div>
</main>
</body>
</html>
Spider-man with Box-shadow CSS - Script Codes CSS Codes
.main { position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 100%;
}
.main .spider-shadow { display: block; width: 15px; height: 15px; margin: 30px 0 0 -15px; box-shadow: 15px 0px #DDDDDD, 15px -15px #DDDDDD, 15px -30px #DDDDDD, 15px -45px #DDDDDD, 15px -60px #DDDDDD, 15px -75px #DDDDDD, 0 15px #000000, 15px 15px #DDDDDD, 30px 15px #000000, -15px 30px #000000, 0px 30px #F04D39, 15px 30px #DDDDDD, 30px 30px #F04D39, 45px 30px #000000, 60px 45px #000000, 75px 60px #000000, 90px 75px #000000, 105px 75px #000000, -30px 45px #000000, -45px 60px #000000, -60px 75px #000000, -75px 75px #000000, -15px 45px #F04D39, 0px 45px #F04D39, 15px 45px #DDDDDD, 30px 45px #F04D39, 45px 45px #F04D39, -30px 60px #F04D39, -15px 60px #F04D39, 0 60px #F04D39, 15px 60px #DDDDDD, 30px 60px #F04D39, 45px 60px #F04D39, 60px 60px #F04D39, -45px 75px #F04D39, -30px 75px #F04D39, -15px 75px #F04D39, 0px 75px #F04D39, 15px 75px #DDDDDD, 30px 75px #F04D39, 45px 75px #F04D39, 60px 75px #F04D39, 75px 75px #F04D39, 120px 90px #000000, 105px 90px #2388C8, 90px 90px #F04D39, 75px 90px #F04D39, 60px 90px #F04D39, 45px 90px #000000, 30px 90px #000000, 15px 90px #DDDDDD, 0px 90px #000000, -15px 90px #000000, -30px 90px #F04D39, -45px 90px #F04D39, -60px 90px #F04D39, -75px 90px #2388C8, -90px 90px #000000, -105px 105px #000000, 135px 105px #000000, -90px 105px #2388C8, -75px 105px #2388C8, -60px 105px #2388C8, -45px 105px #F04D39, -30px 105px #000000, -15px 105px #2388C8, 0 105px #DDDDDD, 15px 105px #DDDDDD, 30px 105px #2388C8, 45px 105px #2388C8, 60px 105px #000000, 75px 105px #F04D39, 90px 105px #2388C8, 105px 105px #2388C8, 120px 105px #2388C8, 150px 120px #000000, -120px 120px #000000, 15px 120px #DDDDDD, 0 120px #DDDDDD, 30px 120px #DDDDDD, -105px 120px #2388C8, -90px 120px #2388C8, -75px 120px #2388C8, -60px 120px #2388C8, -45px 120px #000000, -30px 120px #000000, -15px 120px #000000, 45px 120px #000000, 60px 120px #000000, 75px 120px #000000, 90px 120px #2388C8, 105px 120px #2388C8, 120px 120px #2388C8, 135px 120px #2388C8, 150px 135px #000000, -120px 135px #000000, -105px 135px #2388C8, -90px 135px #2388C8, -75px 135px #2388C8, -60px 135px #000000, -45px 135px #F04D39, -30px 135px #F04D39, -15px 135px #F04D39, 0 135px #000000, 15px 135px #DDDDDD, 30px 135px #000000, 45px 135px #F04D39, 60px 135px #F04D39, 75px 135px #F04D39, 90px 135px #000000, 105px 135px #2388C8, 120px 135px #2388C8, 135px 135px #2388C8, 135px 150px #000000, 120px 150px #000000, 105px 150px #000000, 90px 150px #F04D39, 75px 150px #F04D39, 60px 150px #F04D39, 45px 150px #F04D39, 30px 150px #000000, 15px 150px #F04D39, 0 150px #000000, -15px 150px #F04D39, -30px 150px #F04D39, -45px 150px #F04D39, -60px 150px #F04D39, -75px 150px #000000, -90px 150px #000000, -105px 150px #000000, -75px 165px #000000, -60px 165px #F04D39, -45px 165px #F04D39, -30px 165px #2388C8, -15px 165px #000000, 0 165px #F04D39, 15px 165px #F04D39, 30px 165px #F04D39, 45px 165px #000000, 60px 165px #2388C8, 75px 165px #F04D39, 90px 165px #F04D39, 105px 165px #000000, 120px 180px #000000, 105px 180px #F04D39, 90px 180px #F04D39, 75px 180px #2388C8, 60px 180px #000000, 45px 180px #2388C8, 30px 180px #F04D39, 15px 180px #F04D39, 0 180px #F04D39, -15px 180px #F04D39, -30px 180px #000000, -45px 180px #2388C8, -60px 180px #F04D39, -75px 180px #F04D39, -90px 180px #000000, -90px 195px #000000, -75px 195px #F04D39, -60px 195px #F04D39, -45px 195px #000000, -30px 195px #2388C8, -15px 195px #F04D39, 0 195px #F04D39, 15px 195px #F04D39, 30px 195px #F04D39, 45px 195px #F04D39, 60px 195px #2388C8, 75px 195px #000000, 90px 195px #F04D39, 105px 195px #F04D39, 120px 195px #000000, 105px 210px #000000, 90px 210px #F04D39, 75px 210px #F04D39, 60px 210px #F04D39, 45px 210px #F04D39, 30px 210px #F04D39, 15px 210px #F04D39, 0 210px #F04D39, -15px 210px #F04D39, -30px 210px #F04D39, -45px 210px #F04D39, -60px 210px #F04D39, -75px 210px #000000, -60px 225px #000000, -45px 225px #000000, -30px 225px #F04D39, -15px 225px #F04D39, 0 225px #000000, 15px 225px #000000, 30px 225px #000000, 45px 225px #F04D39, 60px 225px #F04D39, 75px 225px #000000, 90px 225px #000000, 60px 240px #000000, 45px 240px #000000, 30px 240px #F04D39, 15px 240px #F04D39, 0 240px #F04D39, -15px 240px #000000, -30px 240px #000000, -45px 255px #000000, -30px 255px #F04D39, -15px 255px #F04D39, 0 255px #F04D39, 15px 255px #F04D39, 30px 255px #F04D39, 45px 255px #F04D39, 60px 255px #F04D39, 75px 255px #000000, 90px 270px #000000, 75px 270px #F04D39, 60px 270px #F04D39, 45px 270px #F04D39, 30px 270px #F04D39, 15px 270px #F04D39, 0 270px #F04D39, -15px 270px #F04D39, -30px 270px #F04D39, -45px 270px #F04D39, -60px 270px #000000, -75px 285px #000000, -60px 285px #F04D39, -45px 285px #F04D39, -30px 285px #F04D39, -15px 285px #F04D39, 0 285px #F04D39, 15px 285px #F04D39, 30px 285px #F04D39, 45px 285px #F04D39, 60px 285px #F04D39, 75px 285px #F04D39, 90px 285px #F04D39, 105px 285px #000000, 105px 300px #000000, 90px 300px #F04D39, 75px 300px #F04D39, 60px 300px #000000, 45px 300px #000000, 30px 300px #F04D39, 15px 300px #F04D39, 0 300px #F04D39, -15px 300px #000000, -30px 300px #000000, -45px 300px #F04D39, -60px 300px #F04D39, -75px 300px #000000, -75px 315px #000000, -60px 315px #F04D39, -45px 315px #000000, -30px 315px #DDDDDD, -15px 315px #DDDDDD, 0 315px #000000, 15px 315px #F04D39, 30px 315px #000000, 45px 315px #DDDDDD, 60px 315px #DDDDDD, 75px 315px #000000, 90px 315px #F04D39, 105px 315px #000000, 105px 330px #000000, 90px 330px #F04D39, 75px 330px #000000, 60px 330px #DDDDDD, 45px 330px #000000, 30px 330px #F04D39, 15px 330px #F04D39, 0 330px #F04D39, -15px 330px #000000, -30px 330px #DDDDDD, -45px 330px #000000, -60px 330px #F04D39, -75px 330px #000000, -75px 345px #000000, -60px 345px #F04D39, -45px 345px #000000, -30px 345px #000000, -15px 345px #F04D39, 0 345px #F04D39, 15px 345px #F04D39, 30px 345px #F04D39, 45px 345px #F04D39, 60px 345px #000000, 75px 345px #000000, 90px 345px #F04D39, 105px 345px #000000, 105px 360px #000000, 90px 360px #F04D39, 75px 360px #000000, 60px 360px #F04D39, 45px 360px #F04D39, 30px 360px #F04D39, 15px 360px #F04D39, 0 360px #F04D39, -15px 360px #F04D39, -30px 360px #F04D39, -45px 360px #000000, -60px 360px #F04D39, -75px 360px #000000, -75px 375px #000000, -60px 375px #F04D39, -45px 375px #F04D39, -30px 375px #F04D39, -15px 375px #F04D39, 0 375px #F04D39, 15px 375px #F04D39, 30px 375px #F04D39, 45px 375px #F04D39, 60px 375px #F04D39, 75px 375px #F04D39, 90px 375px #F04D39, 105px 375px #000000, -75px 390px #000000, -60px 390px #F04D39, -45px 390px #F04D39, -30px 390px #F04D39, -15px 390px #F04D39, 0 390px #F04D39, 15px 390px #F04D39, 30px 390px #F04D39, 45px 390px #F04D39, 60px 390px #F04D39, 75px 390px #F04D39, 90px 390px #F04D39, 105px 390px #000000, -75px 405px #000000, -60px 405px #F04D39, -45px 405px #F04D39, -30px 405px #F04D39, -15px 405px #F04D39, 0 405px #F04D39, 15px 405px #F04D39, 30px 405px #F04D39, 45px 405px #F04D39, 60px 405px #F04D39, 75px 405px #F04D39, 90px 405px #F04D39, 105px 405px #000000, 90px 420px #000000, 75px 420px #F04D39, 60px 420px #F04D39, 45px 420px #F04D39, 30px 420px #F04D39, 15px 420px #F04D39, 0 420px #F04D39, -15px 420px #F04D39, -30px 420px #F04D39, -45px 420px #F04D39, -60px 420px #000000, -45px 435px #000000, -30px 435px #000000, -15px 435px #F04D39, 0 435px #F04D39, 15px 435px #F04D39, 30px 435px #F04D39, 45px 435px #F04D39, 60px 435px #000000, 75px 435px #000000, 45px 450px #000000, 30px 450px #000000, 15px 450px #000000, 0 450px #000000, -15px 450px #000000; -webkit-animation: anima 5s infinite; animation: anima 5s infinite;
}
@-webkit-keyframes anima { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(45px); transform: translateY(45px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes anima { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(45px); transform: translateY(45px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); }
}
Developer | Emerson Thompson |
Username | thompsonemerson |
Uploaded | August 11, 2022 |
Rating | 4 |
Size | 4,228 Kb |
Views | 38,456 |
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 |
Hello World - ReactJS | 2,686 Kb |
Ripple Button - Material Design | 3,182 Kb |
Brazil Map SVG | 21,910 Kb |
UI Elements - Flat Design | 3,994 Kb |
Feed RSS com AngularJS | 3,284 Kb |
CardMove | 3,699 Kb |
Smooth Scrolling - Vanilla | 2,857 Kb |
Render List with React | 4,135 Kb |
Reactions Facebook | 2,812 Kb |
Logo Hover Animate CSS3 | 1,517 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 |
Image Hover | Johnheiner | 3,409 Kb |
Octopus Bar iPad App Interactions | Davidkpiano | 6,735 Kb |
React TODO | Enieste | 3,320 Kb |
Multi column experiment. | Spylefkaditis | 2,805 Kb |
Tooltip in table | Roine | 3,713 Kb |
A Pen by Shidhin | Shidhincr | 5,015 Kb |
Snow collision | Wojtek1150 | 3,542 Kb |
Animate elements with fixed gradient | Badabam | 4,406 Kb |
A Pen by Dalton Liu | Liudalton | 12,437 Kb |
A Pen by Malith Hettiarachchi | MalZiiirA | 5,531 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!