Difference between revisions of "Minecraft Wiki:Sandbox"

From Minecraft Wiki
Jump to: navigation, search
(this is a public sandbox. If you wish to experiment changes without having them wiped, create a sandbox in your userspace (eg. "User:(Insert username here)/sandbox"))
Tag: Replaced
(Undo revision 1856576 by BDJP007301 (talk) Restored)
Tag: Undo
Line 6: Line 6:
 
* Feel free to try your editing skills below *
 
* Feel free to try your editing skills below *
 
-->
 
-->
  +
  +
=CSS=
  +
== Gradients ==
  +
=== Linear gradients ===
  +
{|
  +
| <div style=" border:1px black solid; border-radius: 10px; color: white; background-image: linear-gradient(red, yellow); margin: 5px; height: 100px; width: 100px">
  +
From red at top to yellow at bottom
  +
</div>
  +
| <div style=" border:1px black solid; border-radius: 10px; color: black; background-image: linear-gradient(to right, yellow, cyan); margin: 5px; height: 100px; width: 100px">
  +
From yellow at left to cyan at right
  +
</div>
  +
| <div style=" border:1px black solid; border-radius: 10px; color: white; background-image: linear-gradient(to bottom left, blue, lime); margin: 5px; height: 100px; width: 100px">
  +
From blue at top right to green at bottom left
  +
</div>
  +
| <div style=" border:1px black solid; border-radius: 10px; color: white; background-image: linear-gradient(112deg, red, cyan); margin: 5px; height: 100px; width: 100px">
  +
From red at top left to cyan at bottom right, at 112<sup>o</sup>
  +
</div>
  +
| <div style=" border:1px black solid; border-radius: 10px; color: black; background-image: linear-gradient(yellow, cyan, magenta); margin: 5px; height: 100px; width: 100px">
  +
From yellow at top to cyan at middle to magenta at bottom
  +
</div>
  +
| <div style=" border:1px black solid; border-radius: 10px; color: black; background-image: linear-gradient(to right, yellow 0%, lime 60%, pink 100%); margin: 5px; height: 100px; width: 100px">
  +
From yellow at left to green at middle (60%) to pink at right
  +
</div>
  +
| <div style=" border:1px black solid; border-radius: 10px; color: black; background-image: repeating-linear-gradient(yellow 0%, magenta 25%); margin: 5px; height: 100px; width: 100px">
  +
From yellow at top and magenta at bottom, repeated 4 times
  +
</div>
  +
|}
  +
  +
=== Radial gradients ===
  +
  +
{|
  +
| <div style=" border:1px black solid; border-radius: 10px; color: white; background-image: radial-gradient(red, yellow); margin: 5px; height: 81px; width: 144px">
  +
From red at centre to yellow at edges
  +
</div>
  +
| <div style=" border:1px black solid; border-radius: 10px; color: white; background-image: radial-gradient(blue, magenta, red); margin: 5px; height: 81px; width: 144px">
  +
From blue at centre to magenta to red at edges
  +
</div>
  +
| <div style=" border:1px black solid; border-radius: 10px; color: black; background-image: radial-gradient(gold 0%, magenta 35%, cyan 100%); margin: 5px; height: 81px; width: 144px">
  +
From gold at centre to magenta (35%) to cyan at edges
  +
</div>
  +
| <div style=" border:1px black solid; border-radius: 10px; color: black; background-image: radial-gradient(circle, red, cyan, lime); margin: 5px; height: 81px; width: 144px">
  +
From red at centre to cyan to lime at edges, in a circle.
  +
</div>
  +
| <div style=" border:1px black solid; border-radius: 10px; color: black; background-image: radial-gradient(closest-side at 65% 75%, red, cyan, lime); margin: 5px; height: 81px; width: 144px">
  +
From red at centre to cyan to lime at edges, to the closest side at 65% and 75%.
  +
</div>
  +
|-
  +
| <div style=" border:1px black solid; border-radius: 10px; color: black; background-image: radial-gradient(farthest-side at 65% 75%, red, cyan, lime); margin: 5px; height: 81px; width: 144px">
  +
From red at centre to cyan to lime at edges, to the farthest side at 65% and 75%.
  +
</div>
  +
| <div style=" border:1px black solid; border-radius: 10px; color: black; background-image: radial-gradient(closest-corner at 65% 75%, red, cyan, lime); margin: 5px; height: 81px; width: 144px">
  +
From red at centre to cyan to lime at edges, to the closest corner at 65% and 75%.
  +
</div>
  +
| <div style=" border:1px black solid; border-radius: 10px; color: black; background-image: radial-gradient(farthest-corner at 65% 75%, red, cyan, lime); margin: 5px; height: 81px; width: 144px">
  +
From red at centre to cyan to lime at edges, to the farthest corner at 65% and 75%.
  +
</div>
  +
|}
  +
  +
