Single Element Pure CSS US Flag
How do I make an single element pure css us flag?
One html element and a bunch of shadows.. What is a single element pure css us flag? How do you make a single element pure css us flag? This script and codes were developed by Patrick Cox on 04 September 2022, Sunday.
Single Element Pure CSS US Flag - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Single Element Pure CSS US Flag</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <b class="US_flag"></b>
</body>
</html>
Single Element Pure CSS US Flag - Script Codes CSS Codes
html { box-shadow: inset 0 0 200px rgba(0,0,0,0.5); min-height: 100%; background: #eae7e1; background: linear-gradient(to bottom, #eae7e1 0%,#d5dee5 92%);
}
.US_flag{ left: -250px; top: 10%; margin-left: 50%; position: absolute; display: block; width: 500px; height: 20px; background: #cc0000; box-shadow: 0 20px 0 #f3f3f3, 0 40px 0 #cc0000, 0 60px 0 #f3f3f3, 0 80px 0 #cc0000, 0 100px 0 #f3f3f3, 0 120px 0 #cc0000, 0 140px 0 #f3f3f3, 0 160px 0 #cc0000, 0 180px 0 #f3f3f3, 0 200px 0 #cc0000, 0 220px 0 #f3f3f3, 0 240px 0 #cc0000;
}
.US_flag:before{ content: "\0020"; background: #191b6d; display: block; width: 200px; height: 140px; position: absolute;
}
.US_flag:after{ content: "\2605"; font-size: 14px; color: #f3f3f3; text-style: none; display: block; width: 500px; position: absolute; margin: 5px; text-shadow: 35px 0 0 #f3f3f3, 70px 0 0 #f3f3f3, 105px 0 0 #f3f3f3, 140px 0 0 #f3f3f3, 175px 0 0 #f3f3f3, 17px 14px 0 #f3f3f3, 52px 14px 0 #f3f3f3, 87px 14px 0 #f3f3f3, 122px 14px 0 #f3f3f3, 157px 14px 0 #f3f3f3, 0 28px 0 #f3f3f3, 35px 28px 0 #f3f3f3, 70px 28px 0 #f3f3f3, 105px 28px 0 #f3f3f3, 140px 28px 0 #f3f3f3, 175px 28px 0 #f3f3f3, 17px 42px 0 #f3f3f3, 52px 42px 0 #f3f3f3, 87px 42px 0 #f3f3f3, 122px 42px 0 #f3f3f3, 157px 42px 0 #f3f3f3, 0 56px 0 #f3f3f3, 35px 56px 0 #f3f3f3, 70px 56px 0 #f3f3f3, 105px 56px 0 #f3f3f3, 140px 56px 0 #f3f3f3, 175px 56px 0 #f3f3f3, 17px 70px 0 #f3f3f3, 52px 70px 0 #f3f3f3, 87px 70px 0 #f3f3f3, 122px 70px 0 #f3f3f3, 157px 70px 0 #f3f3f3, 0 84px 0 #f3f3f3, 35px 84px 0 #f3f3f3, 70px 84px 0 #f3f3f3, 105px 84px 0 #f3f3f3, 140px 84px 0 #f3f3f3, 175px 84px 0 #f3f3f3, 17px 98px 0 #f3f3f3, 52px 98px 0 #f3f3f3, 87px 98px 0 #f3f3f3, 122px 98px 0 #f3f3f3, 157px 98px 0 #f3f3f3, 0 112px 0 #f3f3f3, 35px 112px 0 #f3f3f3, 70px 112px 0 #f3f3f3, 105px 112px 0 #f3f3f3, 140px 112px 0 #f3f3f3, 175px 112px 0 #f3f3f3;
}

Developer | Patrick Cox |
Username | pcridesagain |
Uploaded | September 04, 2022 |
Rating | 3.5 |
Size | 1,875 Kb |
Views | 36,414 |
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 |
Vans Logo, single element, no fonts, no psuedos | 3,162 Kb |
IOS web app bookmark reminder bubble | 2,576 Kb |
Responsive Content Experiment | 4,586 Kb |
A Pen by Patrick Cox | 2,899 Kb |
Sexy Version - iOS web app bookmark reminder bubble | 2,880 Kb |
A Pen by Patrick Cox | 3,176 Kb |
A Better Moustache | 3,139 Kb |
CSS Q-Bert | 4,926 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 |
A Pen by Shidhin | Shidhincr | 5,015 Kb |
Example SVGZ Data URI | Joeyhoer | 2,981 Kb |
Kudos Please | TimPietrusky | 6,624 Kb |
Blank Starter | Mhartington | 2,171 Kb |
HTML5 Breakout | Jaysalvat | 4,873 Kb |
Svg animation draw | SzymonDziewonski | 5,545 Kb |
PNotify Demo | Adittmar | 1,731 Kb |
Delete Hover | Chungman93 | 2,557 Kb |
Growing Root - Scroll control - CANVAS | Cjonasw | 2,342 Kb |
Blog Concept 2 | JGallardo | 2,994 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!