The Thaumatorium:
Where the magic happens

HTML, CSS and/or Javascript experimentations go here


These are the most often used elements by beginners:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

This is a normal paragraph

This paragrph is explicitly Times New Roman

This paragraph is explicitly monospaced

This date is surrounded by a time element:

You can get all time elements in Javascript by pressing ctrl-shift-i or F12 and putting document.querySelectorAll("time") into the console


Here are some fancier HTML elements

Using Pythagoras' theorem to solve for the hypotenuse a of a triangle with sides b and c

To make George eat an apple, selectFile|Eat Apple...

<details> animation test

Automated Status: Operational

Velocity: 12m/s

Direction: North

Copying "Really Achieving Your Childhood Dreams"

Copying... 25%
Transfer rate:
452KB/s
Local filename:
/home/rpausch/raycd.m4v
Remote filename:
/var/www/lectures/raycd.m4v
Duration:
01:16:27
Color profile:
SD (6-1-6)
Dimensions:
320×240

Detail Element

The following shows how a details element can be used to hide some controls by default:

CSS border radius

https://www.w3.org/TR/css-backgrounds-3/#the-border-radius

Lorem ipsum dolor sit amet.

Corner shaping

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore, et.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore, et.

Image scaling

smooth

high-quality

crisp-edges - this looks broken :(

pixelated

default

font weirdness

wut

CSS transitions

Hover me 1
Hover me 2

CSS Animations

source: Travery Media