== Borders ==
  +
Borders are made using <code>border{-Position (optional)}: {Weight} {Color} {Type};</code>
  +
=== Weights ===
  +
{| class="wikitable"
  +
|+Borders
  +
! Weight
  +
! Example
  +
|-
  +
| {{frac|1|4}}px
  +
| <div style=" border:0.25px black solid; border-radius: 10px; background: white; margin: 5px; height: 100px; width: 100px"></div>
  +
|-
  +
| {{frac|1|2}}px
  +
| <div style=" border:0.5px black solid; border-radius: 10px; background: white; margin: 5px; height: 100px; width: 100px"></div>
  +
|-
  +
| {{frac|3|4}}px
  +
| <div style=" border:0.75px black solid; border-radius: 10px; background: white; margin: 5px; height: 100px; width: 100px"></div>
  +
|-
  +
| 1px
  +
| <div style=" border:1px black solid; border-radius: 10px; background: white; margin: 5px; height: 100px; width: 100px"></div>
  +
|-
  +
| 1{{frac|1|2}}px
  +
| <div style=" border:1.5px black solid; border-radius: 10px; background: white; margin: 4px; height: 100px; width: 100px"></div>
  +
|-
  +
| 2px
  +
| <div style=" border:2px black solid; border-radius: 10px; background: white; margin: 4px; height: 100px; width: 100px"></div>
  +
|-
  +
| 3px
  +
| <div style=" border:3px black solid; border-radius: 10px; background: white; margin: 4px; height: 100px; width: 100px"></div>
  +
|-
  +
| 4px
  +
| <div style=" border:4px black solid; border-radius: 10px; background: white; margin: 3px; height: 100px; width: 100px"></div>
  +
|-
  +
| 5px
  +
| <div style=" border:5px black solid; border-radius: 10px; background: white; margin: 3px; height: 100px; width: 100px"></div>
  +
|-
  +
| 6px
  +
| <div style=" border:6px black solid; border-radius: 10px; background: white; margin: 3px; height: 100px; width: 100px"></div>
  +
|-
  +
| 8px
  +
| <div style=" border:8px black solid; border-radius: 10px; background: white; margin: 2px; height: 100px; width: 100px"></div>
  +
|-
  +
| 10px
  +
| <div style=" border:10px black solid; border-radius: 10px; background: white; margin: 2px; height: 100px; width: 100px"></div>
  +
|-
  +
| 12px
  +
| <div style=" border:12px black solid; border-radius: 10px; background: white; margin: 2px; height: 100px; width: 100px"></div>
  +
|-
  +
| 16px
  +
| <div style=" border:16px black solid; border-radius: 10px; background: white; margin: 1px; height: 100px; width: 100px"></div>
  +
|-
  +
| 24px
  +
| <div style=" border:24px black solid; border-radius: 10px; background: white; margin: 1px; height: 100px; width: 100px"></div>
  +
|-
  +
| 32px
  +
| <div style=" border:32px black solid; border-radius: 10px; background: white; margin: 0px; height: 100px; width: 100px"></div>
  +
|-
  +
| 48px
  +
| <div style=" border:48px black solid; border-radius: 10px; background: white; margin: 0px; height: 100px; width: 100px"></div>
  +
|}
  +
  +
