Changes

Jump to: navigation, search

Minecraft Wiki:Sandbox

10,398 bytes removed, 3 months ago
m
Undo revision 1856617 by Android 1123581321 (talk) read the header first
* 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}}
2,911

edits