Minecraft Wiki
Minecraft Wiki

Warning: You are not logged in. Your IP address will be publicly visible if you make any edits. If you log in or create an account, your edits will be attributed to your username, along with other benefits.

The edit can be undone. Please check the comparison below to verify that this is what you want to do, and then save the changes below to finish undoing the edit.

Latest revision Your text
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}}

Please note that all contributions to the Minecraft Wiki are considered to be released under the CC BY-NC-SA 3.0

Cancel Editing help (opens in new window)
Please note:
  • If you do not want your writing to be edited mercilessly or redistributed by others, do not submit it.
  • Please leave a brief edit summary describing your changes to make it easier for other editors to understand them.
  • Please use the show preview button before saving changes to avoid introducing errors.