=== Types ===
  +
Based on 3 px, grey
  +
{| class="wikitable"
  +
|+Borders
  +
! Type
  +
! Example
  +
|-
  +
| dotted
  +
| <div style=" border:3px gray dotted; border-radius: 10px; background: white; margin: 5px; height: 100px; width: 100px"></div>
  +
|-
  +
| dashed
  +
| <div style=" border:3px gray dashed; border-radius: 10px; background: white; margin: 5px; height: 100px; width: 100px"></div>
  +
|-
  +
| solid
  +
| <div style=" border:3px gray solid; border-radius: 10px; background: white; margin: 5px; height: 100px; width: 100px"></div>
  +
|-
  +
| double
  +
| <div style=" border:3px gray double; border-radius: 10px; background: white; margin: 5px; height: 100px; width: 100px"></div>
  +
|-
  +
| groove
  +
| <div style=" border:3px gray groove; border-radius: 10px; background: white; margin: 5px; height: 100px; width: 100px"></div>
  +
|-
  +
| ridge
  +
| <div style=" border:3px gray ridge; border-radius: 10px; background: white; margin: 5px; height: 100px; width: 100px"></div>
  +
|-
  +
| inset
  +
| <div style=" border:3px gray inset; border-radius: 10px; background: white; margin: 5px; height: 100px; width: 100px"></div>
  +
|-
  +
| outset
  +
| <div style=" border:3px gray outset; border-radius: 10px; background: white; margin: 5px; height: 100px; width: 100px"></div>
  +
|}
  +
  +
=== Position ===
  +
Based on 1 px, black
  +
{| class="wikitable"
  +
|+Borders
  +
! Position
  +
! Example
  +
|-
  +
| Top
  +
| <div style=" border-top:1px black solid; background: white; margin: 5px; height: 100px; width: 100px"></div>
  +
|-
  +
| Bottom
  +
| <div style=" border-bottom:1px black solid; background: white; margin: 5px; height: 100px; width: 100px"></div>
  +
|-
  +
| Left
  +
| <div style=" border-left:1px black solid; background: white; margin: 5px; height: 100px; width: 100px"></div>
  +
|-
  +
| Right
  +
| <div style=" border-right:1px black solid; background: white; margin: 5px; height: 100px; width: 100px"></div>
  +
|}
  +
  +
