Website Coding Tips

Introduction ~ Basic Web Files
I   write out the code for my entire website by hand. I DO NOT use ANY website creation software, just a simple text editor. I actually enjoy doing this. I prefer to use CSS (Cascading Style Sheets) to control the HTML (Hyper Text Markup Language) elements whenever possible. This way I can effect changes to my entire website by altering one small CSS file. I've listed some of my coding here for those who are curious. This page is also a reference I use for myself. If you need an online source for HTML & CSS I suggest here w3schools.com

T wo suggested files for a webpage are a CSS file to control styles, and an HTML file with the page content.

mywebsite.css
body {
    font: 18px arial;
    color: #0000ff;
    background: #f1e9d2;
    text-align: justify;
    width: 960px;
}

.title {
    font: 24px times;
    color: #ff0000;
    text-align: center;
}

index.html
<html>
<head>
    <title>Home Page</title>
    <link rel="stylesheet" type="text/css" href="mywebsite.css">
</head>

<body>
<div class="title">Welcome</div>
<p>
Here I will post all manner of interesting things including text and pictures.
</body>
</html>

My Sections Coding
H ere is the coding required for this very block and it's title. Any extra spaces, tabs, or extra lines are Ignored by web browsers, so the formatting I use is fairly standard and makes the code easier to read and adjust. In a CSS file (a text file with a .css extension), I have written these two blocks of code.

.frameblue {
border: 3px solid #00ffff;
border-radius: 30px;
box-shadow: 0px 0px 30px 15px #0088ff;
text-align: justify;
padding: 0px 30px 30px 30px;
}

