Single Element Pure CSS US Flag

Developer
Size
1,875 Kb
Views
36,432

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 Previews

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;
}
Single Element Pure CSS US Flag - Script Codes
Single Element Pure CSS US Flag - Script Codes
Home Page Home
Developer Patrick Cox
Username pcridesagain
Uploaded September 04, 2022
Rating 3.5
Size 1,875 Kb
Views 36,432
Do you need developer help for Single Element Pure CSS US Flag?

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!

Patrick Cox (pcridesagain) Script Codes
Create amazing love letters 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!