Chicago Flag in CSS
How do I make an chicago flag in css?
What is a chicago flag in css? How do you make a chicago flag in css? This script and codes were developed by Neil Renicker on 24 November 2022, Thursday.
Chicago Flag in CSS - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Chicago Flag in CSS</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- TODO: refactor to use fewer nodes maybe -->
<div> <div class="flag"> <div class="container"> <div class="stripe"></div> <div class="stars"> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> </div> <div class="stripe"></div> </div> </div> <p class="text">Chicago, USA</p>
</div>
</body>
</html>
Chicago Flag in CSS - Script Codes CSS Codes
body { background-color: gray; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 100vh; margin: 0;
}
.flag { background-color: #F0F0F0; width: 160px; width: 10rem; height: 104px; height: 6.5rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; box-shadow: 1px 1px 0 1px rgba(0,0,0,.2);
}
.container { width: 100%;
}
.stripe { background-color: #9FCAC9; height: 16px; height: 1rem; width: 100%;
}
.stars { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.star { background: -webkit-linear-gradient(126deg, #F0F0F0 4%, transparent 4%) 150% 120%, -webkit-linear-gradient(54deg, #F0F0F0 4%, transparent 4%) -50% 120%, -webkit-linear-gradient(162deg, red 8%, transparent 8%) 150% 120%, -webkit-linear-gradient(18deg, red 8%, transparent 8%) -50% 120%, -webkit-linear-gradient(234deg, red 7%, transparent 7%) 150% -40%, -webkit-linear-gradient(306deg, red 7%, transparent 7%) -50% -40%; background: -webkit-linear-gradient(126deg, #F0F0F0 4%, transparent 4%) 150% 120%, -webkit-linear-gradient(54deg, #F0F0F0 4%, transparent 4%) -50% 120%, -webkit-linear-gradient(162deg, red 8%, transparent 8%) 150% 120%, -webkit-linear-gradient(18deg, red 8%, transparent 8%) -50% 120%, -webkit-linear-gradient(234deg, red 7%, transparent 7%) 150% -40%, -webkit-linear-gradient(306deg, red 7%, transparent 7%) -50% -40%; background: linear-gradient(324deg, #F0F0F0 4%, transparent 4%) 150% 120%, linear-gradient(36deg, #F0F0F0 4%, transparent 4%) -50% 120%, linear-gradient(288deg, red 8%, transparent 8%) 150% 120%, linear-gradient(72deg, red 8%, transparent 8%) -50% 120%, linear-gradient(216deg, red 7%, transparent 7%) 150% -40%, linear-gradient(144deg, red 7%, transparent 7%) -50% -40%; background-size: 200%; background-repeat: no-repeat; height: 30px; width: 30px;
}
.text { font-size: 12px; font-family: monospace; color: rgba(255,255,255,.5); text-align: center; margin: 0; margin-top: 8px;
}
Developer | Neil Renicker |
Username | tinystride |
Uploaded | November 24, 2022 |
Rating | 3 |
Size | 2,513 Kb |
Views | 12,144 |
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 |
Subtle Radial Shadow Underline | 3,295 Kb |
Vmin Intrinsic Ratio | 1,723 Kb |
Magical inner shadows on a vertically scrolling element | 3,557 Kb |
Animations and pseudo-elements | 3,637 Kb |
Webgl | 2,503 Kb |
React Lifecycle Demo | 3,363 Kb |
A Pen by Neil Renicker | 1,689 Kb |
Max-width on header elements | 2,041 Kb |
World Map with Pulsing Dots | 69,659 Kb |
Pure CSS Loading Block | 2,236 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 |
Filter inputs | Rowinf | 1,721 Kb |
Filtre ile Arama Kutusu - Search Box with Filter | AyhanALTINOK | 3,448 Kb |
Pure CSS Menu | Bronsrobin | 3,321 Kb |
Loading... | Adamjacob | 2,384 Kb |
A Pen by Jay | Jaycode | 3,784 Kb |
Main page display | BarryKe | 4,562 Kb |
Background Images | Jooonebug | 2,100 Kb |
Fading Navigation Bar | J-w-v | 2,805 Kb |
Custom Checkbox and radio inputs SCSS | Rgfx | 3,367 Kb |
Bezier Animation with straight paths | Rhernando | 2,087 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!