Used radial-gradient to make a Japanese flag

HTML-CSS
1

image
image1471×516 11.7 KB

Hi everyone.

Recently I’ve seen the addition of the interactive editor to FCC web dev curriculum. I’m very scared of CSS, but during the radial-gradient lesson I wanted to try something special — make a Japanese flag without any images.

I should admit that I’ve hardcoded all the pixels, and the red circle changes it’s position in full screen. But still, I’m proud of myself:)

2

Can you please share a link to that challenge?

3

Here is the topic.

4

Nicely done, @JerryTheQuad!

5

Sorry, it was a theory, not a challenge. I should have red you post twice.

It seems you are at the first quartal of the CSS modul, so making a flag on your own with only 3 CSS attribute is an very nice achivement as a student.

It´s really great you experimenting on your own. You can learn even more about gradients here if you wish.

You are already showing important programmer skills by wrote you fear CSS, but still playing with it and keep on learning. You shows us your code so others can review it too.
Keep it up that way!

Few tips:

  • You probably have only one element as a Japanese flag, so id is more suitable than class
  • You should always set a color for your border, to make sure it appears correctly in the browser.

The rest is just flexibility:

  • aspect-ratio: 3 / 2; would keep the ratio of your flag, so it´s always the same size.
  • Color stops and positions are in percentage instead of pixel, so the dor will be flexible.
1 Like