Cool HTML & CSS

Horizontal Spacing

Hair Space &hairsp; or  
Single Non-Breaking Space  
Two Spaces &ensp; (en = ½ font size)
Four Spaces &emsp; (em = font size)
– En Dash – (½ font size width)
— Em Dash — (font size width)

✅ <div style="width: fit-content;"></div>
Ø Diameter Ø

Pointers

← ← Left-Right Arrows → →

↑ ↑ Up-Down Arrows ↓ ↓

⭠ ⭠ Triangle Head Arrows ⭢ ⭢

⇐ &uArr; Double Arrows ⇒ ⇒

⭤ ⭤ Left-Right Arrows ⮂ ⮂

Exchange ⮂ ⮂ Recycle 🔄 &#1f504;

↖↖ ⬆⬆ ⬇⬇ Unicode Arrows ⬅ ⬅ ⮕ ⮕ ↗ ↗

Bold Right Arrow ➔ ➔

👈 &x1f448; Hand Point &x1f449; 👉

Recycle 🔄 &x1f504;

Namaste 🙏 🙏

<head> Coding

<head>
<title>3D is Cool</title>
<link rel="stylesheet" type="text/css" href="3discool2020.css">
<link rel="stylesheet" type="text/css" href="coins.css">

<link rel="icon" type="image/x-icon" href="favicon.png"> <! image for SMS link>
<link rel="apple-touch-icon" href="favicon.png"> <! image for iPhone>

<meta property="og:title" content="3D Underwater Photos"> <! top line in link>
<meta property="og:image" content="http://www.3discool.com/favicon.png">
<meta property="og:image:width" content="180">
<meta property="og:image:height" content="180">
</head>

iMessage link

Backgrounds - Images

B ackgrounds can be applied to the entire page or a single element. Backgrounds cannot be selected or copied, and are, by default, not printed. This allows at least some protection for images. I set the PAGE backgrounds to black. IMAGE width & height must always be defined.

Typical image...
<div style="width: 480px; height: 300px; background-image: url('image.png'); background-size: 100%;"></div>

Multiple Backgrounds are possible. The first image is on top. Each can be assigned a position & repeat option.
<div style="
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
"></div>

Text Shadows

Text-Shadow
text-shadow: 2px 2px 1px #00ffff;
(X-offset Y-offset Spread Color)

Multiple Text-Shadows
text-shadow: 1px 1px #000000,2px 2px #00ffff;

Box Shadows

Box Shadow
box-shadow: 10px 10px 10px 10px #00ffff inset;
(X-offset Y-offset Spread Fuzz Color inset outset)

Multiple Box Shadows
box-shadow: 0 0 4px 4px #ff0000, 0 0 8px 8px #ff7f00, 0 0 12px 12px #ffff00, 0 0 16px 16px #00ff00, 0 0 16px 16px #0000ff, 0 0 20px 20px #4b0080, 0 0 24px 24px #9400d0;
This makes a Rainbow Frame.

Multiple Box Shadows

Drop Shadows for PNG files