== Sizes ==
  +
{| class="wikitable"
  +
|+Size
  +
! Size
  +
! Horzional
  +
! Vertical
  +
|-
  +
| 10x5px
  +
| <div style=" border:1px black solid; border-radius: 1px; background: white; margin: 5px; height: 5px; width: 10px"></div>
  +
| <div style=" border:1px black solid; border-radius: 1px; background: white; margin: 5px; height: 10px; width: 5px"></div>
  +
|-
  +
| 20x15px
  +
| <div style=" border:1px black solid; border-radius: 3px; background: white; margin: 5px; height: 15px; width: 20px"></div>
  +
| <div style=" border:1px black solid; border-radius: 3px; background: white; margin: 5px; height: 20px; width: 15px"></div>
  +
|-
  +
| 40x30px
  +
| <div style=" border:1px black solid; border-radius: 5px; background: white; margin: 5px; height: 30px; width: 40px"></div>
  +
| <div style=" border:1px black solid; border-radius: 5px; background: white; margin: 5px; height: 40px; width: 30px"></div>
  +
|-
  +
| 100x60px
  +
| <div style=" border:1px black solid; border-radius: 10px; background: white; margin: 5px; height: 60px; width: 100px"></div>
  +
| <div style=" border:1px black solid; border-radius: 10px; background: white; margin: 5px; height: 100px; width: 60px"></div>
  +
|-
  +
| 160x90px
  +
| <div style=" border:1px black solid; border-radius: 10px; background: white; margin: 5px; height: 90px; width: 160px"></div>
  +
| <div style=" border:1px black solid; border-radius: 10px; background: white; margin: 5px; height: 160px; width: 90px"></div>
  +
|-
  +
| 240x150px
  +
| <div style=" border:1px black solid; border-radius: 10px; background: white; margin: 5px; height: 150px; width: 240px"></div>
  +
| <div style=" border:1px black solid; border-radius: 10px; background: white; margin: 5px; height: 240px; width: 150px"></div>
  +
|-
  +
| 320x200px
  +
| <div style=" border:1px black solid; border-radius: 10px; background: white; margin: 5px; height: 200px; width: 320px"></div>
  +
| <div style=" border:1px black solid; border-radius: 10px; background: white; margin: 5px; height: 320px; width: 200px"></div>
  +
|-
  +
| 512x320px
  +
| <div style=" border:1px black solid; border-radius: 10px; background: white; margin: 5px; height: 320px; width: 512px"></div>
  +
| <div style=" border:1px black solid; border-radius: 10px; background: white; margin: 5px; height: 512px; width: 320px"></div>
  +
|}
  +
  +
{{DISPLAYTITLE:Sandbox}}

Revision as of 12:25, 24 February 2021

Minecraft Wiki Sandbox
[Expand/Collapse]
[Purge]
Minecraft Wiki:SandboxTemplate:SandboxModule:Sandbox

Shortcut

MCW:SB

This is the Minecraft Wiki sandbox. You can experiment with making edits on this page. To edit this page, click the "Edit" tab (or the pencil button in mobile view) at the top of the page, or click here. After making your changes, you can preview them by clicking the "Show preview" button below the edit box, and save them by clicking the "Save page" button in the same place.

Note that changes made here are not kept, since this page is only meant for testing. If you have an account and are logged in, you can create subpages of this page (e.g. Minecraft Wiki:Sandbox/Temporary testing page) for longer-term projects, though these may still be deleted after a period of inactivity. Additionally, if you're registered, you can create a personal sandbox in your userspace where you can experiment without worrying that your changes will be wiped.

CSS

Gradients

Linear gradients

From red at top to yellow at bottom

From yellow at left to cyan at right

From blue at top right to green at bottom left

From red at top left to cyan at bottom right, at 112o

From yellow at top to cyan at middle to magenta at bottom

From yellow at left to green at middle (60%) to pink at right

From yellow at top and magenta at bottom, repeated 4 times

Radial gradients

From red at centre to yellow at edges

From blue at centre to magenta to red at edges

From gold at centre to magenta (35%) to cyan at edges

From red at centre to cyan to lime at edges, in a circle.

From red at centre to cyan to lime at edges, to the closest side at 65% and 75%.

From red at centre to cyan to lime at edges, to the farthest side at 65% and 75%.

From red at centre to cyan to lime at edges, to the closest corner at 65% and 75%.

From red at centre to cyan to lime at edges, to the farthest corner at 65% and 75%.

Borders

Borders are made using border{-Position (optional)}: {Weight} {Color} {Type};

Weights

Borders
Weight Example
14px
12px
34px
1px
112px
2px
3px
4px
5px
6px
8px
10px
12px
16px
24px
32px
48px

Types

Based on 3 px, grey

Borders
Type Example
dotted
dashed
solid
double
groove
ridge
inset
outset

Position

Based on 1 px, black

Borders
Position Example
Top
Bottom
Left
Right

Sizes

Size
Size Horzional Vertical
10x5px
20x15px
40x30px
100x60px
160x90px
240x150px
320x200px
512x320px