Source Code Reference

Description

---

This blog served as a coding reference for me to easily copy and identify the designs that I want to use. Most of the examples here will be copied from another wiki.

Force debugged: ?debug=1

Border

Border Thickness

1px Style

<div style="border:1px solid #000000;">This is a 1px border.</div>

2px Style

<div style="border:2px solid #000000;">This is a 2px border.</div>

3px Style

<div style="border:3px solid #000000;">This is a 2px border.</div>

Border Color

<div style="border:2px solid #6665FE;">This border is made using hex codes.</div>

Border Patterns

Solid Style

<div style="border:2px solid #000000;">This is a solid border.</div>

Dash Style

<div style="border:2px dashed #000000;">This is a dashed border.</div>

Dotted Style

<div style="border:2px dotted #000000;">This is a dotted border.</div>

Double Style

<div style="border:2px double #000000;">This is a double border.</div>

Border Roundness

0em Style

<div style="border:2px solid #000000;border-radius:0em;">This is a 0em border.<br /></div>

0.5em Style

<div style="border:2px solid #000000;border-radius:0.5em;">This is a 0.5em border.<br /></div>

1em Style

<div style="border:2px solid #000000;border-radius:1em;">This is a 1em border.<br /></div>

5em Style

<div style="border:2px solid #000000;border-radius:5em;">This is a 5em border.<br /></div>

Text shadow

First Value - Defines if the shadow goes left or right.

• Increase value = Right
• Negative value = Left

Second Value - Defines if the shadow goes up or down.

• 0 makes an Outer Glow.
• Increase value = Down
• Negative value = Up

Third Value - Defines how blurred the shadow is.

• 0 = coply text(Double Vision)
• Increase value = Super blurred but visible

Blurred Lv 3

<span style="text-shadow: #000000 0px 3px 3px;">Example</span>

Blurred Lv 10

<span style="text-shadow: #000000 0px 3px 10px;">Example</span>

Blurred Lv 20

<span style="text-shadow: #000000 0px 3px 20px;">Example</span>

Gradient

Linear Gradient

Linear Gradient goes from up to down, left to right & vice versa.

<div style="background: linear-gradient(to right, #000000, #cccccc); color: white;">Text goes here</div>

Radial Gradient

Radial Gradient produces cicular patterns.

<div style="background:radial-gradient(#FE339A, #03E7DC);">Text goes here</div>

Templates

<div style="width:100%; height:10%; border:2px solid #1e90ff; background-color:{{{bgcolor|#9bddff}}}; color:{{{textcolor|#FE339A}}}; text-align:center;">{{{text}}}</div>

Padding

Padding-General

First Value = Top | Second value = Right | Third Value = Bottom | Fourth Value = Left

<div style="background-color:#00ffff; color:#000000; padding:2% 5% 7% 9%;">Padded text.</div>

Padding-All Sides

When padding is use with no specific direction. The first value will apply to all four sides.

<div style="background-color:#00ffff; color:#000000; padding:5%;">Padded text.</div>

Padding-Right

<div style="background-color:#00ffff; color:#000000; padding-right:5%;">Padded text.</div>

Padding-Left

<div style="background-color:#00ffff; color:#000000; padding-left:5%;">Padded text.</div>

Padding-Top

<div style="background-color:#00ffff; color:#000000; padding-top:5%;">Padded text.</div>

Padding-Down

<div style="background-color:#00ffff; color:#000000; padding-bottom:5%;">Padded text.</div>

Links

Manual Links Color

[[Main Page|<span style="color:red;">Normal Link</span>]]

Normal Link

''[[User:Blitzsparkz|<span style="color:blue;">Italic Link</span>]]''

Italic Link

'''[[Magical Girl|<span style="color:dark pink;">Bold Link</span>]]'''

Bold Link

'''''[[Light Novel|<span style="color:green;">Bold & Italic Link</span>]]'''''

Bold & Italic Link

---

Without Underline

[[Main Page|<span style="display: inline-block; color: purple;">Normal Link without underline when hover</span>]]

Normal Link without underline when hover