Pirate pixel art css
How do I make an pirate pixel art css?
Pirate pixel art css. What is a pirate pixel art css? How do you make a pirate pixel art css? This script and codes were developed by Alex Konstantinov on 08 September 2022, Thursday.
Pirate pixel art css - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pirate pixel art css</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="box-shadow"></div>
</body>
</html>
Pirate pixel art css - Script Codes CSS Codes
html { width: 100%; height: 100%; background-image: -webkit-radial-gradient(ellipse farthest-corner at center top, #9ab1c7 0%, #1a242f 100%); background-image: radial-gradient(ellipse farthest-corner at center top, #9ab1c7 0%, #1a242f 100%);
}
.box-shadow{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; overflow: auto; width: 10px; height: 10px; background: #202020; box-shadow: 10px 10px #ffffff, -10px 0px #ffffff, 10px 0px #ffffff, 0px 10px #ffffff, 0px -10px #ffffff, 10px -10px #ffffff, -10px 10px #ffffff, -10px -10px #ffffff, 20px 10px #ffffff, 20px 0px #ffffff, 30px 0px #ffffff, -20px 10px #ffffff, -20px 0px #ffffff, -30px 0px #ffffff, -10px 20px #ffffff, 10px 20px #ffffff, -20px -10px #222222, -20px -20px #222222, -30px -20px #222222, -30px -10px #bb3c1a, 30px -10px #222222, 20px -20px #222222, 30px -20px #222222, 20px -10px #bb3c1a, 40px -20px #d7d1d1, 10px -20px #d7d1d1, -10px -20px #d7d1d1, 0px -20px #d7d1d1, -40px 0px #d7d1d1, -40px -10px #d7d1d1, -30px 10px #d7d1d1, -20px 20px #d7d1d1, 40px 0px #d7d1d1, 40px -10px #d7d1d1, 30px 10px #d7d1d1, 20px 20px #d7d1d1, 0px 20px #d7d1d1, -40px -30px #b9b0b0, -30px -30px #b9b0b0, -20px -30px #b9b0b0, -10px -30px #b9b0b0, 0px -30px #b9b0b0, 10px -30px #b9b0b0, 20px -30px #b9b0b0, 30px -30px #b9b0b0, 40px -30px #b9b0b0, -40px -20px #b9b0b0, -50px -10px #b9b0b0, -50px 0px #b9b0b0, -40px 10px #b9b0b0, 50px -10px #b9b0b0, 50px 0px #b9b0b0, 40px 10px #b9b0b0, -20px 40px #ffffff, 0px 40px #ffffff, 20px 40px #ffffff, -40px -40px #182d3c, -40px -50px #182d3c, -30px -40px #4e6271, -30px -50px #4e6271, -20px -40px #304757, -20px -50px #304757, -10px -40px #4e6271, -10px -50px #4e6271, 0px -40px #304757, 0px -50px #304757, 10px -40px #4e6271, 10px -50px #4e6271, 40px -40px #182d3c, 40px -50px #182d3c, 30px -40px #4e6271, 30px -50px #4e6271, 20px -40px #304757, 20px -50px #304757, 50px -40px #304757, 60px -50px #304757, 60px -30px #304757, -30px -60px #364b5a, -20px -60px #1d3546, -10px -60px #4e6271, 0px -60px #1d3546, 10px -60px #4e6271, 20px -60px #1d3546, 30px -60px #364b5a, -20px -70px #182d3c, -10px -70px #364a59, 0px -70px #182d3c, 10px -70px #364a59, 20px -70px #182d3c; -webkit-animation: animate 1s linear infinite; animation: animate 1s linear infinite; }
@-webkit-keyframes animate {
0% { box-shadow: 10px 10px #ffffff, -10px 0px #ffffff, 10px 0px #ffffff, 0px 10px #ffffff, 0px -10px #ffffff, 10px -10px #ffffff, -10px 10px #ffffff, -10px -10px #ffffff, 20px 10px #ffffff, 20px 0px #ffffff, 30px 0px #ffffff, -20px 10px #ffffff, -20px 0px #ffffff, -30px 0px #ffffff, -10px 20px #ffffff, 10px 20px #ffffff, -20px -10px #222222, -20px -20px #222222, -30px -20px #222222, -30px -10px #bb3c1a, 30px -10px #222222, 20px -20px #222222, 30px -20px #222222, 20px -10px #bb3c1a, 40px -20px #d7d1d1, 10px -20px #d7d1d1, -10px -20px #d7d1d1, 0px -20px #d7d1d1, -40px 0px #d7d1d1, -40px -10px #d7d1d1, -30px 10px #d7d1d1, -20px 20px #d7d1d1, 40px 0px #d7d1d1, 40px -10px #d7d1d1, 30px 10px #d7d1d1, 20px 20px #d7d1d1, 0px 20px #d7d1d1, -40px -30px #b9b0b0, -30px -30px #b9b0b0, -20px -30px #b9b0b0, -10px -30px #b9b0b0, 0px -30px #b9b0b0, 10px -30px #b9b0b0, 20px -30px #b9b0b0, 30px -30px #b9b0b0, 40px -30px #b9b0b0, -40px -20px #b9b0b0, -50px -10px #b9b0b0, -50px 0px #b9b0b0, -40px 10px #b9b0b0, 50px -10px #b9b0b0, 50px 0px #b9b0b0, 40px 10px #b9b0b0, -20px 40px #ffffff, 0px 40px #ffffff, 20px 40px #ffffff, -40px -40px #182d3c, -40px -50px #182d3c, -30px -40px #4e6271, -30px -50px #4e6271, -20px -40px #304757, -20px -50px #304757, -10px -40px #4e6271, -10px -50px #4e6271, 0px -40px #304757, 0px -50px #304757, 10px -40px #4e6271, 10px -50px #4e6271, 40px -40px #182d3c, 40px -50px #182d3c, 30px -40px #4e6271, 30px -50px #4e6271, 20px -40px #304757, 20px -50px #304757, 50px -40px #304757, 60px -50px #304757, 60px -30px #304757, -30px -60px #364b5a, -20px -60px #1d3546, -10px -60px #4e6271, 0px -60px #1d3546, 10px -60px #4e6271, 20px -60px #1d3546, 30px -60px #364b5a, -20px -70px #182d3c, -10px -70px #364a59, 0px -70px #182d3c, 10px -70px #364a59, 20px -70px #182d3c; }
50% { box-shadow: 10px 10px #ffffff, -10px 0px #ffffff, 10px 0px #ffffff, 0px 10px #ffffff, 0px -10px #ffffff, 10px -10px #ffffff, -10px 10px #ffffff, -10px -10px #ffffff, 20px 10px #ffffff, 20px 0px #ffffff, 30px 0px #ffffff, -20px 10px #ffffff, -20px 0px #ffffff, -30px 0px #ffffff, -10px 20px #ffffff, 10px 20px #ffffff, -20px -10px #222222, -20px -20px #222222, -30px -20px #222222, -30px -10px #ed4e23, 30px -10px #222222, 20px -20px #222222, 30px -20px #222222, 20px -10px #ed4e23, 40px -20px #d7d1d1, 10px -20px #d7d1d1, -10px -20px #d7d1d1, 0px -20px #d7d1d1, -40px 0px #d7d1d1, -40px -10px #d7d1d1, -30px 10px #d7d1d1, -20px 20px #d7d1d1, 40px 0px #d7d1d1, 40px -10px #d7d1d1, 30px 10px #d7d1d1, 20px 20px #d7d1d1, 0px 20px #d7d1d1, -40px -30px #b9b0b0, -30px -30px #b9b0b0, -20px -30px #b9b0b0, -10px -30px #b9b0b0, 0px -30px #b9b0b0, 10px -30px #b9b0b0, 20px -30px #b9b0b0, 30px -30px #b9b0b0, 40px -30px #b9b0b0, -40px -20px #b9b0b0, -50px -10px #b9b0b0, -50px 0px #b9b0b0, -40px 10px #b9b0b0, 50px -10px #b9b0b0, 50px 0px #b9b0b0, 40px 10px #b9b0b0, -20px 40px #ffffff, 0px 40px #ffffff, 20px 40px #ffffff, -40px -40px #182d3c, -40px -50px #182d3c, -30px -40px #4e6271, -30px -50px #4e6271, -20px -40px #304757, -20px -50px #304757, -10px -40px #4e6271, -10px -50px #4e6271, 0px -40px #304757, 0px -50px #304757, 10px -40px #4e6271, 10px -50px #4e6271, 40px -40px #182d3c, 40px -50px #182d3c, 30px -40px #4e6271, 30px -50px #4e6271, 20px -40px #304757, 20px -50px #304757, 50px -40px #304757, 60px -40px #304757, 60px -40px #304757, -30px -60px #364b5a, -20px -60px #1d3546, -10px -60px #4e6271, 0px -60px #1d3546, 10px -60px #4e6271, 20px -60px #1d3546, 30px -60px #364b5a, -20px -70px #182d3c, -10px -70px #364a59, 0px -70px #182d3c, 10px -70px #364a59, 20px -70px #182d3c; }
100% { box-shadow: 10px 10px #ffffff, -10px 0px #ffffff, 10px 0px #ffffff, 0px 10px #ffffff, 0px -10px #ffffff, 10px -10px #ffffff, -10px 10px #ffffff, -10px -10px #ffffff, 20px 10px #ffffff, 20px 0px #ffffff, 30px 0px #ffffff, -20px 10px #ffffff, -20px 0px #ffffff, -30px 0px #ffffff, -10px 20px #ffffff, 10px 20px #ffffff, -20px -10px #222222, -20px -20px #222222, -30px -20px #222222, -30px -10px #bb3c1a, 30px -10px #222222, 20px -20px #222222, 30px -20px #222222, 20px -10px #bb3c1a, 40px -20px #d7d1d1, 10px -20px #d7d1d1, -10px -20px #d7d1d1, 0px -20px #d7d1d1, -40px 0px #d7d1d1, -40px -10px #d7d1d1, -30px 10px #d7d1d1, -20px 20px #d7d1d1, 40px 0px #d7d1d1, 40px -10px #d7d1d1, 30px 10px #d7d1d1, 20px 20px #d7d1d1, 0px 20px #d7d1d1, -40px -30px #b9b0b0, -30px -30px #b9b0b0, -20px -30px #b9b0b0, -10px -30px #b9b0b0, 0px -30px #b9b0b0, 10px -30px #b9b0b0, 20px -30px #b9b0b0, 30px -30px #b9b0b0, 40px -30px #b9b0b0, -40px -20px #b9b0b0, -50px -10px #b9b0b0, -50px 0px #b9b0b0, -40px 10px #b9b0b0, 50px -10px #b9b0b0, 50px 0px #b9b0b0, 40px 10px #b9b0b0, -20px 40px #ffffff, 0px 40px #ffffff, 20px 40px #ffffff, -40px -40px #182d3c, -40px -50px #182d3c, -30px -40px #4e6271, -30px -50px #4e6271, -20px -40px #304757, -20px -50px #304757, -10px -40px #4e6271, -10px -50px #4e6271, 0px -40px #304757, 0px -50px #304757, 10px -40px #4e6271, 10px -50px #4e6271, 40px -40px #182d3c, 40px -50px #182d3c, 30px -40px #4e6271, 30px -50px #4e6271, 20px -40px #304757, 20px -50px #304757, 50px -40px #304757, 60px -50px #304757, 60px -30px #304757, -30px -60px #364b5a, -20px -60px #1d3546, -10px -60px #4e6271, 0px -60px #1d3546, 10px -60px #4e6271, 20px -60px #1d3546, 30px -60px #364b5a, -20px -70px #182d3c, -10px -70px #364a59, 0px -70px #182d3c, 10px -70px #364a59, 20px -70px #182d3c; }
}
Developer | Alex Konstantinov |
Username | oxla |
Uploaded | September 08, 2022 |
Rating | 4 |
Size | 2,025 Kb |
Views | 32,384 |
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 |
Step bar with description | 3,749 Kb |
Size window | 1,876 Kb |
Cube Rotating Around | 1,984 Kb |
Web Launch Checklist | 14,329 Kb |
Svg animate | 1,945 Kb |
A Pen by Alex Konstantinov | 3,181 Kb |
Loader spiner | 1,983 Kb |
Combined font-size and line-height lock, using pixel-based Media Queries | 2,815 Kb |
Loader wave | 10,194 Kb |
Flex center | 1,696 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 |
Right Click Menu | Anodpixels | 2,252 Kb |
Pericles mi loro... | Judag | 4,125 Kb |
Halo 5 REQ Guide Bookmarklet | Cwacht | 3,993 Kb |
Price | Catcode | 2,623 Kb |
Z-index demo | Kblh | 1,534 Kb |
STIKHOI | Denmch | 7,122 Kb |
Konami Code Easter Egg | Teolitto | 3,051 Kb |
Click Based Rotation Demo | Zeaklous | 2,086 Kb |
Personal Logo Animation | Lloydwheeler | 3,795 Kb |
JavaScript Animation | Rcmeisty | 4,581 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!