The Singapore Flag using Pure CSS

Developer
042
Size
2,807 Kb
Views
6,072
  1. The Singapore Flag using Pure CSS Previews
  2. The Singapore Flag using Pure CSS HTML Codes
  3. The Singapore Flag using Pure CSS CSS Codes
  4. The Singapore Flag using Pure CSS JS Codes

How do I make an the singapore flag using pure css?

Created using no embedded images or javascript.. What is a the singapore flag using pure css? How do you make a the singapore flag using pure css? This script and codes were developed by 042 on 09 January 2023, Monday.

The Singapore Flag using Pure CSS Previews
IQ Test

The Singapore Flag using Pure CSS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>The Singapore Flag using Pure CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { background-color: #efefef; font-weight: 300; font-family: Arial, sans-serif; padding:15px;
}
#flag_sg { background-color: #fff; width: 500px; height: 333px;
}
#red_horizontal { background: #EF4135; height: 50%; width: 100%; position: relative;
}
#crescent { width: 125px; height: 125px; background: #fff; -webkit-border-radius: 62px; border-radius: 62px; position: absolute; left: 45px; top: 21px; z-index: 1;
}
#crescent_overlay { width: 125px; height: 125px; background: #EF4135; -webkit-border-radius: 62px; border-radius: 62px; position: absolute; left: 73px; top: 21px; z-index: 10;
}
.star { margin: 10px 0; position: absolute; display: block; color: #fff; width: 0px; height: 0px; border-right: 20px solid transparent; border-bottom: 14px solid #fff; border-left: 20px solid transparent; transform: rotate(35deg); z-index: 20;
}
.star:before { border-bottom: 16px solid #fff; border-left: 6px solid transparent; border-right: 6px solid transparent; position: absolute; height: 0; width: 0; top: -9px; left: -13px; display: block; content: ''; transform: rotate(-35deg);
}
.star:after { position: absolute; display: block; color: #fff; top: 0px; left: -21px; width: 0px; height: 0px; border-right: 20px solid transparent; border-bottom: 14px solid #fff; border-left: 20px solid transparent; transform: rotate(-70deg); content: '';
}
#star_12oc { left: 128px; top: 33px;
}
#star_3oc { left: 162px; top: 58px;
}
#star_5oc { left: 149px; top: 97px;
}
#star_7oc { left: 107px; top: 97px;
}
#star_9oc { left: 95px; top: 58px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1>The Singapore Flag using Pure CSS</h1>
<div id="flag_sg"> <div id="red_horizontal"> <div id="crescent"></div> <div id="crescent_overlay"></div> <div id="star_12oc" class="star"></div> <div id="star_3oc" class="star"></div> <div id="star_5oc" class="star"></div> <div id="star_7oc" class="star"></div> <div id="star_9oc" class="star"></div> </div>
</div>
<p> <small>Happy Birthday Singapore.</small>
</p> <script src="js/index.js"></script>
</body>
</html>

The Singapore Flag using Pure CSS - Script Codes CSS Codes

body { background-color: #efefef; font-weight: 300; font-family: Arial, sans-serif; padding:15px;
}
#flag_sg { background-color: #fff; width: 500px; height: 333px;
}
#red_horizontal { background: #EF4135; height: 50%; width: 100%; position: relative;
}
#crescent { width: 125px; height: 125px; background: #fff; -webkit-border-radius: 62px; border-radius: 62px; position: absolute; left: 45px; top: 21px; z-index: 1;
}
#crescent_overlay { width: 125px; height: 125px; background: #EF4135; -webkit-border-radius: 62px; border-radius: 62px; position: absolute; left: 73px; top: 21px; z-index: 10;
}
.star { margin: 10px 0; position: absolute; display: block; color: #fff; width: 0px; height: 0px; border-right: 20px solid transparent; border-bottom: 14px solid #fff; border-left: 20px solid transparent; transform: rotate(35deg); z-index: 20;
}
.star:before { border-bottom: 16px solid #fff; border-left: 6px solid transparent; border-right: 6px solid transparent; position: absolute; height: 0; width: 0; top: -9px; left: -13px; display: block; content: ''; transform: rotate(-35deg);
}
.star:after { position: absolute; display: block; color: #fff; top: 0px; left: -21px; width: 0px; height: 0px; border-right: 20px solid transparent; border-bottom: 14px solid #fff; border-left: 20px solid transparent; transform: rotate(-70deg); content: '';
}
#star_12oc { left: 128px; top: 33px;
}
#star_3oc { left: 162px; top: 58px;
}
#star_5oc { left: 149px; top: 97px;
}
#star_7oc { left: 107px; top: 97px;
}
#star_9oc { left: 95px; top: 58px;
}

The Singapore Flag using Pure CSS - Script Codes JS Codes

/*
This technique uses no images & zero javascript.
*/
The Singapore Flag using Pure CSS - Script Codes
The Singapore Flag using Pure CSS - Script Codes
Home Page Home
Developer 042
Username 042
Uploaded January 09, 2023
Rating 3
Size 2,807 Kb
Views 6,072
Do you need developer help for The Singapore Flag using Pure CSS?

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!

042 (042) Script Codes
Name
Custom HTML Nested List Counters
Fixed responsive layout
SR_02
JCycle2 with HammerJS
Vertical Sprite with Greensock TweenMax
Responsive Breakpoint Mixins
Animating characters with jQuery
Colored Numbers for Ordered List
Scrolling through cards with stepper
A Pen by 042
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!