The Rabbittian Library of Code/

Border

This code creates a border around a segment of code. These are possible the border types: Solid Dashed Groove Inset Double Dotted Ridge Outset
Basic code:
<div style="border:{{{Rim width as NUMBERpx}}} {{{Rim style}}} {{{Rim color}}};">{{{Content}}}</div>
Example Code:	Example Code Result:
<div style="border:5px Ridge Purple;"> Some stuff </div>	Some stuff

Corner rounding

This code curves the corners of a border.
Basic code:
<div style="border-radius:{{{Curve of the corners as NUMBERex}}};">{{{Content}}}</div>
Example Code:	Example Code Result:
<div style="border:3px Solid Purple; border-radius:2ex;"> You must ALWAYS use this WITH a border, or it won't do anything. </div>	You must ALWAYS use this WITH a border, or it won't do anything.

Space around the edge

Padding

This code creates an area between the edge of the border and the beginning of it's contents. Extra space inside the box. (Top and bottom padding are default; side padding is not.)
Basic code:
<div style="padding:{{{Padding width as NUMBERpx}}};">{{{Content}}}</div>
Example Code:	Example Code Result:
<div style="border:3px Solid Purple; padding:30px;"> A padding of 30px, with a simple border so you can see. </div>	A padding of 30px, with a simple border so you can see.

Margin

This code creates an area between the edge of the border and the space outside the border. Extra space outside the box.
Basic code:
<div style="margin:{{{Margin width as NUMBERpx}}};">{{{Content}}}</div>
Example Code:	Example Code Result:
<div style="border:3px Solid Purple; margin:30px;"> A margin of 30px, with a simple border so you can see. </div>	A margin of 30px, with a simple border so you can see.

Shorthand

• margin: 30px 70px;

• 30px for top and bottom, 70px for left and right

• margin: 35px 70px 50px;

• 35px for top, 70px for right and left, and 50px for bottom

• margin: 35px 70px 50px 90px;

• 35px for top, 70px for right, 50px for bottom, and 90px for left

Mix and match

Different sides

This code gives side details to only one side of the box. (Top, bottom, left, right.)
Basic code:
<div style="{{{Border/padding/margin}}}-{{{Top/bottom/left/right}}}:{{{Details}}};">{{{Content}}}</div>
Example Code:	Example Code Result:
<div style="border-top:3px Solid Purple; border-left:3px Dotted Purple; padding-left:10px; margin-right:50px;"> Look at all these various sides. Usually, you want to use this kind of code with more rhyme and reason. </div>	Look at all these various sides. Usually, you want to use this kind of code with more rhyme and reason.

Different corners

This code gives corner details to only one corner of the box.
Basic code:
<div style="border-{{{top/bottom}}}-{{{left/right}}}-radius:{{{number}}}em;">{{{Content}}}</div>
Example Code:	Example Code Result:
<div style="border:3px Solid Purple; border-top-left-radius:3em; border-top-right-radius:0em; border-bottom-left-radius:0em; border-bottom-right-radius:3em;"> When you're using this code, you usually want to do something like this, so it's symmetrical or something, and it's not just all crazy. </div>	When you're using this code, you usually want to do something like this, so it's symmetrical or something, and it's not just all crazy.

Transform

Rotate

This code rotates a box
Basic code:
<div style="transform:rotate({{{number}}}deg);">{{{Content}}}</div>
Example Code:	Example Code Result:
<div style="border:3px Solid Purple; transform:rotate(-10deg);"> Positive degrees tilt it clockwise, while negative degrees tilt it counterclockwise. </div>	Positive degrees tilt it clockwise, while negative degrees tilt it counterclockwise.

Side skew

This code makes a box slanted along the sides (the X axis).
Basic code:
<div style="transform:skewX({{{number}}}deg);">{{{Content}}}</div>
Example Code:	Example Code Result:
<div style="border:3px Solid Purple; transform:skewX(-20deg);"> Using positive degrees will skew it the other way. </div>	Using positive degrees will skew it the other way.

Horizontal skew

This code makes a box slanted along the top and bottom (the Y axis).
Basic code:
<div style="transform:skewY({{{number}}}deg);">{{{Content}}}</div>
Example Code:	Example Code Result:
<div style="border:3px Solid Purple; transform:skewY(-20deg);"> Using positive degrees will skew it the other way. </div>	Using positive degrees will skew it the other way.

Both skew

This code makes a box slanted along both axises.
Basic code:
<div style="transform:skew({{{X num}}}deg, {{{Y num}}}deg);">{{{Content}}}</div>
Example Code:	Example Code Result:
<div style="border:3px Solid Purple; transform:skew(-30deg, 10deg);"> Can you tell which number refers to which? </div>	Can you tell which number refers to which?

Shadow/glow

This code gives the area a glow. The first number refers to over what range it fuzzles out. The second number refers to how far it goes before it begins to fuzzle out.
Basic code:
div style="box-shadow:0 0 {{{NUMBERpx}}} {{{NUMBERpx}}} {{{Color}}};">{{{Content}}}</div>
Example Code:	Example Code Result:
<div style="box-shadow:0 0 10px 3px Purple;"> A 0 0 10px 3px glow is very traditional. </div>	A 0 0 10px 3px glow is very traditional.

Box size

Box height

This code gives the box a set size.
Basic code:
<div style="overflow:auto; height:{{{NUMBERpx}}};">{{{Content}}}</div>
Example Code:	Example Code Result:
<div style="overflow:auto; height:100px; border:3px Solid Purple;"> A simple border so you can see how big the box is. </div>	A simple border so you can see how big the box is.

Box width

This code makes a box narrower than a full page width. (It can' also be used to make it wider, but then the sides cut it off and you can't see past the natural edge, so don't do that.)
Basic code:
<div style="width:{{{NUMBER% or NUMBERpx}}};">{{{Content}}}</div>
Example Code:	Example Code Result:
<div style="width:60%; border:3px Solid Purple;"> 60% means 60% of the available width. Here that's 60% of this example box it's in. Usually it's a full 60% of the page. With a simple border so you can see it. </div>	60% means 60% of the available width. Here that's 60% of this example box it's in. Usually it's a full 60% of the page. With a simple border so you can see it.

Alignment

This code aligns text to the left, center, or right. (I mean, you could align it to the left, but since that's the default I'm not sure why you'd do that.)
Basic code:
<div style="text-align:{{{Left/center/right}}};">{{{Content}}}</div>
Example Code:	Example Code Result:
<div style="text-align:Right;"> Right aligned text </div>	Right aligned text