Exploring Infinity with a Mandelbrot Explorer in JavaScript – Part 3:CSS

body {
    margin: 0;
    background: black;
    overflow: hidden;
}

#info {
    position: fixed;
    top: 10px;
    left: 10px;
    color: white;
    font-family: monospace;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.5);
    padding: 6px 8px;
    border-radius: 4px;
}

This CSS controls the appearance of the web page and the information panel that appears on top of the Mandelbrot canvas.

body {
    margin: 0;
    background: black;
    overflow: hidden;
}

margin: 0;

Browsers automatically add a small margin around the page (usually about 8 pixels).

Without this line:

+---------------------------+
|  Default margin           |
|   +-------------------+   |
|   | Your content      |   |
|   +-------------------+   |
+---------------------------+

With:

margin: 0;

the browser removes that whitespace, allowing the canvas to fill the entire browser window.

background: black;

This sets the page background to black.

This is ideal for a fractal viewer because:

• empty areas remain black
• the fractal colours stand out more
• it creates a space or scientific appearance

overflow: hidden;

Normally, if an element becomes larger than the browser window, scrollbars appear. This codes prevents horizontal and vertical scrollbars from appearing. This is useful because the canvas always fills the window, so scrolling would only get in the way.

#info

#info {

The # means this rule applies to the HTML element with

<div id="info"></div>

Only that single element receives these styles.

position: fixed;

This tells the browser: Keep this element attached to the browser window, even while the page moves.

top: 10px;

This places the panel 10 pixels below the top of the browser window.

left: 10px;

Places it 10 pixels from the left edge.

Together:

+--------------------------------+
|         10px                   |
|     +-----------------------+  |
|10px | Information panel     |  |
|     +-----------------------+  |
|                                |
|                                |
+--------------------------------+

color: white;

Sets the text colour.

The black background would make black text invisible, so white provides excellent contrast.

font-family: monospace;

Uses a monospace font such as:

• Consolas
• Courier New
• Monaco

Every character has exactly the same width.

Example:

Iteration: 125
Zoom:      256x

Everything lines up neatly, making it perfect for technical information.

font-size: 12px;

Displays the text at 12 pixels.

The panel is intended to provide technical information rather than attract attention, so a small font keeps it compact.

background: rgba(0, 0, 0, 0.5);

rgba stands for:

• R = Red
• G = Green
• B = Blue
• A = Alpha (transparency)

which means:

• black colour
• 50% transparent

Instead of covering the fractal completely, the information box lets part of the image remain visible underneath.

padding: 6px 8px;

Padding creates space inside the element between the text and its border.

+------------------------+
|                        |
|   Text appears here    |
|                        |
+------------------------+

The values mean:

• 6 pixels above and below the text
• 8 pixels left and right

Without padding, the text would touch the edges and look cramped.

border-radius: 4px;

Rounds the corners slightly.

Without:

+-------------+
|             |
|             |
+-------------+

With:

/-------------\
|             |
|             |
\-------------/

Rounded corners give the interface a cleaner, more modern appearance.

Summary

This stylesheet has two responsibilities:

Overall, this CSS creates a clean, distraction free interface where the fractal fills the screen and a small floating panel displays useful information without obscuring too much of the image.