.sectitle {
font-size: 180%;
color: #ffffff;
position: relative;
top: -24px;
text-align: center;
background-color: transparent;
text-shadow: 1px 1px #000000,2px 2px #000000,3px 3px #00ffff;
-webkit-filter: drop-shadow(10px 0px 10px #000000);
}

Then, in the HTML file I simply reference them and add my title:
<div class="frameblue">
<div class="sectitle">My Sections Coding</div>
All inside content
</div>

Shadow Effects
S hadows make web layouts come alive. They generate nice 3-D effects, and I'm all about 3D is Cool.
FYI, I choose to make my background black because color photos stand out better and I believe a white screen is just too hard on the eyes.

Text Shadow Coding
O ptions are single or mutliple text shadows and the offsets can be negative, which will give the impression of INDENTED text when applied against a colored background. I use the negative offset on all my menu buttons. My Menu Buttons also have a :hover mode that changes the styling so the buttons appear to be pushed.

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

Examples:
Text-Shadow - single       Text-Shadow - multiple       My Text Shadow Coding :
text-shadow: 1px 1px #000000,2px 2px #000000,3px 3px #00ffff;
<div class="navlocal" style="width: 320px; text-align: center; margin-left: 360px;"><a href="#button">3DisCool Navigation Button Example</a></div>

Box Shadow Coding
Box Shadow Coding
box-shadow: 10px 10px 10px 10px #00ffff inset;   (X-offset Y-offset Spread Fuzz Color Inset) Inset is optional
Examples:

Box Shadow
Normal
X, Y Offset

Box Shadow
Normal
Zero Offset

Box Shadow
Using optional 'Inset'
Zero Offset

Multiple Box Shadows
You can have multiple box-shadows too. Separate each definition with a comma:
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;
I have defined the above parameters in a CSS file so that I can easily use it as follows:
class="rainbowframe"

Multiple Box Shadows
class="rainbowframe"

Drop Shadow Coding
Drop Shadow Coding
For this to work your image must have an 'Alpha' channel (transparent area). A png file works greeat.
-webkit-filter: drop-shadow(10px 10px 10px #00ffff);   (X-offset Y-offset Spread Color)
The same image, two different ways:

Drop-Shadow Style

Box-Shadow Style

 Section Title Coding

F or my Section Title Coding I use BOTH text-shadows AND drop-shadows. This makes for a cool 3D effect, especially when placed on top of other elements. The text-shadows give the text thickness and the drop-shadows make the text seem to float.

font-size: 180%;
font-weight: bold;
color: #ffffff;
position: relative;
top: -24px;
text-align: center;
background-color: transparent;
text-shadow: 1px 1px #000000,2px 2px #000000,3px 3px #00ffff;
-webkit-filter: drop-shadow(10px 0px 10px #000000);

3D Text
Making 3D Anaglyph In-Line Text
F or making the text pop out or in, I first write the text using a lightened CYAN (#88ffff), then add a simple X-OFFSET Text-Shadow using the color Red (#ff0000). Thus the text stands OUT (or IN) using anaglyph glasses. Making the text Bold & Italic and increasing the letter spacing by 2 pixels (2px) helps too. Here is the code:

<span style="color: #00ffff; font-style: italic; font-weight: bold; text-shadow: 3px 0px 0px #ff0000; letter-spacing: 2px;"><b><i>Shadows for Making 3D Anaglyph Text</i></b></span>

For efficiency I have placed all this code in a CSS file and can easily reference it thus:
<span class="text3d">Making 3D Anaglyph In-Line Text</span>

3D Anaglyph Title
To insert the above "3D Anaglyph Title" over a greyed background line I use the following code referencing two codes in a CSS file. Since I want the Title to appear to hover over a line, I add a drop-shadow.

<div class="secline3dleft"></div> This inserts a horizontal grey line faded to transparency on the right. It will appear flat on the screen.

<div class="sectitle3d">3D Anaglyph Title</div> This controls how the text looks (a larger 'times' font, lightened cyan color text, red text-shadow, black drop-shadow, & the text position relative to the line).

Here is my special Red/Blue Anaglyph Button, using Text-Shadows & Drop-Shadows in conjunction with a HOVER sub-command. Here is the coding I use to insert the above 3D Button. The style coding is in a CSS file.

<span class="nav3dbutton">&darr; Link Button in 3D</span>

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.

To allow text to flow around an image, such as the ELLIPSE above, ADD the following CSS style parameters to the DIV that displays the IMAGE. NOTE, the DIV needs to be some other shape than rectangular.

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.

To allow text to flow around a CUSTOM POLYGON as in the above example, ADD the following CSS style parameters to the DIV that displays the IMAGE. The IMAGE must be a *.png file with appropriate deleted areas.

shape-outside: polygon(153px 0, 306px 250px, 0 306px, 153px 0); ↓ see notes below
shape-margin: 30px;

NOTES on the Polygon coordinates definitions:
• 0,0 is the upper left point of the rectangular <div> element
• X is →
• Y is ↓
• 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
Borders Styles
HTML <div> Basics:

MARGIN ~ Positions the <div>
BORDER ~ Surrounds 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...

NOTES:
Set the "border-style" property first.
border-style 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: ridge
border-style: ridge;
border-color: #ff0000 #00ff00 #ffff00 #0000ff;
border-style: (mixed)
border-style: dotted dashed solid double;
border-color: #ff0000 #00ff00 #ffff00 #0000ff;
Reflections & Border Radius
I   prefer to give my enclosing blocks and all my photos a border RADIUS. I just think they look better. Pictures appear as if you are looking through the black page. Adding a Radius is very easy. Here are two methods.

border-radius: 30px;
border-radius: 100%;

I   like to display my main COIN images using a REFLECTION. I think this effect makes the Coins stand out nicely and not appear so flat. The coding is a little tricky.

-webkit-box-reflect: below 10px
-webkit-linear-gradient(transparent, transparent 85%, white 100%);

Reflected Text is Cool
I   think Reflected Text is cool but the coding is a little tricky so I prefer not to use it. Each element must have it's own special coding. A more consistent effect can be achieved with Images. Here is all the CSS & HTML code for the Reflected Text effect shown on the right. →

CSS
.reflected {
position: relative;
font-style: italic;
}

.reflected:after {
content: 'Reflected Text is Cool';/* this must match the HTML text */
display: block;
position: absolute;
bottom: -30px;
-webkit-transform: scaleY(-1);
background: -webkit-linear-gradient(90deg, #00ffff, #002222, #000000);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

HTML
<div class="reflected">Reflected Text is Cool</div>
Gradients
G radients can make a page really come alive if used carefully. Gradients 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. Here are a few examples (your browser must be "-webkit" compliant to see them). Their coding is in yellow.

Fire and Heat Ice and Cold Horizontal

Here's the code for the Horizontal Gradient to give you an idea of the options:
background: -webkit-linear-gradient(180deg, #ff0000, #00ff00, #0000ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent;

Here is a linear vertical background gradient:
background-image: -webkit-linear-gradient(90deg, #00ffff, #0000ff);
Here is a linear horizontal background gradient using the color transparent at either end:
background-image: -webkit-linear-gradient(180deg, transparent, #0000ff, transparent);
If we reduce the <div> height to 2 or 3 pixels we can essentially produce gradient lines, like these:

<div style="height: 3px; background-image: -webkit-linear-gradient(180deg, transparent, #00ffff, #ffff00, #00ffff, transparent);"></div>
I have placed the above code in a CSS file so that I may write the following to insert a special gradient line.
<div class="secline1"></div>

Here are two special   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>

Here is a basic 3-color radial gradient:
background: -webkit-radial-gradient(#ff0000, #00ff00, #0000ff);
Here is an angled linear gradient using the color 'transparent':
background: -webkit-linear-gradient(100deg, #0000ff, #0000ff, transparent, #0000ff, transparent, #0000ff, #0000ff);
Here is a special repeating, angled linear gradient:
background-image: repeating-linear-gradient(45deg, #ffff00 0px, #ffff00 25px, #000000 25px, transparent 50px, #a9a9a9 50px);
My 'GoToTop' Button
M
any of my pages are long, like this one. I have a lot to share. To speed up navigation, I sometimes include a Small Button that floats near the bottom of the extra long pages. Clicking on it will take you instantly to the top of the page. The image is stored in a root location so it's easily accessed. It is 20% transparent (0.8 opaque) and has a vertical (z-index) value that ensures it is on top of everything else on the page. YES, elements can have a three-dimensional position too. I also display it with a box-shadow. Here is the coding:
CSS
.gototop {
position: fixed;
bottom: 10px;
left: 48%;
width: 50px;
height: 50px;
border-radius: 50px;
background-image: url('up.png');
background-size: 100%;
opacity: .8;
z-index: 999;
box-shadow: 0px 0px 10px 10px #ffffff;
}
HTML
<a name="top"></a> (This is inserted immediately after the <body> tag)

<a class="gototop" href="#top"></a> (This is inserted just after I load the main menu)

Cross-Fade Effect
⬆ Please mouse over the Latin above ⬆
T he Cross-Fade effect is quite nice and I enjoy using it. I think it's pretty slick. I am happy to share the coding I use. You must have two images of exactly the same size. Basically, on Hover, the two image's opacity changes. As you can see most of the coding is in the CSS (Cascading Style Sheet). The four "transition" duplicates make the code workable for different web browsers.
CSS
.crossfade {position:relative; width: 400px; height: 48px; margin: 0 auto;}
.crossfade img {position: absolute; left: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;}
.crossfade img.top:hover {opacity: 0;}
HTML
<div class="crossfade">
<img src="latin_translate.png">
<img class="top" src="latin.png">
</div>
Horizontal Lines
I   choose to use the <div> tag and NOT the <hr> tag for horizontal rules. This gives me more controls for styling. You only need to style the top or the bottom border. It can have different thicknesses, lengths, colors, line-styles, shadows, and even contain text & characters. The following are examples with their coding.
<div style="border-bottom: 3px solid #ffff00;"></div>
<div style="border-bottom: 3px dashed #ffff00;"></div>
<div style="border-bottom: 2px dotted #ffff00;"></div>
<div style="border-bottom: 6px double #ffff00;"></div>
 ● TITLE ● 
<div style="border-bottom: 3px solid #00ffff; text-align: center;">
<span style="color: #00ffff; position: relative; top: 12px; background-color: #000000;">&nbsp; &#9679; TITLE &#9679; &nbsp;</span>
</div>
For a WAVY line I have used the tilde (~) enlarged and repeated many times, then control the letter-spacing.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<div style="font-size: 200%; letter-spacing: -5px; color: #00ffff;">~~~~~~~~~~~~~~~~~~~~~</div>

Another option is to repeat the Wavy Line Unicode Symbol, &#x3030;
〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰

<div style="border-bottom: 4px dashed #ffff00; -webkit-filter: drop-shadow(4px 4px 1px #ffff00);"></div>

Magnify on Hover
T his is a cool effect and I use it when displaying my featured coins. Whenever the mouse hovers over the coin it magnifies it. I have set mine to magnify by 2.0x. Here is the CSS & HTML magnification code for the effect. Only the -webkit code is shown. I am also using the z-index property here to ensure the coin stays on top when magnified.

CSS
.img_coin {
-webkit-transform: scale(1,1);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
}

.img_coin:hover {
-webkit-transform: scale(2.0,2.0);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
position: relative;
z-index: 99;
}

HTML
<img class="img_coin" src="filename.png">

Flip on Hover
T his is a VERY cool effect. I have used it only once while displaying my High-Relief 1921 Peace Dollar. Hover over the coin to see the effect. There is a lot of CSS code but I think the results are worth the effort. I have only shown the -webkit code here. Here is my code.

CSS

.flip-container {
-webkit-perspective: 1000;
}

.flip-container:hover .flipper,
.flip-container.hover .flipper {

-webkit-transform: rotateX(180deg);
}

.flip-container, .front, .back {
width: 300px;
height: 150px;       /* half of height */
}

.flipper {
position: relative;
-webkit-transition: 1.5s;
-webkit-transform-style: preserve-3d;
}

.front, .back {
position: absolute;
top: -150px;       /* half of height */
left: 0;

-webkit-backface-visibility: hidden;
}

.front {
z-index: 2; /* this is required for Firefox browsers */
}

.back {
-webkit-transform: rotateX(180deg);
}

HTML
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" style="background: url('front-image.png') 0 0 no-repeat;"></div>
<div class="back" style="background: url('back-image.png') 0 0 no-repeat;"></div>
</div>
</div>

Math Symbols Code

GREEK ALPHABET (abridged)
α (alpha, lower case) &alpha; α (1st angle, variable, Alpha particle He2+)
β (beta, lower case) &beta; β (2nd angle, variable, Beta particle e-)
γ (gamma, lower case) &gamma; γ (3rd angle, variable, Gamma radiation (e-), Lorentz Transform Factor)
Δ (Delta, upper case) &Delta; Δ (difference operator, finite difference)
θ (theta, lower case) &theta; θ (real variable or angle)
λ (lambda, lower case) &lambda; λ (wavelength, radioactive decay)
μ (mu, lower case) &mu; μ (coeffecient of friction, viscosity)
π (pi, lower case) &pi; π (ratio of circumference of circle to diameter)
ρ (rho, lower case) &rho; ρ (momentum, density)
Σ (Sigma, upper case) &Sigma; Σ (summation)
σ (sigma, lower case) &sigma; σ (standard deviation)
τ (tau, lower case) &tau; τ (time, torque, opacity)
Φ (Phi, upper case) &Phi; Φ (golden ratio, 1.6180339887…)
φ (phi, lower case) &phi; φ (reciprocal of the golden ratio, 1 ⁄ Φ)
Ψ (Psi, upper case) &Psi; Ψ (wave function in Schrödinger's equation)
Ω (Omega, upper case) &Omega; Ω (electrical resistance)
ω (omega, lower case) &omega; ω (angular velocity)

𝜶 (alpha) &#x1d736; Alpha
𝜷 (beta) &#x1d737; Beta
𝛾 (gamma) &#x1d6fe; Gamma, Lorentz Transform
𝛥 (Delta) &#x1d6e5; Delta, Change
𝘦 (e) &#x1d626; e, Euler's Number, 2.7182818284590…
𝜙 (Phi) &#x1d719; Phi, Golden Ratio, 1.6180339887498…
𝛹 (Psi) &#x1d6f9; Psi, Wave Function
𝜆 (lambda) &#x1d706; Lamda, Wavelength
𝜇 (mu) &#x1d707; Mu, Muon
𝝆 (rho) &#x1d746; Rho, momemtum
𝜋 (pi) &#x1d70b; Pi, Pion, Pi Muon, 3.1415926535897…
𝛴 (Sigma) &#x1d6f4; Sigma, total sum
𝜃 (Theta) &#x1d703; Theta, angle
𝜏 (tau) &#x1d70f; Tau, Tauon, Tau Muon
𝜐 (upsilon) &#x1d710; Upsilon, Neutrino
𝛀 (Omega) &#x1d6c0; Omega, resistance, final
𝝏 (partial) &#x1d74f; Partial Differential

Ĥ (H circumflex) &#292; Ĥ (total energy of a quantum system)
(h-bar) &planck; OR &hbar; (Planck's Constant divided by 2π)
(for all) &forall; (there exists) &exist;
(porportional to) &prop; (therefore) &there4;

(radical, square root) &radic; 3 (cube root) <sup>3</sup>&radic;
(square root of 2) &radic;<span style="text-decoration: overline;">2&nbsp;</span>

ƒ (function of) &fnof; ƒ(x) (function of x) &fnof;(x)
ƒ′ (prime, 1st derivative) &fnof;&prime; ƒ′′ (dbl prime, 2nd derivative) &fnof;&prime;&prime;
(partial derivitive) &part; ∂x (partial derivitive of x) &part;x
(integral) &int; ∫∫∫ (triple integral) &int;&int;&int;
dx ⁄ dt (derivative of x with respect to time) dx &frasl; d<i>t</i>
dxdt <i><sup>dx</sup>&frasl;<sub>dt</sub></i>
∂x ⁄ ∂t (partial derivative of x with respect to time) &part;x &frasl; &part;<i>t</i>
∂x∂t <i><sup>&part;x</sup>&frasl;<sub>&part;t</sub></i>
σx (standard deviation of x values) (Bell Curve)
&sigma;<sub>x</sub>

Ø (Diameter) &Oslash; 7 (7 for mathematicians) <del>7</del>
(angle) &ang; (perpendicular) &perp;
(not equal to) &ne; (approximately equal to) &asymp;
= (equal to) = (equivalent to) &equiv;
< (less than) &lt; > (greater than) &gt;
(less than or equal to) &le; (greater than or equal to) &ge;
(approaches) &rarr; (infinity) &infin;
± (plus or minus) &plusmn; (minus or plus) &mnplus;
! (factorial) e.g. 5! = 5 x 4 x 3 x 2 x 1 (ellipsis) &hellip;
² (squared) &sup2; ³ (cubed) &sup3;
H20 use of <sub> for subscript a2 use of <sup> for superscript
½ ⅓ ⅔ (fractions) &frac12;   &frac13;   &frac23; ¼ ¾ ⅝ (fractions) &frac14;   &frac34;   &frac58;
Schrödinger (with ö umlaut) Schr&ouml;dinger ddx <i><sup>d</sup>&frasl;<sub>dx</sub></i>
716 <i><sup>7</sup>&frasl;<sub>16</sub></i> sincos <i><sup>sin</sup>&frasl;<sub>cos</sub></i>

Other Useful Symbols Code
§ (section symbol) &sect; (bullet) &bull;
(password dot) &#9679; · (multiplication dot) &middot;
© (copyright) &copy; (star) &#9733;
(line over any letter) o&#772; (overline) &oline;
(long dash) &mdash; (check mark) &#10003;
(up block arrow) &#x21ea; (horizontal arrow) &harr;
(left arrow) &larr; (right arrow) &rarr;
(long left arrow) &xlarr; (long right arrow) &xrarr;
(up arrow) &uarr; (down arrow) &darr;
(left hand) &#9756; (right hand) &#9758;
(down) &#11015; (up) &#11014;
(reload, clockwise) &#8635; (reload, counter clockwise) &#8634;
(double right) &rArr; (double left) &lArr;
(left up) &#8598; (right up) &#8599;
(left down) &#8601; (right down) &#8600;
(lightning bolt) &#8623; (up & down) &#8693;
🔄 (loop arrow) &#128260; (stop hand) &#9995;
(recycle outlined) &#9842; (recycle type) &#9850;
(recycle filled) &#9851; ♳ ♴ ♵ (recycle)  &#9843;  &#9844;  &#9845;
$ (U.S. Dollar) $ (place before, $50) (China Yuan) &#20803; (place after, 50)
£ (English Pound) &pound; (place before, £50) (Euro) &euro; (place before, 50)
¥ (Japanese Yen) &yen; (place before, e.g. ¥50) ¢ (Cent) &cent; (place after, 50¢)
(Indian Rupee) &#8377; (place before, e.g. 50) ฿ (Thai Baht) &#3647; (place before, e.g. ฿50)
(number symbol) &#8470; Use font: 100% times; (smiley face) &#9786;
(Celsius) &deg;C (Fahrenheit) &deg;F
° (degree) &deg; °K (Kelvin) &deg;K
(fraction slash) &frasl; (sun, circle symbol) &#9737;
Å (Angström) &Aring; ö ü (umlaut) &ouml; &uuml;
á é í ó ú (acute) &aacute;   &eacute;   etc. à è ì ò ù (grave) &agrave;   &egrave;   etc.
ā ē ī ō ū (macron) &amacr;   &emacr;   etc. ă ĕ ĭ ŏ ŭ (breve) a&#774;   e&#774;   etc.
ñ Ñ (tilde) &ntilde;   &Ntilde; ¡ ¿ (inverted) &iexcl;   &iquest;
ū d̄ (overline) u&#772;   d&#772; (wavy line) &#x3030;   〰〰〰〰
Select Emoji Symbol Codes
Emojipedia Unicode Symbols
Math Symbology Unicode Symbols

🔗 <span class="chain">&#128279; </span>

For eXtended Unicodes (U+), add an x after the &#
U+1F60E → → &#x1f60e;

The cool thing about eXtended Unicodes is that they can be used in Pseudo CSS Classes as Glyph content.

Example…
To insert an earth 🌎 (&#x1f30e;) as Glyph Content, use the coding after the x and add a backslash before
🌎 = \1f30e

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

© &#xa9; Copyright 😊 &#x1f60a; Smiley with Smiling Eyes 😎 &#x1f60e; Smiling Face w/ Sunglasses 🤔 &#x1f914; Thinking Face 🤫 &#x1f92b; Hushing Face 🤯 &#x1f92f; Exploding Head 😜 &#x1f61c; Crazy Face 😮 &#x1f62e; Face with Open Mouth 🤠 &#x1f920; Cowboy 🌞 &#x1f31e; Sun with Rays 🥶 &#x1f976; Cold Face 👋 &#x1f44b; Hand Wave &#x270b; Raised Hand 👍 &#x1f44d; Thumb Up 👇 &#x1f447; Finger Down 🖖 &#x1f596; Vulcan Salute 🙏 &#x1f64f; Namaste 👨‍🚀 &#x1f468;&#x200d;&#x1f680; Astronaut 🤖 &#x1f916; Robot Face 📌 &#x1f4cc; Push Pin 💡 &#x1f4a1; Light Bulb 📱 &#x1f4f1; Mobile Phone 🖥 &#x1f5a5; Computer 📀 &#x1f4c0; DVD 🚧 &#x1f6a7; Construction 🧰 &#x1f9f0; Toolbox
🌟 &#x1f31f; Glowing Star &#x2728; Sparkles 💥 &#x1f4a5; Collision 🛸 &#x1f6f8; UFO 🚀 &#x1f680; Rocket 🛰 &#x1f6f0; Satelite 🌎 &#x1f30e; Earth 🌏 &#x1f30f; Earth Asia 🌐 &#x1f310; Globe w/ Meridians 🌒 &#x1f312; Crescent Moon 🔭 &#x1f52d; Telescope 🧭 &#x1f9ed; Compass 📡 &#x1f4e1; Satellite Antenna 🥤 &#x1f964; Milkshake 🍿 &#x1f37f; Popcorn 🎥 &#x1f3a5; Movie Camera 📽 &#x1f4fd; Film Projector 🎞 &#x1f39e; Film 📸 &#x1f4f8; Camera with Flash 🎬 &#x1f3ac; Clapper Board 📺 &#x1f4fa; Television 📖 &#x1f4d6; Open Book 📜 &#x1f4dc; Scroll 🏛 &#x1f3bd; Classical Building &#x26e9; Shinto Shrine 🛑 &#x1f6d1; Stop Sign
🍚 &#x1f35a; Cooked Rice 🥢 &#x1f962; Chop Sticks 🍛 &#x1f35b; Curry Rice 🍜 &#x1f35c; Steaming Bowl 🥟 &#x1f95f; Dumpling 🍗 &#x1f357; Poultry Leg 🍲 &#x1f372; Pot of Food 🍵 &#x1f375; Teacup &#x2615; Hot Beverage
🥠 &#x1f960; Fortune Cookie 🍤 &#x1f364; Fried Shrimp 🍣 &#x1f363; Sushi 🥡 &#x1f961; Takeout Box 🥜 &#x1f95c; Peanuts 🌽 &#x1f33d; Ear of Corn 🍅 &#x1f345; Tomato 🎏 &#x1f38f; Carp Streamer 🎎 &#x1f38e; Japanese Dolls
👲 &#x1f472; Asian Man 🐲 &#x1f432; Dragon Head &#x262f; Yin Yang🀄 &#126980; Mahjong Tile 🏮 &#x1f3ee; Red Paper Lantern
🐯 &#x1f42f; Tiger Face 🐉 &#x1f409; Dragon 🧨 &#x1f9e8; Fire Cracker 🧧 &#x1f9e7; Red Envelope 💰 &#x1f4b0; Money Bag
🌺 &#x1f33a; Hibiscus 🌹 &#x1f339; Rose 🌲 &#x1f332; Evergreen 🌴 &#x1f334; Palm 🌿 &#x1f33f; Plant 🌱 &#x1f331; Spring 🌵 &#x1f335; Cactus 🗺 &#x1f5fa; World Map 🏖 &#x1f3d6; Beach with Umbrella 🌊 &#x1f30a; Great Wave 🧜 &#x1f9dc; Mermaid 🐟 &#x1f41f; Fish 🦀 &#x1f980; Crab 🐙 &#x1f419; octopus 🐳 &#x1f433; Spouting Whale 🐋 &#x1f40b; Blue Whale 🐬 &#x1f42c; Dolphin 🦊 &#x1f98a; Fox 🐚 &#x1f41a; Shell 𓂀 &#77952; Eye of Horus
📏 &#x1f4cf; Straight Ruler 📐 &#x1f4d0; Triangle Square 🔍 &#x1f50d; Magnifying Glass 🔬 &#x1f52c; Microscope &#x2697; Alembic &#x26f0; Mountain 🏌 &#x1f3cc; Golfer &#x26f3; Golf &#x269c; Fleur-de-Lis 🏰 &#x1f3f0; Castle 📓 &#x1f4d3; Notebook 🗒 &#x1f5d2; Spiral Pad 📈 &#x1f4c8; Chart Rising 💈 &#x1f488; Barber Pole &#x269b; Atom 🔮 &#x1f52e; Crystal Ball 🕉 &#x1f549; Om &#x26a1; High Voltage 🌈 &#x1f308; Rainbow 🐩 &#x1f429; Poodle
🇺🇸 &#x1f1fa;&#x1f1f8; US Flag U+S 🇬🇧 &#x1f1ec;&#x1f1e7; Gr. Brit. Flag G+B 🇨🇳 &#x1f1e8;&#x1f1f3; China Flag C+N 🇫🇷 &#x1f1eb;&#x1f1f7; France F+R
🇯🇵 &#x1f1ef;&#x1f1f5; Japan J+P 🇨🇦 &#x1f1e8;&#x1f1e6; Canada C+A 🇰🇷 &#x1f1f0;&#x1f1f7; Korean K+R 🇨🇭 &#x1f1f0;&#x1f1f7; Switzerland C+H
NOTE: The Flag Symbols are not well supported by Unicode Glyph engines.
Chinese Character Codes
中国 China (zhōng guó) &#20013;&#22269; 美国 America (mĕi guó) &#32654;&#22269;
Dragon (lóng) &#40857; Tea (chá) &#33590;
White (bái) &#30333; Red (hōng) &#32418;
绿 Green (lü) &#32511; Blue (lán) &#34013;
你好 Hello (nĭ hăo) you good &#20320;&#22909; 谢谢 Thank You (xiè xiè) &#35874;&#35874;
崂山 Lao Shan (láo shān) &#23810;&#23665; 印度 India (yìn dù) &#21360;&#24230;
道德经 Dào dé Jīng (Book of Dao) &#36947;&#24503;&#32463; 老子 Lăo Zi &#32769;&#23376;

福禄寿 Fú Lù Shòu (Gods of Happiness, Finance, & Longevity) &#31119;&#31108;&#23551;

财神 Cái Shén (God of Wealth) &#36130;&#31070;

Fó (Buddha) &#20315; miào (Temple) &#24217; ài (Love) &#29233;

观音 Guān Yīn (Goddess of compassion and forgiveness) &#35266;&#38899;

Chinese Lunar New Years
中国干支

(zhōng guó gān zhī)
1 老鼠 Rat (lăo shŭ) &#32769;&#40736; (2020)
2 Ox (niú) &#29275; (2021)
3 Tiger (hŭ) &#34382; (2022)
4 Rabbit (tù) &#20820; (2023)
5 Dragon (lóng) &#40857; (2024)
6 Snake (shé) &#34503; (2025)
7 Horse (mă) &#39532; (2026)
8 Sheep (yáng) &#32650; (2027)
9 Monkey (hóu) &#29492; (2028)
10 公鸡 Rooster (gōng jī) &#20844;&#40481; (2029)
11 Dog (gŏu) &#29399; (2030)
12 Pig (zhū) &#29482; (2019) (2031)
Chess Symbol Codes
Outlined Solid
(White King) &#9812; (Black King) &#9818;
(White Queen) &#9813; (Black Queen) &#9819;
(White Rook) &#9814; (Black Rook) &#9820;
(White Bishop) &#9815; (Black Bishop) &#9821;
(White Knight) &#9816; (Black Knight) &#9822;
(White Pawn) &#9817; (Black Pawn) &#9823;
𝔸𝕣𝕥 𝔻𝕖𝕔𝕠 𝕃𝕖𝕥𝕥𝕖𝕣𝕤
This is just for fun. These are actually known as Mathematical Double Struck Letters, but sadly, some Capital letters and All the Numbers are not available. Numbers CAN be made if you only write them as Roman Numerals. To me they are a good example of the Art Deco style which I like very much.
The format is easy→  &letteropf;

Here is the code for the above title, "Art Deco Letters"
&Aopf;&ropf;&topf; &Dopf;&eopf;&copf;&oopf; &Lopf;&eopf;&topf;&topf;&eopf;&ropf;&sopf;

CAPITALS that are missing: C, H, N, P, Q, R, Z   They will display oddly so → ℂℍℕℙℚℝℤ

All the lowercase letters ARE available though and we can cheat a little and write the missing C & Z Upper Case letters by simply making their lower case letter bigger by 145%. This does affect line spacing however.
Normal:   𝕔 &copf;   𝕫 &zopf;
Cheating→ 𝔸𝔹𝕔𝔻𝕫

If you choose your capitals carefully though, you can still make some cool titles with only symbol's code.

𝕌𝕟𝕚𝕥𝕖𝕕 𝕊𝕥𝕒𝕥𝕖𝕤 𝕠𝕗 𝔸𝕞𝕖𝕣𝕚𝕔𝕒
𝕎𝕒𝕤𝕙𝕚𝕟𝕘𝕥𝕠𝕟   𝕁𝕖𝕗𝕗𝕖𝕣𝕤𝕠𝕟   𝕃𝕚𝕟𝕔𝕠𝕝𝕟   𝕂𝕖𝕟𝕟𝕖𝕕𝕪
Physics & Mathematics Coding

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

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

Momentum
ρ = mv      &rho; = mv

Kinetic Energy
Ek = ½mv²      E<sub>k</sub> = mv&sup2;

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

Heisenberg Uncertainty Principle
Δx Δp > h      &Delta;x &Delta;p &gt; h
ΔE Δt > h      &Delta;E &Delta;v &gt; h

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

Wheeler's Quantum Foam Prediction
As Δt → 0     E → photon + e- + e+ → E
As &Delta;<i>t</i> &#8594; 0&nbsp;&nbsp;&nbsp;&nbsp; E &rarr; photon + e<sup>-</sup> + e<sup>+</sup> &rarr; E

Planck's Constant
ħ = 1.054571596 x 10-34 kg m2 s-1
&#295; = 1.054571596 x 10<sup>-34</sup> kg m<sup>2</sup> s<sup>-1</sup>

Imaginary Number (i)
i = √-1      i = &radic;<span style="text-decoration: overline;">-1&nbsp;</span>
i² = -1       i&sup2; = -1

Euler's Formula
eπi = -1      e<sup>&pi;i</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 class="intbtm">
a</span><span class="int"></span><span class="inttop">
b
</span><span class="formula-times">
&fnof;(x) dx
</span>
n=1 ƒ(x) dx
<span class="intbtm-n">
n=1
</span><span class="int"></span><span class="inttop">
&infin;
</span><span class="formula-times">
&fnof;(x) dx
</span>
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;
}
List Items
L  ists, both Ordered <ol> (1, 2, 3, …) and Unordered <ul> (• • • …) can be coded to style the color, font, replace bullets 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, in these cases .fav and .glyph.
The .glyph Class can use ANY of the thousands of Unicode Symbols & Emoji Symbols. Cool.

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.

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

HTML
<ul class="glyph">

The above results in the following display.

O rdered Lists <ol> & Unordered Lists <ul> have display options and can be inserted inside other Lists. Identation is automatic. Here is the CSS Code

<ol style="list-style-type: type;">

<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)   一. 二. 三. 四. 无.

<ul style="list-style-type: type;">

<ul> types…

  • disc (default)
  • circle
  • square
A lso CSS can control how List Items <li> indent. Options are inside or outside (default).

<ul style="list-style-type: square; list-style-position: inside; color: #00ff00;">

Also this will indent individual list items ⇒ <li style="padding-left: 50px;">
Tables
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

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.

OneTwoThreeFour
1234567893.1416
xyzzyxabc2.6181

: Pseudo Classes
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!

OneTwoThreeFour
1234567893.1416
xyzzyxabc2.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>

These changes apply when a cursor hovers over any part of this hyperlink, which includes the dot and the text.

: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) { }   This styles all List Items whose Index number equals (An + B) A, B integers.

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

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.

  1. List Item one
  2. List Item two
  3. List Item three
  4. List Item four
I   use 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)

OneTwoThreeFour
1234567893.1416
xyzzyxabc2.6181
7895433211.4141
zzyzxxpdq1.732

I   use 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)

OneTwoThreeFour
1234567893.1416
xyzzyxabc2.6181
7895433211.4141
zzyzxxpdq1.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; }

OneTwoThreeFour
1234567893.1416
xyzzyxabc2.6181
7895433211.4141
zzyzxxpdq1.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;
}

.copy1::before {
content: "\00a9 \00a0 2019 By 3DisCOOL.com - All Rights Reserved"
}

HTML
<div class="copy1"></div>

The above simple HTML code results in the following display.

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 (&#x1f30e;) as a Glyph, use the coding after the x and add a backslash before.

🌎 = \1f30e
My Color Codes
Parchment
#f1e9d2
Dark Khaki
#beb864
Olive
#808100
Copper Verdigris
#39666f
My Blue
#0088ff
(Button 1)
#8bc7d9
(Button 2)
#2e88a3
(Button 3)
#183e4d
Blue
#0000ff
Cyan
#00ffff
My Teal
#008b8b
Navy
#000088
Red
#ff0000
Magenta
#ff00ff
Dark Violet
#9400d8
Deep Pink
#ff1895
Green
#008000
Permanent Green
#0ac92b
Lime
#00ff00
Pacifica Green
#00ddaa
My Metals & Browns
My Gold
#fdb700
My Copper
#ed7000
My Brass
#e0c080
My Steel
#c0c0c0
Peru
#cd853f
Sienna
#a0522d
My Brown
#996510
Brown
#a52a2a
My Dark Mode Greys
Mydarkgrey
#33393d
Mygrey
#6c7174
Mylightgrey
#959a9d
Grey (system)
#808080 (50%)

My Website Background Text ⟶ #cccccc: (80% White)
My Art Deco Colors
Tealish
#20aaaa
Pinkish
#db8888
Pacifica Green
#00ddaa
Deep Pink
#ff1895
My Graphing Colors
Blue
#0000ff
My Blue
#00aaff
Copper Verdigris
#39666f
My Teal
#008b8b
My Copper
#ed7000
Olive
#808100
Sienna
#a0522d
Brown
#a52a2a
The Visible Spectrum ~ ROYGBIV
Red
#ff0000
Orange
#ff7f00
Yellow
#ffff00
Green
#00ff00
Blue
#0000ff
Indigo
#4b0080
Violet
#9400d0
SVG - Scalable Vector Graphics
SVG   are Inline Graphics.

I Love You

<svg height="100" width="200">
<rect x="5" y="5" width="180" height="80" style="fill: #0099ff; stroke: #ffff00; stroke-width: 2px;" />
</svg>

<svg height="100" width="300">
<polygon points="220,0 300,80 170,100 20,60" style="fill; #fdb700; stroke: #ff00ff; stroke-width:2px;" />
</svg>

<svg height="100" width="100">
<circle cx="50" cy="50" r="40" style="fill: #ff0000; stroke: #ffffff; stroke-width:2px;" />
</svg>

<svg height="100" width="100">
<ellipse cx="50" cy="50" rx="20" ry="40" style="fill: #0088ff; stroke: #ff00ff; stroke-width:2px;" />
</svg>

<svg height="100" width="100">
<text x="0" y="50" fill="#00ffff">I Love You</text>
</svg>

<svg height="100" width="60">
<path d="M10 32 L50 32 L30 55 L30 88 L23 85 M15 55 L45 55" style="stroke: #ff00ff; stroke-width: 4px;" />
</svg>