It was an inspiring sight, seeing that ocean of determined Hongkongers, inflamed with patriotism, marching peacefully towards the Government district. Here in Singapore, opinion is divided on this one. Some think we could learn a thing or two from Hong Kong, fuck China and their autocratic bullshit. Some think the protesters are a bunch of feckless youths who have too little to do. I've got my doubts on this. Yeah, all two million or so of protesters decided one day that they had nothing better to do than take long crowded marches under the hot sun and brave tear gas, rubber bullets and beanbag rounds from the riot police? Seems legit.
Anyway, as to who I think is in the right here, I'm gonna need to be sparing with my opinion because Mrs TeochewThunder is from China and I really don't want to sleep on the couch any more than necessary.
Suffice to say, one of the things that really interests me about the Anti-extradition Protests, is the art. Or the lack thereof. During the 2014 Umbrella Movement, there was no shortage of creative imagery utilizing the symbol of yellow umbrellas. What about 2019? Very little. Perhaps it's true, the Hongkongers are really going dark with their Social Media accounts. Still, I managed to find this beauty.
It's a stylized petal of the Bauhinia blakeana flower which makes up the symbol on Hong Kong's flag. Within that petal, instead of a star, we have a chain and handcuff! Very creative.
But you know what else I was thinking when I saw this? I was thinking, shit, I have got to CSS this sucker. And that's why we're here today.
Let's get some HTML up!
<!DOCTYPE html>
<html>
<head>
<title>HK Anti-extradition Bill Symbol</title>
<style>
</style>
</head>
<body>
</body>
</html>
<html>
<head>
<title>HK Anti-extradition Bill Symbol</title>
<style>
</style>
</head>
<body>
</body>
</html>
We'll give all divs a blue border temporarily, for visibility. And start off with a div with the id symbol_container.
<!DOCTYPE html>
<html>
<head>
<title>HK Anti-extradition Bill Symbol</title>
<style>
div {outline: 0px solid #0000FF;}
</style>
</head>
<body>
<div id="symbol_container">
</div>
</body>
</html>
<html>
<head>
<title>HK Anti-extradition Bill Symbol</title>
<style>
div {outline: 0px solid #0000FF;}
</style>
</head>
<body>
<div id="symbol_container">
</div>
</body>
</html>
Here's some styling for it. We make it a deep red square, and place it in the middle of the screen using the margin property. The overflow property is set to hidden because stuff might get out of this box.
<style>
div {outline: 1px solid #0000FF;}
#symbol_container
{
width: 600px;
height: 600px;
margin: 5% auto 0 auto;
background-color: #AA0000;
overflow: hidden;
}
</style>
div {outline: 1px solid #0000FF;}
#symbol_container
{
width: 600px;
height: 600px;
margin: 5% auto 0 auto;
background-color: #AA0000;
overflow: hidden;
}
</style>
Off to a good start!
The next thing we need to do is create the main shape of the white flower petal. To do that, we should first define a container for it. This is a div with a class of petalbody.
<div id="symbol_container">
<div class="petalbody">
</div>
</div>
<div class="petalbody">
</div>
</div>
Here's the styling for it. It's 400 by 400 pixels and set vertically center of symbol_container, but flush right.
#symbol_container
{
width: 600px;
height: 600px;
margin: 5% auto 0 auto;
background-color: #AA0000;
overflow: hidden;
}
.petalbody
{
width: 400px;
height: 400px;
margin: 100px 0 0 auto;
}
{
width: 600px;
height: 600px;
margin: 5% auto 0 auto;
background-color: #AA0000;
overflow: hidden;
}
.petalbody
{
width: 400px;
height: 400px;
margin: 100px 0 0 auto;
}
We need another two divs inside this one. Style them with petalbody_left and petalbody_right.
<div id="symbol_container">
<div class="petalbody">
<div class="petalbody_left">
</div>
<div class="petalbody_right">
</div>
</div>
</div>
<div class="petalbody">
<div class="petalbody_left">
</div>
<div class="petalbody_right">
</div>
</div>
</div>
These divs both take up the full height of the parent, while taking up only half of the width. petalbody_left floats left while petalbody_right floats... well, right. petalbody_left has overflow set to hidden and petalbody_right to visible. You'll see why soon.
.petalbody
{
width: 400px;
height: 400px;
margin: 100px 0 0 auto;
/*-webkit-transform: rotate(15deg);
transform: rotate(15deg);*/
}
.petalbody_left
{
width: 200px;
height: 400px;
overflow: hidden;
float: left;
}
.petalbody_right
{
width: 200px;
height: 400px;
overflow: visible;
float: right;
}
{
width: 400px;
height: 400px;
margin: 100px 0 0 auto;
/*-webkit-transform: rotate(15deg);
transform: rotate(15deg);*/
}
.petalbody_left
{
width: 200px;
height: 400px;
overflow: hidden;
float: left;
}
.petalbody_right
{
width: 200px;
height: 400px;
overflow: visible;
float: right;
}
Here, you will see that the two divs take up exactly half of their parent each.
Let's start working on the div styled by petalbody_left. Insert another div, and style it using the CSS class whitepart. This is named because it's meant to be a white semicircle and will make up the main part of the petal.
<div class="petalbody_left">
<div class="whitepart">
</div>
</div>
<div class="whitepart">
</div>
</div>
Now style this. The background color is set to white. It's round, so the border-radius property is set to 50%. We'll give it the same height and width we gave petalbody.
.petalbody_right
{
width: 200px;
height: 400px;
overflow: visible;
float: right;
}
.whitepart
{
background-color: #FFFFFF;
border-radius: 50%;
width: 400px;
height: 400px;
}
{
width: 200px;
height: 400px;
overflow: visible;
float: right;
}
.whitepart
{
background-color: #FFFFFF;
border-radius: 50%;
width: 400px;
height: 400px;
}
Since the overflow property has been set to hidden for petalbody_left, what results is a white semicircle!
Now we work on this part. Three divs within this div, and style them using cutout_top, cutout_middle and cutout_bottom, respectively.
<div class="petalbody_right">
<div class="cutout_top">
</div>
<div class="cutout_middle">
</div>
<div class="cutout_bottom">
</div>
</div>
<div class="cutout_top">
</div>
<div class="cutout_middle">
</div>
<div class="cutout_bottom">
</div>
</div>
Now let's style these guys. Each of them have differing heights but the same widths.
.whitepart
{
background-color: #FFFFFF;
border-radius: 50%;
width: 400px;
height: 400px;
}
.cutout_top
{
width: 200px;
height: 100px;
}
.cutout_middle
{
width: 200px;
height: 150px;
}
.cutout_bottom
{
width: 200px;
height: 150px;
}
{
background-color: #FFFFFF;
border-radius: 50%;
width: 400px;
height: 400px;
}
.cutout_top
{
width: 200px;
height: 100px;
}
.cutout_middle
{
width: 200px;
height: 150px;
}
.cutout_bottom
{
width: 200px;
height: 150px;
}
Stay with me here, things are about to get interesting!
Modify their margin-left properties.
.cutout_top
{
width: 200px;
height: 100px;
margin-left: -20px;
}
.cutout_middle
{
width: 200px;
height: 150px;
margin-left: -25px;
}
.cutout_bottom
{
width: 200px;
height: 150px;
margin-left: -50px;
}
{
width: 200px;
height: 100px;
margin-left: -20px;
}
.cutout_middle
{
width: 200px;
height: 150px;
margin-left: -25px;
}
.cutout_bottom
{
width: 200px;
height: 150px;
margin-left: -50px;
}
Because the overflow property of the CSS class petalbody_right is set to visible, this is what we see.
Now let's add styling for the before pseudoselector of cutout_top. Set the display property to block and content to an empty string. The width will be 40 pixels and height is the full height of its parent. Next, set float property to left. And let's set the background color to, hmmm, yellow?
.cutout_top
{
width: 200px;
height: 100px;
margin-left: -20px;
}
.cutout_top:before
{
display: block;
content: "";
width: 40px;
height: 100%;
background-color: #FFFF00;
float: left;
}
.cutout_middle
{
width: 200px;
height: 150px;
margin-left: -25px;
}
{
width: 200px;
height: 100px;
margin-left: -20px;
}
.cutout_top:before
{
display: block;
content: "";
width: 40px;
height: 100%;
background-color: #FFFF00;
float: left;
}
.cutout_middle
{
width: 200px;
height: 150px;
margin-left: -25px;
}
There... we needed the width to be 40 pixels because its parent is offset 20 pixels left, and we need the middle of this yellow box to set flush on the flat side of the white semicircle.
Now what if it wasn't a rectangle, but round?
.cutout_top:before
{
display: block;
content: "";
width: 40px;
height: 100%;
border-radius: 50%;
background-color: #FFFF00;
float: left;
}
{
display: block;
content: "";
width: 40px;
height: 100%;
border-radius: 50%;
background-color: #FFFF00;
float: left;
}
Then we'd have a yellow oval. Trust me, we're getting there.
Let's do something similar for cutout_middle and cutout_bottom. Style their before pseudoselectors. The settings are the same as before, but the width will be double the left offset of their parents.
.cutout_middle
{
width: 200px;
height: 150px;
margin-left: -25px;
}
.cutout_middle:before
{
display: block;
content: "";
width: 50px;
height: 100%;
border-radius: 50%;
background-color: #FFFF00;
float: left;
}
.cutout_bottom
{
width: 200px;
height: 150px;
margin-left: -50px;
}
.cutout_bottom:before
{
display: block;
content: "";
width: 100px;
height: 100%;
border-radius: 50%;
background-color: #FFFF00;
float: left;
}
{
width: 200px;
height: 150px;
margin-left: -25px;
}
.cutout_middle:before
{
display: block;
content: "";
width: 50px;
height: 100%;
border-radius: 50%;
background-color: #FFFF00;
float: left;
}
.cutout_bottom
{
width: 200px;
height: 150px;
margin-left: -50px;
}
.cutout_bottom:before
{
display: block;
content: "";
width: 100px;
height: 100%;
border-radius: 50%;
background-color: #FFFF00;
float: left;
}
Now we have three yellow ovals!
But what if the top one was deep red, the middle was white and the bottom one was also deep red?
.cutout_top
{
width: 200px;
height: 100px;
margin-left: -20px;
}
.cutout_top:before
{
display: block;
content: "";
width: 40px;
height: 100%;
border-radius: 50%;
background-color: #AA0000;
float: left;
}
.cutout_middle
{
width: 200px;
height: 150px;
margin-left: -25px;
}
.cutout_middle:before
{
display: block;
content: "";
width: 50px;
height: 100%;
border-radius: 50%;
background-color: #FFFFFF;
float: left;
}
.cutout_bottom
{
width: 200px;
height: 150px;
margin-left: -50px;
}
.cutout_bottom:before
{
display: block;
content: "";
width: 100px;
height: 100%;
border-radius: 50%;
background-color: #AA0000;
float: left;
}
{
width: 200px;
height: 100px;
margin-left: -20px;
}
.cutout_top:before
{
display: block;
content: "";
width: 40px;
height: 100%;
border-radius: 50%;
background-color: #AA0000;
float: left;
}
.cutout_middle
{
width: 200px;
height: 150px;
margin-left: -25px;
}
.cutout_middle:before
{
display: block;
content: "";
width: 50px;
height: 100%;
border-radius: 50%;
background-color: #FFFFFF;
float: left;
}
.cutout_bottom
{
width: 200px;
height: 150px;
margin-left: -50px;
}
.cutout_bottom:before
{
display: block;
content: "";
width: 100px;
height: 100%;
border-radius: 50%;
background-color: #AA0000;
float: left;
}
Oh damn, that looks like a flower petal taking shape!
Next up, the handcuff!
We'll do pretty much the same thing we did for petalbody_right. We'll be putting divs in petalbody_left. First up is a div styled using the CSS class handcuff.
<div class="petalbody_left">
<div class="whitepart">
<div class="handcuff">
</div>
</div>
</div>
<div class="whitepart">
<div class="handcuff">
</div>
</div>
</div>
This is the style for handcuff. It takes up 50% of the width of its parent, and full height. And it's floated left. Since it pretty much occupies the space of the white semicircle, you won't see anything when you refresh. It's just a container for the divs we're about to add.
.cutout_bottom:before
{
display: block;
content: "";
width: 100px;
height: 100%;
border-radius: 50%;
background-color: #AA0000;
float: left;
}
.handcuff
{
width: 50%;
height: 100%;
float: left;
}
{
display: block;
content: "";
width: 100px;
height: 100%;
border-radius: 50%;
background-color: #AA0000;
float: left;
}
.handcuff
{
width: 50%;
height: 100%;
float: left;
}
Inside this div, another div is to be inserted. It is styled using the CSS class cuff.
<div class="handcuff">
<div class="cuff">
</div>
</div>
<div class="cuff">
</div>
</div>
cuff draws a small square. With an offset in pixels that I've specified here.
.handcuff
{
width: 50%;
height: 100%;
float: left;
}
.cuff
{
width: 40px;
height: 40px;
margin-top: 140px;
margin-left: 55px;
}
See this? Good job.
Now let's use the before pseudoselector. We'll use it to draw a deep red ring 5 pixels thick. The circle will have a 30 pixel diameter. 30 pixels, plus 5 pixels on both sides, is exactly 40 pixels, and this ring should sit snugly in its parent without any offset required.
.cuff
{
width: 40px;
height: 40px;
margin-top: 140px;
margin-left: 55px;
}
.cuff:before
{
display: block;
content: "";
width: 30px;
height: 30px;
border-radius: 50%;
border: 5px solid #AA0000;
}
{
width: 40px;
height: 40px;
margin-top: 140px;
margin-left: 55px;
}
.cuff:before
{
display: block;
content: "";
width: 30px;
height: 30px;
border-radius: 50%;
border: 5px solid #AA0000;
}
Our cuff is taking shape.
Now use the after pseudselector. Use it to draw a tiny yellow rectangle, and offset it almost flush to the right.
.cuff:before
{
display: block;
content: "";
width: 30px;
height: 30px;
border-radius: 50%;
border: 5px solid #AA0000;
}
.cuff:after
{
display: block;
content: "";
width: 5px;
height: 20px;
background-color: #FFFF00;
margin-top: -15px;
margin-left: 30px;
}
{
display: block;
content: "";
width: 30px;
height: 30px;
border-radius: 50%;
border: 5px solid #AA0000;
}
.cuff:after
{
display: block;
content: "";
width: 5px;
height: 20px;
background-color: #FFFF00;
margin-top: -15px;
margin-left: 30px;
}
See this yellow rectangle? We're about to do things to it.
First, we rotate it counter clockwise...
.cuff:after
{
display: block;
content: "";
width: 5px;
height: 20px;
background-color: #FFFF00;
margin-top: -15px;
margin-left: 30px;
-webkit-transform: rotate(-35deg);
transform: rotate(-35deg);
}
{
display: block;
content: "";
width: 5px;
height: 20px;
background-color: #FFFF00;
margin-top: -15px;
margin-left: 30px;
-webkit-transform: rotate(-35deg);
transform: rotate(-35deg);
}
Getting there...
Then we turn it white!
.cuff:after
{
display: block;
content: "";
width: 5px;
height: 20px;
background-color: #FFFFFF;
margin-top: -15px;
margin-left: 30px;
-webkit-transform: rotate(-35deg);
transform: rotate(-35deg);
}
{
display: block;
content: "";
width: 5px;
height: 20px;
background-color: #FFFFFF;
margin-top: -15px;
margin-left: 30px;
-webkit-transform: rotate(-35deg);
transform: rotate(-35deg);
}
So now we have something that resembles a cuff!
Add another div, and style it with the CSS class cufflink.
<div class="handcuff">
<div class="cuff">
</div>
<div class="cufflink">
</div>
</div>
<div class="cuff">
</div>
<div class="cufflink">
</div>
</div>
This one sits directly below the cuff.
.cuff:after
{
display: block;
content: "";
width: 5px;
height: 20px;
background-color: #FFFFFF;
margin-top: -15px;
margin-left: 30px;
-webkit-transform: rotate(-35deg);
transform: rotate(-35deg);
}
.cufflink
{
width: 150px;
height: 20px;
}
{
display: block;
content: "";
width: 5px;
height: 20px;
background-color: #FFFFFF;
margin-top: -15px;
margin-left: 30px;
-webkit-transform: rotate(-35deg);
transform: rotate(-35deg);
}
.cufflink
{
width: 150px;
height: 20px;
}
Yep, this is what you should see.
Again with the before pseudoselector. Make a 20 by 20 pixel deep red square.
.cufflink
{
width: 150px;
height: 20px;
}
.cufflink:before
{
display: block;
content: "";
width: 20px;
height: 20px;
background-color: #AA0000;
}
{
width: 150px;
height: 20px;
}
.cufflink:before
{
display: block;
content: "";
width: 20px;
height: 20px;
background-color: #AA0000;
}
See that deep red square left of the div?
Let's position this. Right in the middle.
.cufflink:before
{
display: block;
content: "";
width: 20px;
height: 20px;
background-color: #AA0000;
margin: 0 auto 0 auto;
}
{
display: block;
content: "";
width: 20px;
height: 20px;
background-color: #AA0000;
margin: 0 auto 0 auto;
}
Looking good, but it could be better.
Shift its parent upwards by 5 pixels.
.cufflink
{
width: 150px;
height: 20px;
margin-top: -5px;
}
{
width: 150px;
height: 20px;
margin-top: -5px;
}
Viola!
Finally, the chain. Add one more div. Style it using chain.
<div class="handcuff">
<div class="cuff">
</div>
<div class="cufflink">
</div>
<div class="chain">
</div>
</div>
<div class="cuff">
</div>
<div class="cufflink">
</div>
<div class="chain">
</div>
</div>
Here's the style for it. It's tall, offset like so, and has its overflow property set to visible, for a reason which will be clear soon.
.cufflink:before
{
display: block;
content: "";
width: 20px;
height: 20px;
background-color: #AA0000;
margin: 0 auto 0 auto;
}
.chain
{
width: 80px;
height: 200px;
margin-left: 90px;
margin-top: -30px;
overflow: visible;
}
{
display: block;
content: "";
width: 20px;
height: 20px;
background-color: #AA0000;
margin: 0 auto 0 auto;
}
.chain
{
width: 80px;
height: 200px;
margin-left: 90px;
margin-top: -30px;
overflow: visible;
}
See this? Good.
You guessed right, we'll use the before psudoselector. Make a round shape. This round shape has a 5 pixel thick dashed deep red border. It's larger than the box, but because its parent's overflow property is visible, even though the size pushes it out of the box, we still see it!
.chain
{
width: 80px;
height: 200px;
margin-left: 90px;
margin-top: -30px;
overflow: visible;
}
.chain:before
{
display: block;
content: "";
width: 100%;
height: 230px;
border-radius: 50%;
border: 5px dashed #AA0000;
}
{
width: 80px;
height: 200px;
margin-left: 90px;
margin-top: -30px;
overflow: visible;
}
.chain:before
{
display: block;
content: "";
width: 100%;
height: 230px;
border-radius: 50%;
border: 5px dashed #AA0000;
}
So yes, we get that dashed effect, but how do we get rid of the lines we don't need?
By specifying that only the left side of the round div has that border.
.chain:before
{
display: block;
content: "";
width: 100%;
height: 230px;
border-radius: 50%;
border-left: 5px dashed #AA0000;
}
{
display: block;
content: "";
width: 100%;
height: 230px;
border-radius: 50%;
border-left: 5px dashed #AA0000;
}
OK, but now it tapers off at the top, which is ugly....
So specify the same for the top border as well.
.chain:before
{
display: block;
content: "";
width: 100%;
height: 230px;
border-radius: 50%;
border-left: 5px dashed #AA0000;
border-top: 5px dashed #AA0000;
}
{
display: block;
content: "";
width: 100%;
height: 230px;
border-radius: 50%;
border-left: 5px dashed #AA0000;
border-top: 5px dashed #AA0000;
}
I know, this introduces a new problem, right? No problem at all.
Turn it transparent!!
.chain:before
{
display: block;
content: "";
width: 100%;
height: 230px;
border-radius: 50%;
border-left: 5px dashed #AA0000;
border-top: 5px dashed transparent;
}
{
display: block;
content: "";
width: 100%;
height: 230px;
border-radius: 50%;
border-left: 5px dashed #AA0000;
border-top: 5px dashed transparent;
}
Problem solved.
Now we just need to rotate it like so...
.chain:before
{
display: block;
content: "";
width: 100%;
height: 230px;
border-radius: 50%;
border-left: 5px dashed #AA0000;
border-top: 5px dashed transparent;
-webkit-transform: rotate(-25deg);
transform: rotate(-25deg);
}
{
display: block;
content: "";
width: 100%;
height: 230px;
border-radius: 50%;
border-left: 5px dashed #AA0000;
border-top: 5px dashed transparent;
-webkit-transform: rotate(-25deg);
transform: rotate(-25deg);
}
Beautiful, isn't it? It's about to get even more awesome.
Now get rid of all the blue lines.
div {outline: 0px solid #0000FF;}
Nice! One last thing to do.
Rotate the whole damn thing clockwise by 15 degrees.
.petalbody
{
width: 400px;
height: 400px;
margin: 100px 0 0 auto;
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
{
width: 400px;
height: 400px;
margin: 100px 0 0 auto;
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
Well, here it is! I know it's not pixel-perfect, but this is a good base for more adjustments till we get it to a point where it is good enough.
Can you hear the people sing?
Thankfully, not from where I am. But here's wishing Hong Kong all the best whatever happens.
Riotous regards,
T___T
T___T
No comments:
Post a Comment