Up Above the World, So High (and Far Away)!

TWINKLE, twinkle, little star,

How I wonder what you are!

Up above the world so high,

Like a diamond in the sky.

While I sing this rhymes, I know most of you here would have been singing along with me at least in your minds.

Rewinding back the memories related to the instances of the night always makes us interested? Isn't it? They are so so, close to us.

The Earth, stars, moon, sun, mars, galaxies, asteroids, comets, the Milky way, much more beyond and beyond this universe; For the past billion years, we have been researching; yet, many are still hidden.

Since human beings were civilised, we have been doing numerous researches on the known and lot more about the unknown.

For about 100 years and more, we have been trying to know about the most mystical in this universe.

Any guesses, from the crowd on what i signify as the mystical?

- This is how i started with my latest speech at Toastmasters club, as part of improvising my public speaking skill.

Btw, if any of you guessed that the mystical is Black Hole. Yes, it is!

And the story goes like, earlier years we did not have any real image(imaging) of the BlackHole. It was during April 2019, almost 10 years after the launch of The Event Horizon Collaboration, the Team has come up with the First ever image of the BlackHole. It was trending news then.

Source of information:

https://www.nustar.caltech.edu/news/nustar190410

This news bit inspired me to learn more about the findings and deliver it as part of my Toastmaster project pathway as well.

If anyone interested, can watch my speech video at:

And through this instructable, i am taking another step to create an animation of the black hole : as how it would be revolving in the outer space.

Supplies

(Software tools, required to be installed in your machine)

HTML5

CSS3

Editor

Browser

Step 1: Preparing the Environment!

Here the environment, is making the software and tools ready to start the work!

I have Ubuntu16.04(Linux version) installed in my machine. On top of it, I have:

1. Atom, as Editor

2. Firefox, as Browser

along with that, i already have:

1. HTML5

2. CSS3

installed and using it whenever required to work on!

Step 2: Let's Start Coding...

HTML and CSS are quite easy web development tools. And to create an end product/result, you can do any number of times of executing and testing the code(in programming language).

I have done so many trial and error case earlier, to bring the result to final shape! So here in this tutorial i am gonna describe the features(attributes, parameters) added as part of the code to create the final animation.

Step 3: Overall Structure of the Code

The overall structure of the code will be within the tags:

Head

Style

so simple and curated well, to have minimal lines but bring the end result!

As part of explaining the coding, i split full code by highlighting every section and describing the attributes added for the purpose. While describing, i will be giving an overview (of the specific feature) and not on every character added.

*** Please refer to the picture added at every section, to understand the code and the reasoning ***

Step 4: End-to-end Coding - Part1

Head is more or less same lines for many of projects we create. So here it is simple, just to give the title and the common feature we add to every head of the html code.

Step 5: End-to-end Coding - Part2

body is added inside the style tag. Within body part, we will define the major features required to see in the web page.
1. Background added with color code #000, for black color
2. Display is made as grid to position the data in rows and columns rather than float etc.
3. Place-content is made as centre to keep the image(data) at the centralised position of the web page.
4. Height is made as 100vh(100% percentage of the viewport; viewport is the current display part where you see through the web page).
5. Filter made as blur, as we require the content to be blurred and not sharp.

Step 6: End-to-end Coding - Part3

b is the element defined to create most of the black hole image on top of the black color (coded in body part).

b.before and b.after are two elements added to come before/after the element content positionally. These are tagged as before and after as it allows you to insert content onto a page without it needing to be in the HTML.

Display : block is used to define attributes of section etc.

border-radius : 50% is added for circle feature.

Step 7: End-to-end Coding - Part4

Inside the element b, we will define the feature required for the outer lines of the black hole ring in shades of orange color.

1. Width : added in viewport measurement value

2. Height : added in viewport measurement value

3. Box-shadow represents the shadow we add to the outline layer in shades of orange color. It’s parameter includes:
a. Horizontal offset : +ve right side; -ve left side
b. Vertical offset : +ve below the box; -ve above the box
c. Blur radius : 0, sharp; highest, more blur.
d. Spread radius : +ve, increases size of shadow; -ve, decreases size of shadow.
e. Color value in hex code.
#f50, #f60, #f80 shades of orange.

Animation feature is added with name bh, duration 5s, timing-function as linear, iteration count (no of tunes to perform animation as infinite

Step 8: End-to-end Coding - Part5

Actually, the page looks animated as we change the set of css styles to another. For the animation name, we added as bh now we will define the key frame values(specifies animation code).
1. 0% - beginning of animation
100% - end of animation
2. transform always paired with different positioning attribute. Here we need to add with rotate and from
0 degree - start point
-360 degree - end point

* here -360 is for counterclockwise, if +360, it is clockwise.

Step 9: End-to-end Coding - Part6

For the same element b, now we define the inner yellow part with white shadow(from inside).

1. Content is empty, so we use “”

2. Background is made to white

3. Position: relative, adds values relative to the Normal position. So top:6px adds 6pixels to the elements top.

Step 10: End-to-end Coding - Part7

Now, we add the features for before(pseudo element) and after of element b.

1. Width, height, left same as explained earlier.
2. Box-shadow is defined for yellow object revolving around the orange shades which are outer rings of the black hole.