Drop Shadow
-webkit-filter: drop-shadow(10px 10px 10px #00ffff); (X-offset Y-offset Spread Color)

Multiple Drop Shadows
(Seperate with a space, Smallest shadow first)
-webkit-filter: drop-shadow(-40px 0px 4px #ffff00 ) drop-shadow(0px -20px 8px #0000ff) drop-shadow(20px 20px 12px #00ff00);

Multiple Drop Shadows

Section Title Coding

T he Section Title Coding uses BOTH text-shadows and drop-shadows. This makes for a cool 3D effect, when placed on top of other elements. Make the background-color: transparent;

OUTLINE ~ Surrounds the <div> (No Radius option)

MARGIN ~ Positions the <div>

BORDER for the <div>

PADDING ~ Positions the Inside Content of the <div>

Content

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat...

Set the border-style or outline-style property first.
Their options are: solid dotted dashed double inset outset ridge groove

These sample boxes all have the following basic code:
width: 600px; height: 100px; margin: 0 auto;
border-width: 8px; border-radius: 30px;
box-shadow: 0px 0px 30px 15px #0088ff;

border-style: inset

border-style: inset;
(border-color default is grey)

border-style: outset

border-style: outset;
(border-color default is grey)

Radio Buttons

border: 4px outset; (not pushed)
border: 4px inset; (pushed)

border-style: ridge

border-style: ridge;
border-color: #ff0000 #00ff00 #ffff00 #00ffff;

border-style: (mixed)

border-style: dotted dashed solid double;
border-color: #ff0000 #00ff00 #ffff00 #00ffff;

Border Radius

Basic Border-radius
border-radius: 10px 20px 30px 40px; OR border-radius: 30px;

Using unequal dimensions
border-top-left-radius: 40px 80px;
border-top-right-radius: 40px 80px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;

✓ Text will wrap automatically around a JPG or PNG
text-align: justify;"

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.

ELLIPSE WRAP CODE

style="border-radius:50%; shape-outside: ellipse(); background-clip: content-box;
display: inline-block;"

Polygon Shape Text Wrap

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.

POLYGON WRAP CODE

style="shape-outside: polygon(153px 0, 306px 250px, 0 306px, 153px 0);
shape-margin: 30px;"

Polygon Coordinate Ruless...
• Coordinate pairs are coded as Xpx Ypx (without a comma)
• Coordinate pairs are seperated by a comma
• Zero coordintes are coded as a 0 without a px suffix

I ndividual HTML elements can be rotated. Positive rotation is clockwise from level.

↻

transform: rotate(-10deg);

This is rotated -10 degrees

The default origin is the center of the element
transform-origin: 50% 50%;

1st value is X (horizontal from left of the element)
2nd value is Y (vertical from top of the element)

G radients can be applied to text and to backgrounds of any kind including the entire page. Gradients can be linear, radial, angled, have multiple intermediate color 'stops', and even use the color 'transparent'. I like to use them but not all browsers respond alike to the coding.

Fire and Heat Ice and Cold Horizontal

Here's the code for this Horizontal Gradient:
background: -webkit-linear-gradient(180deg, #ff0000, #00ff00, #0000ff);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;

A linear vertical background gradient:

background-image: -webkit-linear-gradient(90deg, #00ffff, #0000ff);

A linear horizontal background gradient using the color transparent at either end:

background-image: -webkit-linear-gradient(180deg, transparent, #0000ff, transparent);

An Angled gradient:

background-image: -webkit-linear-gradient(75deg, #1d4949, #1d4949, #00cccc, #1d4949, #1d4949);

If we reduce the <div> height to 2 or 3 pixels we can essentially produce gradient lines, like these:

The above code is placed in a CSS file, then referenced in HTML so.
<div class="secline"></div>

Some NEON dividers:

The code for the light green one is here:
<div style="width: 500px; height: 0px; border: 1px solid #00f98a; margin: 0 auto; box-shadow: 0px 0px 8px 4px #00cccc;"></div> <div style="width: 150px; height: 12px; border-radius: 100%; background-color: #00f98a; box-shadow: 0px 0px 12px 6px #00cccc; margin: 0 auto; position: relative; top: -7px;"></div>

A basic 3-color radial gradient:

background: -webkit-radial-gradient(#ff0000, #00ff00, #0000ff);

An angled linear gradient using the color 'transparent':

background: -webkit-linear-gradient(100deg, #0000ff, #0000ff, transparent, #0000ff, transparent, #0000ff, #0000ff);

A special repeating, angled linear gradient:

background-image: repeating-linear-gradient(45deg, #ffff00 0px, #ffff00 25px, #000000 25px, transparent 50px, #a9a9a9 50px);

Greek Alphabet

α (alpha, lower case) α	α (1^st, Alpha particle He²⁺)
β (beta, lower case) β	β (2^nd, Beta particle e^-)
γ (gamma, lower case) γ (times bold)	γ (3^rd angle, variable, Gamma radiation (e^-), Lorentz Transform Factor)
Δ (Delta, upper case) Δ	Δ (difference operator, finite difference)
ε (epsilon, lower case) ε	ε epsilon (5th brightest, Young's Modulus)
ζ (zeta, lower case) ζ	ζ zeta (Riemann function in math, damping ratios)
η (eta, lower case) η	η eta (η mesons. propulsive efficiency, packing %)
θ (theta, lower case) θ	θ (real variable or angle)
ι (iota, lower case) ι	ι (very small amount)
Κ (Kappa, upper case) Κ	Κ (10th brightest)
λ (lambda, lower case) λ	λ (wavelength, radioactive decay)
μ (mu, lower case) μ	μ (coeffecient of friction, viscosity)
ν (nu, lower case) ν	ν nu (statistics degree of freedom)
Ξ (Xi, upper case) Ξ	Ξ Xi (Ξ baryons, greek number 60)
Ο (Omicron, upper case) Ο	Ο Omicron (15th brightest)
π (pi, lower case) π	π (ratio of circumference of circle to diameter)
ρ (rho, lower case) ρ	ρ (momentum, density)
Σ (Sigma, upper case) Σ	Σ (summation)
σ (sigma, lower case) σ	σ (standard deviation)
τ (tau, lower case) τ	τ (time, torque, opacity)
Υ (Upsilon, upper case) Υ	Υ Upsilon (20th brightest)
Φ (Phi, upper case) Φ	Φ (golden ratio, 1.6180339887…)
φ (phi, lower case) φ	φ (reciprocal of the golden ratio, 1 ⁄ Φ)
Χ (Chi, upper case) Χ	Χ Chi (22nd brightest)
Ψ (Psi, upper case) Ψ	Ψ (wave function in Schrödinger's equation)
Ω (Omega, upper case) Ω	Ω (electrical resistance)
ω (omega, lower case) ω	ω (angular velocity)
æ (lowercase dipthong) æ	Latin diphthong a + e
œ (lowercase dipthong) œ	Latin diphthong o + e

𝘦 (e) 𝘦	e, Euler's Number, 2.7182818284590…
𝝏 (partial) 𝝏	Partial Differential
Ĥ (H circumflex) Ĥ	Ĥ (total energy of a quantum system)
ℏ (h-bar) &planck; OR &hbar;	ℏ (Planck's Constant divided by 2π)
∀ (for all) ∀	∃ (there exists) ∃
𝒊 (imaginary i) 𝒊 𝒾 𝒾	∴ (therefore) &there4;
⊙ (circumpunct) ⊙	M_⊙ (Solar Mass) M<sub>⊙</sub>

√ (radical, square root) √ ³√ (cube root) <sup>3</sup>√
∛ ∛

√ 2 (square root of 2) <span style="position: relative; top: 2px;">√</span><span style="text-decoration: overline;"> 2 </span>

ƒ (function of) &fnof; ƒ(x) (function of x) &fnof;(x)

ƒ′ (prime, 1^st derivative) &fnof;′ ƒ′′ (dbl prime, 2^nd derivative) &fnof;′′

∂ (partial derivitive) ∂ ∂x (partial derivitive of x) ∂x

∫ (integral) ∫ ∫∫∫ (triple integral) ∫∫∫

dx ⁄ dt (derivative of x with respect to time) dx &frasl; d<i>t</i>

^dx⁄_dt <i><sup>dx</sup>&frasl;<sub>dt</sub></i>

∂x ⁄ ∂t (partial derivative of x with respect to time) ∂x &frasl; ∂<i>t</i>

^∂x⁄_∂t <i><sup>∂x</sup>&frasl;<sub>∂t</sub></i>

∇ (a NABLA symbol, the vector derivative or gradient, of a scalar field.) del math ∇

⧸ (a SOLIDUS symbol, compare to a forward slash / ) ⧸

σ_x (standard deviation of x values) (Bell Curve) σ<sub>x</sub>

Ø (Diameter) Ø 7 (7 for mathematicians) <del>7</del>

∠ (angle) &ang; ⊥ (perpendicular) &perp;

≠ (not equal to) ≠ \u2260 (esc code) ≈ (approximately equal to) ≈

= (equal to) = ≡ (equivalent to) &equiv;

< (less than) < > (greater than) >

≤ (less than or equal to) ≤ ≥ (greater than or equal to) ≥

{ (left brackets) { } (right brackets) }

→ (approaches) → ∞ (infinity) ∞

± (plus or minus) ± ∓ (minus or plus) &mnplus;

! (factorial) e.g. 5! = 5 x 4 x 3 x 2 x 1 … (ellipsis) …

² (squared) ² ³ (cubed) ³

H₂0 use of <sub> for subscript a² use of <sup> for superscript

½ ⅓ ⅔ (fractions) ½ &frac13; &frac23; ¼ ¾ ⅝ (fractions) ¼ ¾ &frac58;

Schrödinger (with ö umlaut) Schrödinger ^d⁄_dx <i><sup>d</sup>&frasl;<sub>dx</sub></i>

⁷⁄₁₆ <i><sup>7</sup>&frasl;<sub>16</sub></i> ^sin⁄_cos <i><sup>sin</sup>&frasl;<sub>cos</sub></i>

§ (section symbol) §	• (bullet) •
● (password dot) ●	· (multiplication dot) ·
© (copyright) ©	★ (star) ★
ō (line over any letter) ō	‾ (overline) &oline;
— (long dash) —	✓ (check mark) ✓
(4 spaces) &emsp; (em = font size)	(1 space)

⌖ (true position) ⌖	℄ (centerline) ℄
⏚ (earth ground) ⏚	⏻ (power) ⏻
⨷ (phillips screw) ⨷	ⴱ (slotted screw) ⴱ

⇪ (up block arrow) ⇪	↔ (horizontal arrow) ↔
← (left arrow) ←	→ (right arrow) →
⟵ (long left arrow) &xlarr;	⟶ (long right arrow) &xrarr;
↑ (up arrow) ↑	↓ (down arrow) ↓
☜ (left hand) ☜	☞ (right hand) ☞
⬇ (down) ⬇	⬆ (up) ⬆
↻ (reload, clockwise) ↻	↺ (reload, counter clockwise) ↺
⇒ (double right) ⇒	⇐ (double left) ⇐
↖ (left up) ↖	↗ (right up) ↗
↙ (left down) ↙	↘ (right down) ↘

↯ (lightning bolt) ↯	⇵ (up & down) ⇵
🔄 (loop arrow) 🔄	⇆ (exchange arrows) ⇆
↻ (clockwise) &x21bb;	↺ (counter clockwise) ↺
♲ (recycle outlined) ♲	♺ (recycle type) ♺
♻ (recycle filled) ♻	♳ ♴ ♵ (recycle) ♳ ♴ ♵

$ (U.S. Dollar) $ (place before, $50)	元 (China Yuan) 元 (place after, 50元)
£ (English Pound) £ (place before, £50)	€ (Euro) € (place before, €50)
¥ (Japanese Yen) ¥ (place before, e.g. ¥50)	¢ (Cent) ¢ (place after, 50¢)
₹ (Indian Rupee) ₹ (place before, e.g. ₹50)	฿ (Thai Baht) ฿ (place before, e.g. ฿50)

№ (number symbol) № Use font: 100% times;	☺ (smiley face) ☺
℃ (Celsius) °C	℉ (Fahrenheit) °F
° (degree) °	°K (Kelvin) °K
⁄ (fraction slash) &frasl;	☉ (sun, circle symbol) ☉

Å (Angström) Å	ö ü (umlaut) ö ü
á é í ó ú (acute) á é etc.	à è ì ò ù (grave) à è etc.
ā ē ī ō ū (macron) &amacr; &emacr; etc.	ă ĕ ĭ ŏ ŭ (breve) ă ĕ etc.
ñ Ñ (tilde) ñ Ñ	¡ ¿ (inverted) ¡ ¿
ū d̄ (overline) ū d̄	〰 (wavy line) 〰〰〰〰〰

Emojipedia Unicode Symbols

Math Symbology Unicode Symbols
𓂀 Egyptian Hieroglyph Unicodes

Greek Alphabet Unicodes

For eXtended Unicodes (U+), add an x after the &# and close with semicolon ;
U+1F60E → → 😎

eXtended Unicodes can be used in Pseudo Classes as Glyphs.

To use earth 🌎 (🌎) as Glyph Content, use a backslash and the code (no semicolon)
🌎 = \1f30e

Sample Glyph Codes…
© \00a9
[space] \00a0
∂ \2202
content: "\00a9 \00a0 By 3DisCOOL.com"

To use in javascript .innerHTML =
✋ (✋)
Replace the &#x with 0x and (no semicolon)
Treat like a variable (no quotes)
.innerHTML = String.fromCodePoint(0x270b) + " Input must be a positive number less than 1";

© © Copyright 😊 😊 Smiley with Smiling Eyes 😎 😎 Smiling w/ Sunglasses 🤔 🤔 Thinking Face 🤫 🤫 Hushing Face 🤯 🤯 Exploding Head 😜 😜 Crazy Face 😮 😮 Face with Open Mouth 🤠 🤠 Cowboy 🌞 🌞 Sun with Rays 🥶 🥶 Cold Face 👋 👋 Hand Wave ✋ ✋ Raised Hand 👍 👍 Thumb Up 👉 👉 Point Right 👌 👌 OK Hand 🙏 🙏 Namaste 👨‍🚀 👨‍🚀 Astronaut 🤖 🤖 Robot Face 📌 📌 Push Pin 💡 💡 Light Bulb 📱 📱 Mobile Phone 🖥 🖥 Computer 📚 📚 Books 🚧 🚧 Construction 🧰 🧰 Toolbox

🌟 🌟 Glowing Star ✨ ✨ Sparkles 💥 💥 Collision 🛸 🛸 UFO 🚀 🚀 Rocket 🛰 🛰 Satelite 🌎 🌎 Earth 🌏 🌏 Earth Asia 🌐 🌐 Globe w/ Meridians 🌒 🌒 Crescent Moon 🔭 🔭 Telescope 🧭 🧭 Compass 📡 📡 Satellite Antenna 🥤 🥤 Milkshake 🍿 🍿 Popcorn 🎥 🎥 Movie Camera 📽 📽 Film Projector 🎞 🎞 Film 📸 📸 Camera with Flash 🎬 🎬 Clapper Board 📺 📺 Television 📖 📖 Open Book 📜 📜 Scroll 🏛 🏛 Classical Building ⛩ ⛩ Shinto Shrine 🛑 🛑 Stop Sign

🍚 🍚 Cooked Rice 🥢 🥢 Chop Sticks 🍛 🍛 Curry Rice 🍜 🍜 Steaming Bowl 🥟 🥟 Dumpling 🍗 🍗 Poultry Leg 🍲 🍲 Pot of Food 🍵 🍵 Teacup ☕ ☕ Hot Beverage

🥠 🥠 Fortune Cookie 🍤 🍤 Fried Shrimp 🍣 🍣 Sushi 🥡 🥡 Takeout Box 🥜 🥜 Peanuts 🌽 🌽 Ear of Corn 🍅 🍅 Tomato 🎏 🎏 Carp Streamer 🎎 🎎 Japanese Dolls

👲 👲 Asian Man 🐲 🐲 Dragon Head ☯ ☯ Yin Yang🀄 🀄 Mahjong Tile 🏮 🏮 Red Paper Lantern

🐯 🐯 Tiger Face 🐉 🐉 Dragon 🧨 🧨 Fire Cracker 🧧 🧧 Red Envelope 💰 💰 Money Bag

🌺 🌺 Hibiscus 🌼 🌼 Blossom 🌷 🌷 Tulip 🌹 🌹 Rose 🌲 🌲 Evergreen 🌴 🌴 Palm 🌿 🌿 Plant 🌱 🌱 Spring 🌵 🌵 Cactus 🗺 🗺 World Map 🏖 🏖 Beach with Umbrella 🌊 🌊 Great Wave 🧜 🧜 Mermaid 🐟 🐟 Fish 🦀 🦀 Crab 🐙 🐙 octopus 🐳 🐳 Spouting Whale 🐋 🐋 Blue Whale 🐬 🐬 Dolphin 🎣 🎣 Fishing 🐚 🐚 Shell 𓂀 𓂀 Eye of Horus

📚 📚 Books ✏️ ✏️ Pencil 📏 📏 Straight Ruler 📐 📐 Triangle Square 🔍 🔍 Magnifying Glass 🔬 🔬 Microscope ⚗️ ⚗️ Alembic ⛰ ⛰ Mountain 🏌 🏌 Golfer ⛳ ⛳ Golf ⚜️ ⚜️ Fleur-de-Lis 🏰 🏰 Castle 📓 📓 Notebook 🗒 🗒 Spiral Pad 📈 📈 Chart Rising 💈 💈 Barber Pole ⚛️ ⚛️ Atom 🔮 🔮 Crystal Ball 🕉 🕉 Om ⚡ ⚡ High Voltage 🌈 🌈 Rainbow 🐩 🐩 Poodle

🇺🇸 🇺🇸 US Flag U+S 🇬🇧 🇬🇧 Gr. Brit. Flag G+B 🇨🇳 🇨🇳 China Flag C+N 🇫🇷 🇫🇷 France F+R

🇯🇵 🇯🇵 Japan J+P 🇨🇦 🇨🇦 Canada C+A 🇰🇷 🇰🇷 Korean K+R 🇨🇭 🇰🇷 Switz. C+H

NOTE: The Flag Symbols are not well supported by some browsers.

Velocity
v = Δx ⁄ Δt v = Δx &frasl; Δt

Acceleration
a = Δv ⁄ Δt a = Δv &frasl; Δt
a = Δx ⁄ Δt² a = Δx &frasl; Δt²

Momentum
ρ = mv ρ = mv

Kinetic Energy
E_k = ½mv² E<sub>k</sub> = mv²

Einstein's Energy ≡ Mass Equivalency Formula
e = mc² e = mc²

Heisenberg Uncertainty Principle
Δx Δp > h Δx Δp > h
ΔE Δt > h ΔE Δv > h

Lorentz Transform Factor
1/√(1- v²/c²)
1/√<span style="text-decoration: overline;">(1- v²/c²) </span>

Wheeler's Quantum Foam Prediction
As Δt → 0 E → photon + e^- + e⁺ → E
As Δ<i>t</i> → 0     E → photon + e<sup>-</sup> + e<sup>+</sup> → E

Planck's Constant
ħ = 1.054571596 x 10^-34 kg m² s^-1
ħ = 1.054571596 x 10<sup>-34</sup> kg m<sup>2</sup> s<sup>-1</sup>

Imaginary Number (𝒾)
𝒾 = √-1 𝒾 = √<span style="text-decoration: overline;">-1 </span>
𝒾² = -1 𝒾² = -1

Euler's Formula
e^π𝒾 = -1 e<sup>π𝒾</sup> = -1

Writing Fractions

top

bottom

<div class="fbox"><div class="ftop">
top </div><div>
bottom </div></div>

.fbox {
font: 24px times;
color: #ffffff;
font-style: italic;
text-align: center;
min-width: 30px;**
display: inline-block;
position: relative;
top: 16px;
}

.ftop {
border-bottom: 2px solid #ffffff;
}

.fbox

.ftop

<div>

** The min-width property adjusts the width automatically!

Writing Integrals

a ∫ b ƒ(x) dx

<span style="position: relative; top: 16px; font-size: 50%;">a</span> ∫<span style="position: relative; top: -20px; font-size: 50%;">b</span> &fnof;(x) dx

The following CSS classes format the elements used for the Integral and its parts…

.int {
font: 48px times;
font-style: italic;
color: #ffffff;
}
.int:after {
content: "\222b";
}

.intbtm {
font: 16px times;
font-style: italic;
color: #ffffff;
position: relative;
top: 22px;
}

.intbtm-n {
font: 16px times;
font-style: italic;
color: #ffffff;
position: relative;
top: 22px;
left: 16px;
}

.inttop {
font: 16px times;
font-style: italic;
color: #ffffff;
position: relative;
top: -38px;
left: 12px;
}

L ists, both Ordered <ol> (1, 2, 3, …) and Unordered <ul> (• • • …) can be coded to style the color, font, replace markers with an image or emoji, and more. Add the following codes to a referenced CSS stylesheet. The class name to reference is preceeded by a period, e.g. .fav and .glyph.
The .glyph Class can use ANY of the thousands of Unicode Symbols & Emoji Symbols. So Cool!

<ul> UNordered List Types and Markers

disc (default)
circle
square
none

.redck { list-style: none; color: #00ffff; }
.redck li::before { position: relative; left: -10px; content: "\2713"; color: #ff0000; }

One
Two
Three
Four

<ul> Image Markers

CSS
.fav { list-style-image: url('favicon_sm.png'); }
.fav li { color: #0088ff; font: 22px times; font-style: italic; }

HTML
<ul class="fav">

The above results in the following display.

List Item one
List Item two
List Item three
List Item four

<ul> Glyph Markers

CSS
.robot {list-style: none }
.robot li::before {
position: relative; left: -10px; content: "\1f916"; }

HTML
<ul class="robot">

The above results in the following display.

List Item one
List Item two
List Item three
List Item four

<ol> Ordered List Types

O rdered Lists <ol> can have a variety of marker types. Identation is automatic. Here is the CSS Code

<ol> types…
decimal (default) 1. 2. 3. 4. 5.
decimal-leading-zero 01. 02. 03. 04. 05.
upper-alpha A. B. C. D. E.
lower-alpha a. b. c. d. e.
lower-roman i. ii. iii. iv. v.
upper-roman I. II. III. IV. V.
lower-greek α. β. γ. δ. ε.
upper-greek Α. Β. Γ. Δ. Ε.
cjk-ideographic (Mandarin) 一. 二. 三. 四. 无.

B egin an Ordered List <ol> with a specific number this way: <ol start="12">

M ake BOLD MARKERS this way: ol.className li::marker { font-weight: bold; }

List with BOLD Markers

Item one
Item two
Item three

<li> List Item Indenting

A lso CSS can control how List Items <li> indent. Options are inside or outside (default). Nested lists will indent automatically.

Outside List (default)

List Item one
List Item two
List Item three

Inside List

List Item one
List Item two
List Item three

Inside style="padding-left: 20px;

List Item one
List Item two
List Item three

T ables can be coded to style the color, font, background, etc. Add the following codes to a referenced CSS stylesheet. The class name to reference is immediately AFTER the period, in this case .tblred

To remove ALL remnant borders use this:
border-collapse: collapse;

tr is a table row
th is a table heading cell
td is a table data cell

CSS
table.tblred { margin: 0 auto; }
table.tblred th { width: 100px; height: 30px; border-bottom: 2px solid #00ffff; color: #ffffff; text-align: center; font-weight: bold; }
table.tblred td { width: 100px; height: 30px; background: #ff0000; color: #ffffff; text-align: center; }

HTML
<table class="tblred">

The above results in the following display.

One Two Three Four

123 456 789 3.1416

xyz zyx abc 2.6181

One	Two	Three	Four
123	456	789	3.1416
xyz	zyx	abc	2.6181

Adding border-collapse: collapse; results in the following display.

One Two Three Four

123 456 789 3.1416

xyz zyx abc 2.6181

One	Two	Three	Four
123	456	789	3.1416
xyz	zyx	abc	2.6181

Table Captions

Table Caption for This 5 Column Table
One	Two		Four	Five
123	456		789	3.1416
xyz	zyx		abc	2.6181

T

he <caption> tag defines a table caption which always spans the entire Table width.
The tag must be inserted immediately FOLLOWING the first <table> tag.
Captions respond well to CSS class formatting. Here is the code for the above 5 Column Table. The 3rd column TH and TD are defined with "border: none;".

.tabcap { color: #ff9d80; font: 30px times; font-style: italic; text-align: center; padding-bottom: 6px; }

<table class="table5">
<caption class="tabcap">Table Caption for 5 Column Table</caption>
tr th & td coding...
</table>

DO NOT USE colspan=" " to add a Title to a Table. Borders will not function properly.

P seudo Classes are Next Level CSS coding that apply to special states of HTML Elements. There are many Pseudo Classes but I will discuss just a few. First up is the very useful :hover Pseudo Class.

CSS
table.tblred2 td:hover { background: #0000ff; }

The above changes apply when a cursor hovers over a table data cell of a table class ".tblred2". Try it!

One Two Three Four

123 456 789 3.1416

xyz zyx abc 2.6181

One	Two	Three	Four
123	456	789	3.1416
xyz	zyx	abc	2.6181

The :hover Pseudo Class is especially useful for highlighting hyperlinks.

CSS
.linkbox:hover { color: #00ffff; }
.linkbox:hover .dot { background: #0000ff; }

HTML
<a href="#null">
<div class="linkbox">
<div class="dot"></div> This is a null link (hover over me)
</div ! --- end linkbox >
</a>

:nth-child( )

C hild Elements belong to their Parent HTML group, e.g. the List Items <li> in an Ordered List <ol>. Individual child elements can be styled using CSS. The first child element is indexed as n = 1.

CSS
ol li:nth-child(odd) { } This styles all odd List Items
ol li:nth-child(even) { } This styles all even List Items
ol li:nth-child(An + B) { } List Items whose Index number = (An + B) A, B

ol li:nth-child(3n) This styles every 3rd List Item
ol li:nth-child(3n + 1) Every List Item after 3rd List Item (e.g. 4, 7, 10, …)

H ere is the :nth-child() Pseudo Class used in an Ordered List, but it also works for UNordered List.

CSS
ol.alt li:nth-child(odd) { color: #fdb700; }
ol.alt li:nth-child(even) { color: #0099ff; }

HTML
<ol class="alt">

The above results in the following display.

List Item one
List Item two
List Item three
List Item four

U se the following :nth-child() Pseudo Class to style a table's data cells in alternating rows.

CSS
table.tblred3 tr:nth-child(odd) td { background: #0077ff; }
table.tblred3 tr:nth-child(even) td { background:#0000ff; }

The above results in the following display. (Row 1 is Index n = 1 which uses th and are unaffected)

One Two Three Four

123 456 789 3.1416

xyz zyx abc 2.6181

789 543 321 1.4141

zzy zxx pdq 1.732

One	Two	Three	Four
123	456	789	3.1416
xyz	zyx	abc	2.6181
789	543	321	1.4141
zzy	zxx	pdq	1.732

U se the following :nth-child() Pseudo Class to style a table's data cells in columns of specific colors.

CSS
table.tblred4 tr td:nth-child(1) { background: #ff0000; }
table.tblred4 tr td:nth-child(2) { background: #0000ff; }
table.tblred4 tr td:nth-child(3) { background: #00aa00; }
table.tblred4 tr td:nth-child(4) { background: #aa00aa; }

The above results in the following display. (Row 1 is Index n = 1 which uses th and are unaffected)

One Two Three Four

123 456 789 3.1416

xyz zyx abc 2.6181

789 543 321 1.4141

zzy zxx pdq 1.732

One	Two	Three	Four
123	456	789	3.1416
xyz	zyx	abc	2.6181
789	543	321	1.4141
zzy	zxx	pdq	1.732

T he :nth-child() of an :nth-child() can be used to target a Single Data Cell.

CSS
table.special tr:nth-child(3) td:nth-child(3) { background: #ff0000; }

One Two Three Four

123 456 789 3.1416

xyz zyx abc 2.6181

789 543 321 1.4141

zzy zxx pdq 1.732

One	Two	Three	Four
123	456	789	3.1416
xyz	zyx	abc	2.6181
789	543	321	1.4141
zzy	zxx	pdq	1.732

T he latest version of CSS is CSS3. The NEW ::before and ::after Pseudo Classes use double colons which distinguish the Pseudo Class as relating to an element's content. These are very useful for inserting content like Copyright declarations since one single change in the CSS file can update every instance of the element throughout the website.

I n a CSS file I have the following code. Any content that is not text must use the Glyph Codes. e.g. \00a9 is the code for the copyright symbol, \00a0 is a non-text space.

CSS
.copy1 {
color: #ff0000;
text-align: center;
font: 18px arial, helvetica, sans serif;
font-style: italic;
}

All eXtended Unicodes can be used in the Pseudo Classes ::before and ::after as content in Glyph code.

e.g. to insert an earth symbol (🌎) as a Glyph, use the coding after the x and add a backslash before.

🌎 = \1f30e

T he CSS filter style controls how colors and images can be modified. Values other than pixels can be in percentage or 0-1. For multiple filters, separate each filter with a space.

Original

grayscale(1) contrast(1.5)

filter: blur(px); TEXT BLUR = 1px

filter: brightness(%); BRIGHT TEXT (2)

filter: contrast(%); <1 less contrast, >1 more contrast

filter: drop-shadow(horiz-px vert-px blur-px color); Use *.png only

filter: grayscale(%); (1) generates a black and white image

filter: invert(%); (100%) all colors inverted

filter: opacity(%); (0) transparent, (1) opaque

filter: saturate(%);

filter: sepia(%);

Multiple filters...
filter: brightness(1.5) grayscale(1) contrast(1.5);

T he default Transform Origin (0,0) is at the upper left corner of the element.
Elements can be Transformed in all 3 dimensions.
Distances are defined using px, %, or offset-keywords.

X Position origin changes can be defined in px, %, or as left, center, right

Y Position origin changes can be defined in px, %, or as top, center, bottom

Z Position origin changes must be defined in px

Transform Origin:

transform-origin: x-offset-keyword | y-offset-keyword | z-offset ;

transform-origin: right bottom 2cm; // z dimension is 2cm

transform-origin: center bottom; // same as 50% 100%

transform-origin: 50% 244px 10px; // center in x distance, 244px in y distance, 10px in z distance

Transform: Rotate

Default is to rotate about a Z-axis (i.e. rotates the x-y plane ClockWise).

transform: rotate(45 deg); // rotation is ClockWise 45°

transform: rotateX(45 deg); // rotation is ClockWise 45° about the X axis

transform: rotateY(45 deg); // rotation is ClockWise 45° about the Y axis

Transform: Translate

transform: translate(100px, 50%); // 100px right, 50% down

Flip Horizontal or Vertical

transform: scaleX(-1); // Flip Horizontal

transform: scaleY(-1); // Flip Vertical

√ (radical, square root) √	³√ (cube root) <sup>3</sup>√ ∛ ∛
√ 2 (square root of 2) <span style="position: relative; top: 2px;">√</span><span style="text-decoration: overline;"> 2 </span>

ƒ (function of) &fnof;	ƒ(x) (function of x) &fnof;(x)
ƒ′ (prime, 1^st derivative) &fnof;′	ƒ′′ (dbl prime, 2^nd derivative) &fnof;′′

∂ (partial derivitive) ∂	∂x (partial derivitive of x) ∂x
∫ (integral) ∫	∫∫∫ (triple integral) ∫∫∫

dx ⁄ dt (derivative of x with respect to time) dx &frasl; d<i>t</i>
^dx⁄_dt <i><sup>dx</sup>&frasl;<sub>dt</sub></i>
∂x ⁄ ∂t (partial derivative of x with respect to time) ∂x &frasl; ∂<i>t</i>
^∂x⁄_∂t <i><sup>∂x</sup>&frasl;<sub>∂t</sub></i>

∇ (a NABLA symbol, the vector derivative or gradient, of a scalar field.) del math ∇
⧸ (a SOLIDUS symbol, compare to a forward slash / ) ⧸
σ_x (standard deviation of x values) (Bell Curve) σ<sub>x</sub>

Ø (Diameter) Ø	7 (7 for mathematicians) <del>7</del>
∠ (angle) &ang;	⊥ (perpendicular) &perp;
≠ (not equal to) ≠ \u2260 (esc code)	≈ (approximately equal to) ≈
= (equal to) =	≡ (equivalent to) &equiv;
< (less than) <	> (greater than) >
≤ (less than or equal to) ≤	≥ (greater than or equal to) ≥
{ (left brackets) {	} (right brackets) }
→ (approaches) →	∞ (infinity) ∞
± (plus or minus) ±	∓ (minus or plus) &mnplus;
! (factorial) e.g. 5! = 5 x 4 x 3 x 2 x 1	… (ellipsis) …
² (squared) ²	³ (cubed) ³
H₂0 use of <sub> for subscript	a² use of <sup> for superscript
½ ⅓ ⅔ (fractions) ½ &frac13; &frac23;	¼ ¾ ⅝ (fractions) ¼ ¾ &frac58;
Schrödinger (with ö umlaut) Schrödinger	^d⁄_dx <i><sup>d</sup>&frasl;<sub>dx</sub></i>
⁷⁄₁₆ <i><sup>7</sup>&frasl;<sub>16</sub></i>	^sin⁄_cos <i><sup>sin</sup>&frasl;<sub>cos</sub></i>