Reyn's Big Test House of Fun

[Reyn]

scream i hate css

[Reyn]

list of things to do so I wont for get
- post
- finish machina like... sometime soon would be nice >:/
- update div guide because its outdated and cringe and I dont like the arbitrary categories (and theyre also? false?)

[Reyn]

Reyn's Big Test Garden of Flowers...

Alvis div! We love flowers here in the test house, right? RIGHT?

"Since I can't beam posts directly to your brain yet, this will have to suffice."

[Reyn]

OLD DIV GUIDE :)

Hello. This is a much-requested guide on how to effectively use the [div] code on RPF. Bear in mind that this guide will not 100% cover absolutely everything you can do with div, rather it will serve to display a bunch of stuff that myself and others have found to work currently. It is entirely possible for other things to be achievable with div, and I recommend sites like w3schools and css-tricks if you want to take this further (although they are for general CSS, so you might have to do some digging to find things that work with just div). If you'd rather stay on-site, then check out some of the active threads in the Testing Forum, although do be sure to ask people before copying any code from there.

If you have any questions or fun additions to this guide, feel free to post them below.

NOTE: if you use RPF dark theme, the background image section might be hard to read. I didn't want to alter the colour to fit the image because I didn't want to make the div code more complicated in a tutorial. Switch to light theme for that bit or highlight the text.

What even is a Div?
It's a fun little bit of BBCode that allows you to put in pretty much any CSS formatting that you want, and applies it to whatever's inside. If you don't know what that means... you will.

How do I use them?
The basic syntax for a div is [div=" "]TEXT[/div] with the formatting being placed between the "s. Each bit of formatting should be separated by a semicolon ; . You can put literally anything inside a div: other BBCode, images, even whole other div elements.

What can I do with them?
All of the below (and more!). You can combine them as well.

BASIC THINGS

---

The following works with hex colours (e.g. #FF0000) and colour words (e.g. red).
.

This changes the text colour.

.

This changes the background colour.

.

This changes the border colour. More on borders later.

.

Here, all 3 have been changed.

.

---

[div="color:red;"]This changes the text colour.[/div]

[div="background-color:red;"]This changes the background colour.[/div]

[div="border:red 1px solid"]This changes the border colour. More on borders later.[/div]

[div="color:blue; background-color:yellow; border:red 1px solid"]Here, all 3 have been changed.[/div]

---

You can add an image to the background of a div.

.

The background image will repeat by default, but you can turn off repeat by adding background-repeat:no-repeat. To see this in action, open the spoiler below and notice how the background doesn't repeat- it cuts off towards the end.

---

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac justo quis lectus consectetur molestie. Praesent congue eleifend mauris, vel dignissim felis posuere sed. Nullam sed hendrerit neque. Vivamus luctus tellus ullamcorper, tempus sapien vitae, lacinia lorem. Aenean facilisis nec diam ut rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque eleifend aliquet vestibulum. Fusce imperdiet lobortis molestie. Morbi eget erat velit. Nullam tristique urna nisi, ac ultrices sem aliquam id. Vestibulum nec lacus ullamcorper, ultricies ante vel, eleifend dui. Nunc condimentum pellentesque mauris in bibendum.

Quisque enim lectus, luctus et ultricies sit amet, placerat nec sapien. Duis eu ex lectus. Donec blandit eleifend orci sit amet egestas. Sed sodales massa dui, a suscipit magna dignissim ac. Phasellus sed lacus vel arcu semper commodo. Nunc non nulla rutrum turpis vulputate tempus. Aliquam congue elit a orci laoreet, ac tincidunt ipsum auctor. Quisque hendrerit purus libero, at posuere urna interdum at. Aenean convallis, nisl quis aliquam bibendum, mi orci finibus sem, nec finibus dolor dolor viverra est. Duis vulputate purus vitae erat congue, eget ultricies mi maximus. Integer luctus mauris ipsum, ut pretium odio blandit nec.

Ut placerat bibendum ex, in condimentum odio blandit eget. Curabitur vitae mauris nec justo sagittis accumsan vitae vitae erat. Maecenas aliquet tortor at ullamcorper pharetra. Donec luctus elit eget commodo ultrices. In quis sodales massa. Integer malesuada elit lacus, et gravida nulla luctus vitae. Vivamus ante ligula, accumsan quis tortor et, bibendum gravida augue. Nunc fermentum tellus a est viverra lobortis. Integer leo augue, scelerisque at aliquet vel, ullamcorper condimentum ligula.

Mauris nec tristique urna. Cras ullamcorper orci at sem tempus, in congue arcu molestie. Pellentesque luctus urna eu maximus sodales. Curabitur commodo orci metus, id maximus dolor ullamcorper non. Donec gravida aliquam justo vitae cursus. Fusce laoreet ultrices dolor, in tempor nulla tempus eu. Aliquam fringilla dui non elementum pretium. Donec ornare lorem vitae eleifend ornare. Ut rutrum massa non lectus convallis, vitae laoreet magna commodo. Aliquam erat volutpat. Vivamus pretium enim non dolor porta, a lacinia mauris hendrerit. Suspendisse venenatis neque hendrerit tempus porttitor.

Suspendisse lectus velit, ultricies quis nisl ut, volutpat vestibulum magna. Vestibulum vel rutrum justo. Pellentesque in ornare metus, pellentesque imperdiet lorem. Etiam et nulla augue. Nunc libero eros, pellentesque eget metus at, auctor ornare massa. Fusce aliquet bibendum imperdiet. Duis ac faucibus tortor, in malesuada mi. Quisque congue enim sem, quis ullamcorper nibh porttitor vel. Etiam a nisl a leo pellentesque ultricies vel sed nibh.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac justo quis lectus consectetur molestie. Praesent congue eleifend mauris, vel dignissim felis posuere sed. Nullam sed hendrerit neque. Vivamus luctus tellus ullamcorper, tempus sapien vitae, lacinia lorem. Aenean facilisis nec diam ut rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque eleifend aliquet vestibulum. Fusce imperdiet lobortis molestie. Morbi eget erat velit. Nullam tristique urna nisi, ac ultrices sem aliquam id. Vestibulum nec lacus ullamcorper, ultricies ante vel, eleifend dui. Nunc condimentum pellentesque mauris in bibendum.

Quisque enim lectus, luctus et ultricies sit amet, placerat nec sapien. Duis eu ex lectus. Donec blandit eleifend orci sit amet egestas. Sed sodales massa dui, a suscipit magna dignissim ac. Phasellus sed lacus vel arcu semper commodo. Nunc non nulla rutrum turpis vulputate tempus. Aliquam congue elit a orci laoreet, ac tincidunt ipsum auctor. Quisque hendrerit purus libero, at posuere urna interdum at. Aenean convallis, nisl quis aliquam bibendum, mi orci finibus sem, nec finibus dolor dolor viverra est. Duis vulputate purus vitae erat congue, eget ultricies mi maximus. Integer luctus mauris ipsum, ut pretium odio blandit nec.

Ut placerat bibendum ex, in condimentum odio blandit eget. Curabitur vitae mauris nec justo sagittis accumsan vitae vitae erat. Maecenas aliquet tortor at ullamcorper pharetra. Donec luctus elit eget commodo ultrices. In quis sodales massa. Integer malesuada elit lacus, et gravida nulla luctus vitae. Vivamus ante ligula, accumsan quis tortor et, bibendum gravida augue. Nunc fermentum tellus a est viverra lobortis. Integer leo augue, scelerisque at aliquet vel, ullamcorper condimentum ligula.

Mauris nec tristique urna. Cras ullamcorper orci at sem tempus, in congue arcu molestie. Pellentesque luctus urna eu maximus sodales. Curabitur commodo orci metus, id maximus dolor ullamcorper non. Donec gravida aliquam justo vitae cursus. Fusce laoreet ultrices dolor, in tempor nulla tempus eu. Aliquam fringilla dui non elementum pretium. Donec ornare lorem vitae eleifend ornare. Ut rutrum massa non lectus convallis, vitae laoreet magna commodo. Aliquam erat volutpat. Vivamus pretium enim non dolor porta, a lacinia mauris hendrerit. Suspendisse venenatis neque hendrerit tempus porttitor.

Suspendisse lectus velit, ultricies quis nisl ut, volutpat vestibulum magna. Vestibulum vel rutrum justo. Pellentesque in ornare metus, pellentesque imperdiet lorem. Etiam et nulla augue. Nunc libero eros, pellentesque eget metus at, auctor ornare massa. Fusce aliquet bibendum imperdiet. Duis ac faucibus tortor, in malesuada mi. Quisque congue enim sem, quis ullamcorper nibh porttitor vel. Etiam a nisl a leo pellentesque ultricies vel sed nibh.

.

You can change the position of the background as well. Available directions are top, bottom, left, right, center, and you can combine these (e.g. bottom left). You can also position the background using X% and Y% (e.g. 40% 20%).

.

You can also change the size of the background image, which is useful if you're using a huge image or a tiny image as a background.

.

---

[div="background-image:url(https://i.imgur.com/spcurXT.jpg);"]You can add an image to the background of a div.[/div]

[div="background-image:url(https://i.imgur.com/spcurXT.jpg);background-repeat: no-repeat;"]The background image will repeat by default, but you can turn off repeat by adding background-repeat:no-repeat.[/div]

[div="background-image:url(https://i.imgur.com/spcurXT.jpg);background-position: bottom left;"]You can change the position of the background as well. Available directions are top, bottom, left, right, center, and you can combine these (e.g. bottom left). You can also position the background using X% and Y% (e.g. 40% 20%).[/div]

[div="background-image:url(https://i.imgur.com/spcurXT.jpg);background-size:100%;"]You can also change the size of the background image, which is useful if you're using a huge image or a tiny image as a background.[/div]

---

You can align text like you can with the [align] tag. Options are left, right, center.

.

You can change the font as well. Don't ask me for a list of fonts that work, I don't know. This is a good place to start, if you want fonts that work on most devices.

.

You can change the font style. Available styles are normal, italic, oblique.

.
It is possible for you to change the font size using div... but don't. It doesn't work and it's shit. Just use the [size] tags.
.

---

[div="text-align:center;"]You can align text like you can with the [align] tag. Options are left, right, center.[/div]

[div="font-family:comic sans ms;"]You can change the font as well. Don't ask me for a list of fonts that work, I don't know.[/div]

[div="font-style: oblique;"]You can change the font style. Available styles are normal, italic, oblique.[/div]

---

This creates a border around the div.

.

The thickness of the border can be altered by changing the number in front of 'px'.

.

The border is now blue and is a dotted line.

.

You can alter the different lines on the border separately. Available lines are border-top, border-bottom, border-left, border-right.

.
The following border types are available (to my knowledge): solid, dotted, dashed, double, groove, ridge, inset, outset, hidden. To use them, write the border type after the px (e.g. [div="border: green 1px inset;"]TEXT[/div].
.

---

[div="border: 1px solid;"]This creates a border around the div.[/div]

[div="border: 3px solid;"]The thickness of the border can be altered by changing the number in front of 'px'.[/div]

[div="border: blue 3px dotted;"]The border is now blue and is a dotted line.[/div]

[div="border-top: black 1px solid; border-bottom: blue 3px dotted; border-left: yellow 2px double; border-right: red 3px dashed;"]You can alter the different lines on the border separately. Available lines are border-top, border-bottom, border-left, border-right.[/div]

---

You can make the div force a space between the border and where the text starts.

.

You can alter the amount of padding for each edge. Available edges are padding-top, padding-bottom, padding-left, padding-right.

.

---

[div="padding: 15px;"]You can make the div force a space between the border and where the text starts.[/div]

[div="padding-left:10px; padding-top: 3px; padding-bottom: 2px; padding-right: 5px;"]You can alter the amount of padding for each edge. Available edges are padding-top, padding-bottom, padding-left, padding-right.[/div]

LESS BASIC THINGS

---

You can alter the width of a div box using either % or px. It is advised that you use %, as not all monitors display px the same. This one is at 50%.

.

---

[div="width:50%;"]You can alter the width of a div box using either % or px. It is advised that you use %, as not all monitors display px the same. This one is at 50%.[/div]

---

You can float divs next to each other, if they're the right width.

This is sometimes unreliable, though.

.
Also, text wraps kinda strangely around them. I tend to use things like [color=transparent].[/color] as padding if it breaks for me.
.

---

[div="width:50%; float:left; background-color:yellow;display: inline-block;"]You can float divs next to each other, if they're the right width.[/div]
[div="width:50%; float:right; background-color:red;display: inline-block;"]This is sometimes unreliable, though.[/div]
Also, text wraps kinda strangely around them. I tend to use things like [color=transparent].[/color] as padding if it breaks for me.[/spoiler]

---

This creates a glow/shadow/blurry thing around the outside of the div.

.

This does the same but with text.

.
Both box-shadow and text-shadow use 4 values (e.g. 0px 0px 10px red). The first 2 px values are the horizontal and vertical offset- set these to 0 if you want your shadow to be perfectly centred. The last px value is the blur radius- the higher the value, the more blurred the shadow. The final value is the colour. You can use hex or colour names.
.

---

[div="box-shadow: 0px 0px 10px #ff0080;"]This creates a glow/shadow/blurry thing around the outside of the div.[/div]

[div="text-shadow: 0px 0px 10px #ff0080;"]This does the same but with text.[/div]

---

You can make a gradient as the background! This works with rgba and colour names.

They can go whichever way you please.

For your sake and for mine, please refer to this website (ww3schools) for more information on gradients. There's a lot of stuff there and I don't wanna make this section needlessly long.
.

---

[div="background: linear-gradient(red, orange, yellow, green, blue, purple);"][color=#FFFFFF][b]You can make a gradient as the background! This works with rgba and colour names.[/b][/color][/div]
[div="background: linear-gradient(to right, red, yellow, green);"][color=#FFFFFF][b]They can go whichever way you please.[/b][/color][/div]

---

You can use margins to align a div if you use the width thing as well..

margin-left:auto aligns it right, and vice versa.

.

---

[div="margin:auto;width:50%;"]You can use margins to align a div if you use the width thing as well..[/div]

[div="margin-left:auto;width:50%;"][align=right]margin-left:auto aligns it right, and vice versa.[/align][/div]

---

Using border-radius, you can make your divs have nice rounded corners. Isn't this pretty?

.

---

[div="background-color:#AAFFAA;border-radius:20px;"]Using border-radius, you can make your divs have nice rounded corners. Isn't this pretty?[/div]

---

This is an image with an invert filter.

This is an image with a grayscale filter.

This is an image with brightness and contrast filters.

All the filters you can use are: blur(10px) hue-rotate(90deg) brightness(100%) contrast(100%) grayscale(100%) invert(100%) opacity(100%) saturate(100%) sepia(100%) . Change the thing in brackets to any number you want to decrease the intensity of the filter. You can also combine filters. This affects everything inside the div INCLUDING text and background colours, so be careful.
.

---

[div="filter: invert(100%);"][img]http://wiki.bemanicn.com/images/thumb/d/d8/Nexta_ADV.png/200px-Nexta_ADV.png[/img] [color=#00FF00]This is an image with an invert filter.[/color][/div]

[div="filter: grayscale(100%);"][img]http://wiki.bemanicn.com/images/thumb/d/d8/Nexta_ADV.png/200px-Nexta_ADV.png[/img] This is an image with a grayscale filter.[/div]

[div="filter: contrast(200%) brightness(150%);"][img]http://wiki.bemanicn.com/images/thumb/d/d8/Nexta_ADV.png/200px-Nexta_ADV.png[/img] This is an image with brightness and contrast filters.[/div]

---

Oh boy, this is gonna be a tough one to illustrate.

Do you like this? Do you want to achieve this or something like it? Please, just look at the w3schools guide on blend modes. The mix-blend-mode property will apply to everything inside a div. Text, images, other divs, all of them will be affected.

If you just want the blend mode to apply to a background image, then you could use the background-blend-mode property. Just put two backgrounds in your div and set the blend mode to whatever you want. This method doesn't affect any other content inside the div!

(see?)

---

[div="background-image:linear-gradient(to left, red, blue)"][div="mix-blend-mode:multiply;"]
Do you like this? Do you want to achieve this or something like it? Please, just look at the [url=https://www.w3schools.com/cssref/pr_mix-blend-mode.asp]w3schools guide[/url] on blend modes. The mix-blend-mode property will apply to everything inside a div. Text, images, other divs, all of them will be affected.[/div][/div]

[div="background:linear-gradient(to left, magenta, cyan),url(http://www.zastavki.com/pictures/originals/2014/Space_Planet_in_the_background_galaxy_079310_.jpg);background-blend-mode:lighten;"]If you just want the blend mode to apply to a background image, then you could use the background-blend-mode property. Just put two backgrounds in your div and set the blend mode to whatever you want. This method doesn't affect any other content inside the div![/div]

EXTREMELY LESS BASIC THINGS

---

.
Skew things. Use skew(Xdeg Ydeg) and replace the X and Y with numbers.

.

The rotate thing is equally worrying. Put however many degrees you want in the rotate(?deg) thing.

.
.
.
.

Scale things. Use scale(Xdeg Ydeg) and replace the X and Y with numbers. Negative numbers mean cool mirrored text.

.
.

Matrices combine some of the possible transformation options. The parameters, in order, are: scaleX, skewY, skewX, scaleY, translateX, translateY.

Not going to lie, that's quite frightening.
.

---

[div="transform: skew(10deg, 5deg);"]Skew things. Use skew(Xdeg Ydeg) and replace the X and Y with numbers.[/div]

[div="transform: rotate(180deg);"]The rotate thing is equally worrying. Put however many degrees you want in the rotate(?deg) thing.[/div]

[div="transform: scale(1, 2)"]Scale things. Use scale(Xdeg Ydeg) and replace the X and Y with numbers. Negative numbers mean cool mirrored text.[/div]

[div="transform: matrix(1, 0.1, 0, 1, 0, 0);"]Matrices combine some of the possible transformation options. The parameters, in order, are: scaleX, skewY, skewX, scaleY, translateX, translateY.[/div]

---

This is a scrollbox. You can make this by adding overflow:auto and setting the height to a particular value in px. It only works with height in px, as far as I'm aware. As you can see, you can scroll through the text here, which is pretty cool. What do you mean this is filler? It's not filler... this isn't filler. Definitely not filler. No filler here. Nope.

.

---

[div="height:200px;width:200px;overflow:auto;"]This is a scrollbox. You can make this by adding overflow:auto and setting the height to a particular value in px. It only works with height in px, as far as I'm aware. As you can see, you can scroll through the text here, which is pretty cool. What do you mean this is filler? It's not filler... this isn't filler. Definitely not filler. No filler here. Nope.[/div]

---

You can clip the background to the text by using this code. This background, for example, is a fire gif.

.

---

[div="background-image:url(https://thumbs.gfycat.com/NastyElatedInganue-size_restricted.gif);background-position:top;background-size:100%;-webkit-background-clip: text;color: transparent;"]You can clip the background to the text by using this code. This background, for example, is a fire gif.[/div]

---

These have a ratio of 5:3:1. This one is 5...

3

1!!!

These work with other BBCode/Div code, this is just a very basic example to illustrate.

Flexbox div code: [div="display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around;"]
~ Instead of row, you can put row-reverse, column, or column-reverse.
~ Instead of nowrap, you can put wrap or wrap-reverse.
~ Instead of space-around, you can put center, flex-start, flex-end, or space-between.

In a div around each thing, you've got to include flex-grow:X, where X equals how big you want the things in to be in comparison to each other. For example, I wanted it to have a 4:1 ratio, so around the 'About Me' section, I used flex-grow:4, and around the 'My Work' section, I used flex-grow:1.

Check out the much more in-depth guide here!!!

---

[div="display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around;"]
[div="flex-grow:5; background-color:yellow"]These have a ratio of 5:3:1. This one is 5...[/div]

[div="flex-grow:3; background-color:red;color:white"]3[/div]

[div="flex-grow:1; background-color:blue;color:white"]1!!![/div][/div]

---

A

B

C

D

Allows you to make customisable grid things! This is kinda hard to explain in a little preview here, so I highly recommend checking out Illirica's excellent guide on this.

Check it out here!!!

---

[div="display:grid; grid-template-columns: 50px 50px; grid-template-rows: 50px 50px; grid-template-areas: \"TopLeft TopRight\" \"BottomLeft BottomRight\";"]
[div="grid-area:TopLeft;background-color:skyblue;"]A[/div]
[div="grid-area:TopRight;background-color:silver;"]B[/div]
[div="grid-area:BottomLeft;background-color:slategray;"]C[/div]
[div="grid-area:BottomRight;background-color:steelblue;"]D[/div]
[/div]

WEIRD THINGS

---

You can change how the cursor appears when you move the mouse over a div element. You can find the full list of cursor types here...

BUT WHY WOULD YOU WANT TO USE BORING STANDARD CURSORS WHEN YOU CAN IMPORT YOUR OWN FUN ONES??? (This can get finnicky and not want to work sometimes. If all else fails, just copy the code from this post and replace the url with your own image. Doesn't animate gifs.) Small images work best! It gets kinda glitchy when you use big ones.

---

[div="border:1px solid blue;cursor: crosshair;"]You can change how the cursor appears when you move the mouse over a div element. You can find the full list of cursor types here...

[div="cursor: url('https://piskel-imgstore-b.appspot.com/img/91dacad1-f367-11e9-a37b-33a56a54cf05.gif'), auto; border:1px solid red;"]BUT WHY WOULD YOU WANT TO USE BORING STANDARD CURSORS WHEN YOU CAN IMPORT YOUR OWN FUN ONES??? (This can get finnicky and not want to work sometimes. If all else fails, just copy the code from this post and replace the url with your own image. Doesn't animate gifs.) Small images work best! It gets kinda glitchy when you use big ones.[/div]

---

HEY! CLICK IN THE CORNER AND DRAG THIS AROUND TO RESIZE IT!




FUN, RIGHT?


You can hide all sorts of cool stuff in here.


Anyway please listen to No Guts = No Masters by öOoOoOoOoOo





I will take every opportunity I have to share whatever avant-garde metal I've been listening to. Don't test me.






Are you still going?



There's nothing here, dude.








JUST KIDDING




YOU UNLOCKED THE BONUS DUANE

---

[div="resize: both;overflow:auto;background-color:yellow;width:20%;height:150px;"]HEY! CLICK IN THE CORNER AND DRAG THIS AROUND TO RESIZE IT![/div]

[Reyn]

Welcome to the Div Guide! If you're wondering where the old one went, it's right here.

The reason for this update is that I didn't like the arbitrary "difficulty" categories in the old one, and it wasn't quite as comprehensive as I would've liked. This new one splits everything into utility categories instead, so (for example) if you want to do something cool with backgrounds, everything you need for backgrounds is in one section. Items in each category are organised by subjective "difficulty", so don't worry if you can't master everything in a single section at once. Also, there's still a basics section if you're just starting out!

For everything that involves colours, there are 3 recommended options available to you that work for every case here, unless otherwise stated: hex colours (e.g. #FF0000), colour names (e.g. red), and RGBA (e.g. rgba(255, 0, 0, 1.0)). A full list of colour names can be found here (alongside hex values for said colours), for hex I recommend the website color-hex.com (there's a colour picker at the top of the page), and for RGBA there's this tool which should give you what you want.

If you want more resources, check out the Code Resource Masterpost.

THE BASICS

---

This changes the text colour.

x

---

[div="color:red;"]This changes the text colour.[/div]

---

This changes the background colour.

x

---

[div="background-color:red;"]This changes the background colour.[/div]

---

This changes the border colour.

x

This changes the border type. Available types are: solid, dotted, dashed, double, groove, ridge, inset, outset, none, hidden.

x

This changes the border size.

x

---

[div="border:red 1px solid;"]This changes the border colour.[/div]

[div="border:red 1px dashed;"]This changes the border type.[/div]

[div="border:red 3px solid;"]This changes the border size.[/div]

---

This changes the font. Here is a good list of fonts that work with most devices on RPF.

x

---

[div="font-family:times new roman;"]This changes the font.[/div]

---

This adds a space between the edge of the div and the content.

x

You can alter the amount of padding for each edge. Available edges are padding-top, padding-bottom, padding-left, padding-right.

x

---

[div="padding:2%"]This adds a space between the edge of the div and the content.[/div]

[div="padding-left:10px; padding-top: 3px; padding-bottom: 2px; padding-right: 5px;"]You can alter the amount of padding for each edge. Available edges are padding-top, padding-bottom, padding-left, padding-right.[/div]

---

This includes all of the above elements (in different colours, of course). Separate div properties with ;!

x

---

[div="color:blue; background-color:lime; border:red 1px solid; font-family:times new roman; padding:2%"]This includes all of the above elements (in different colours, of course).[/div]

THE SPECIFICS

TEXT FORMATTING

---

This changes the text colour.

x

---

color:red;

[div="color:red;"]This changes the text colour.[/div]

---

This changes the font. Here is a good list of fonts that work with most devices on RPF.

x

---

font-family:times new roman;

[div="font-family:times new roman;"]This changes the font.[/div]

---

You can change the font style. The options are Normal...

Italic...

And Oblique!

x

---

font-style: normal | italic | oblique;

[div="font-style: normal;"]You can change the font style. The options are Normal...[/div]
[div="font-style: italic;"]Italic...[/div]
[div="font-style: oblique;"]And Oblique![/div]

---

This aligns text to the left,

centre,

and right.

You can also justify text, but it requires at least one full line to be noticeable.

---

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque, lectus a tincidunt fringilla, odio augue imperdiet urna, quis placerat sem ante sit amet mi. Integer nec odio nunc. Duis bibendum, nisi a scelerisque tincidunt, lorem turpis cursus lectus, vitae convallis sapien odio vitae velit. Ut nec odio sed eros cursus rutrum. Vivamus euismod, ante at sollicitudin porttitor, elit dolor fringilla nunc, sit amet feugiat mauris risus eu diam. Nam tellus odio, sagittis eu aliquet nec, aliquam ut neque. In sit amet rutrum quam, sollicitudin interdum lorem.

x

---

text-align: left | center | right | justify;

[div="text-align:left;"]Left.[/div]
[div="text-align:center;"]Centre.[/div]
[div="text-align:right;"]Right.[/div]
[div="text-align:justify;"]Justify.[/div]

---

You can change the font size. Either as a percentage of the default size...

...Or as a forced size using px!

([size] is better for most applications, though.)
x

---

font-size:120% | 20;

[div="font-size:120%;"]You can change the font size. Either as a percentage of the default size...[/div]
[div="font-size:20px;"]...Or as a forced size using px![/div]

---

This puts a shadow underneath the text. The first value affects the horizontal position of the shadow.

The second value affects the vertical position of the shadow.

The third value affects the blur of the shadow.

You can have multiple text shadows at once.

x

---

text-shadow:2px 0px 0px lime;

[div="text-shadow:2px 0px 0px red"]This puts a shadow underneath the text. The first value affects the horizontal position of the shadow.[/div]
[div="text-shadow:0px 2px 0px lime"]The second value affects the vertical position of the shadow.[/div]
[div="text-shadow:0px 0px 5px blue"]The third value affects the blur of the shadow.[/div]
[div="text-shadow:2px 0px 2px cyan, 0px 2px 2px yellow, -2px 0px 2px magenta;"]You can have multiple text shadows at once.[/div]

BACKGROUNDS

---

This changes the background colour.

x

---

background-color:red;

[div="background-color:red;"]This changes the background colour.[/div]

---

This adds a background image. I recommend changing the text colour as well to ensure legibility across light and dark themes.

x

You can change the position of the background. Available options are word positions (left/right/center top/bottom/center, pick any from the first and any from the second, or just one from either), and percentages (X% Y%).

x

You can change the size of the background too. You can set it to a value in px, a percentage (which will set it to a percentage of the container), cover (which makes it cover the whole container), contain (which makes sure the whole image is visible), or you could set it to two px or % values- the first will set the width, and the second will set the height! 100% is the most useful setting if you're having background issues.

x

The background image tiles (repeats) by both the X and Y axis by default, but you can change this to not repeat at all (no-repeat), repeat only on the X or the Y axis (repeat-x, repeat-y), to repeat as much as possible without clipping (space), or to stretch the image to fit the container size (round). This div is set to no-repeat, but you can only see the effect when the div is pretty large, so...

---

ARE YOU SICK OF THIS GAG YET?

ARE YOU SICK OF THIS GAG YET?

ARE YOU SICK OF THIS GAG YET?

ARE YOU SICK OF THIS GAG YET?

ARE YOU SICK OF THIS GAG YET?

ARE YOU SICK OF THIS GAG YET?

ARE YOU SICK OF THIS GAG YET?

ARE YOU SICK OF THIS GAG YET?

ARE YOU SICK OF THIS GAG YET?

ARE YOU SICK OF THIS GAG YET?

LOOK, IT DOESN'T TILE!

ARE YOU SICK OF THIS GAG YET?

ARE YOU SICK OF THIS GAG YET?

Ok. I'll stop now. Love you <3

x

---

background-image:url(https://i.imgur.com/irVSnBo.jpg);
background-position: left|right|center top|bottom|center;
background-position: 10% 10%;
background-size: 100% | 100px | cover | contain | 100% 50% | 100px 50px;
background-repeat: no-repeat | repeat-x | repeat-y | space | round;

[div="background-image:url(https://i.imgur.com/irVSnBo.jpg);color:white;"]This adds a background image. I recommend changing the text colour as well to ensure legibility across light and dark themes.[/div]

[div="background-image:url(https://i.imgur.com/irVSnBo.jpg);background-position:bottom;color:black;"]You can change the position of the background.[/div]

[div="background-image:url(https://i.imgur.com/irVSnBo.jpg);background-size:100%;color:white;"]You can change the size of the background too.[/div]

[div="background-image:url(https://i.imgur.com/irVSnBo.jpg);background-size:100%;background-repeat:no-repeat;color:white;"]Background repeat example.[/div]

---

You can make a gradient as the background! This works with rgba and colour names- NOT hex.

They can go whichever way you please. You can use words (to top/bottom/left/right), or you can input an angle (e.g. 90deg).

For your sake and for mine, please refer to this website (ww3schools) for more information on gradients. There's a lot of stuff there and I don't wanna make this section needlessly long.
x

---

background:linear-gradient(to top | bottom | left | right, cyan, yellow, magenta);
background:linear-gradient(90deg, cyan, yellow, magenta);

[div="background:linear-gradient(cyan, yellow, magenta);color:black;"]You can make a gradient as the background! This works with rgba and colour names- NOT hex.[/div]
[div="background: linear-gradient(to left, cyan, yellow, magenta);color:black;"]They can go whichever way you please. You can use words ([c]to top/bottom/left/right), or you can input an angle (e.g. 90deg).[/div][/c]

---

You can change how the background behaves when you scroll. Ain't that neat? Available options are scroll (default, will scroll with the page), fixed (will stick in place as the page scrolls), and local (will scroll with a scrollbox, more on those later).

x

---

background-attachment: scroll | fixed | local;

[div="background-image:url(https://i.imgur.com/irVSnBo.jpg);background-attachment:fixed;color:white;"]Background attachment example.[/div]

---

You can have multiple backgrounds in the same div. They can be colours, images, gradients, whatever Separate them with commas! These multiple backgrounds can have different settings/values for the above properties, separate those with commas as well!

x

---

background: linear-gradient(to left, cyan, transparent, magenta), url(https://i.imgur.com/irVSnBo.jpg);

[div="background: linear-gradient(to left, cyan, transparent, magenta), url(https://i.imgur.com/irVSnBo.jpg);color:white;"]You can have multiple backgrounds in the same div.[/div]

---

If you just want a blend mode to only apply to a background image, then you could use the background-blend-mode property. Just put two backgrounds in your div and set the blend mode to whatever you want. This method doesn't affect any other content inside the div! The parameters are the same as mix-blend-mode: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, difference, exclusion, hue, saturation, color, luminosity.

x

---

background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | difference | exclusion | hue | saturation | color | luminosity;


[div="background:linear-gradient(to left, magenta, cyan),url(http://www.zastavki.com/pictures/originals/2014/Space_Planet_in_the_background_galaxy_079310_.jpg);background-blend-mode:lighten;"]If you just want the blend mode to apply to a background image, then you could use the background-blend-mode property. Just put two backgrounds in your div and set the blend mode to whatever you want. This method doesn't affect any other content inside the div![/div]

BORDERS

---

This changes the border colour.

x

This changes the border type. Available types are: solid, dotted, dashed, double, groove, ridge, inset, outset, none, hidden.

x

This changes the border size.

x

---

border:red 1px solid | dotted | dashed | double | groove | ridge | inset | outset | none | hidden;

[div="border:red 1px solid;"]This changes the border colour.[/div]

[div="border:red 1px dashed;"]This changes the border type.[/div]

[div="border:red 3px solid;"]This changes the border size.[/div]

---

You can set the border to be an image. Y'know, if you want to. This might help.

x

---

border-image:url(https://media2.giphy.com/media/12CvxNY8J5utEs/giphy.gif) 60 round;

[div="border-image:url(https://media2.giphy.com/media/12CvxNY8J5utEs/giphy.gif) 60 round;border-width:14px;border-style: solid;"]You can set the border to an image.[/div]

---

Using border-radius, you can make your divs have nice rounded corners. Isn't this pretty?

You can change the radius of each corner individually! The first value is for top left, second is top right, third is bottom right, and fourth is bottom left.

x

---

border-radius:20px;
border-radius:20px 10px 5px 0px;

[div="background-color:#AAFFAA;border-radius:20px;"]Using border-radius, you can make your divs have nice rounded corners. Isn't this pretty?[/div]

[div="background-color:#FFAAAA;border-radius:20px 10px 5px 0px;"]You can change the radius of each corner individually! The first value is for top left, second is top right, third is bottom right, and fourth is bottom left.[/div]

---

Outline is different to border in a few key ways. Firstly, it doesn't affect the total size of an element (e.g. a 1px border would add 1px to the size of the div, whereas an outline doesn't). Secondly, it isn't affected by border-radius, and will always display as a rectangle. Finally, it has a feature that border doesn't: offset. This allows the outline to be drawn separately to the actual boundaries of the container (e.g. a little further out or a little further in), whereas border will always stick to the edges of the container.

You can have an outline and a border in the same div.

Outline properties are: outline-style, outline-color, outline-width, outline-offset. If you want an example of something using this, I used it here to create the inner rectangle.

x

---

outline-style: solid | dotted | dashed | double | groove | ridge | inset | outset | none | hidden;
outline-color:red;
outline-width:1px;
outline-offset:1px;

[div="outline-style:solid;outline-color:red;outline-width:1px;outline-offset:1px;"]Outline example.[/div]

LAYOUT

---

This adds a space between the edge of the div and the content. The space can be in % or px.

x

You can alter the amount of padding for each edge. Available edges are padding-top, padding-bottom, padding-left, padding-right.

x

---

padding:2%;
padding-left:10px;
padding-top: 3px;
padding-bottom: 2px;
padding-right: 5px;

[div="padding:2%;"]This adds a space between the edge of the div and the content.[/div]

[div="padding-left:10px; padding-top: 3px; padding-bottom: 2px; padding-right: 5px;"]You can alter the amount of padding for each edge. Available edges are padding-top, padding-bottom, padding-left, padding-right.[/div]

---

You can alter the width of a div using % or px. This one is at 50%.

x

---

width:50%;

[div="width:50%;"]Width example.[/div]

---

You can alter the height of a div as well, but you have to use px. You can set a height in %, but only if it's inside another div with a height set in px. (Colour added for illustration purposes.)

x

---

height:100px;

[div="height:100px;background-color:red;"]Height example.[/div]

---

Overflow allows you to make a scrollbox! You need to use it in a div that has a defined height, though- otherwise it will just be a normal post. I recommend including overflow: auto every time you set a height in px, in case some monitors don't show all the content. Available parameters are: visible, hidden, scroll, auto.

There's also overflow-x and overflow-y if you want to set the overflow of the X and Y axis separately.

:)

x

---

overflow: visible| hidden | scroll | auto;

[div="height:100px;overflow:auto;"]Overflow example.[/div]

---

You can float divs next to each other, if they're the right width.

This is sometimes unreliable with borders, though.

x

---

float: left | right;

[div="width:50%; float:left; background-color:magenta;color:black;"]You can float divs next to each other, if they're the right width.[/div]
[div="width:50%; float:right; background-color:cyan;color:black;"]This is sometimes unreliable with borders, though.[/div]

---

You can use margins to align a div if you use the width thing as well..

margin-left:auto aligns it right, and margin-right:auto aligns it left. There's also margin-top and margin-bottom which work the same way. Cool!

x
You can set the margin to: auto, a value in %, or a value in px. You can also include negative values if you want a cool way to break things. Ask illi about that one.
x

---

margin:auto | 50% | 100px;
margin-left: auto | 50% | 100px;
margin-right: auto | 50% | 100px;
margin-top: auto | 50% | 100px;
margin-bottom: auto | 50% | 100px;

[div="margin:auto;width:50%;"]Margin example.[/div]

[div="margin-left:auto;width:50%;"]Margin left example.[/div]

---

Position. Okay, cool, where do we start.

Not everything works in RPF. For example, position: sticky doesn't work, for a whole list of reasons that I've completely forgotten. For that reason, this section will only focus on the two parameters I know work fine: relative and absolute.

Relative positions the div relative to it's normal position.

Absolute positions a div relative to the nearest positioned ancestor. If you're using it on its own, it positions the div relative to the post itself. If you use it inside a div containing position: relative, it positions the div relative to that div.

You can alter the position of divs using the following: left, right, top, bottom. Put a value in px or % next to the value you want, and it will put that much space between the div and the relevant direction. For a better explanation, visit thispage.

---

This is what absolute does when placed in a relative div! Very epic! You can also alter which div will appear in which layer by using z-index. Divs with a higher z-index will appear on top of divs with a lower z-index.

x

---

position:relative | absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
z-index: 69;

[div="position:relative;"]This is an example of position: relative.
[div="background-color:cyan;color:black;position:absolute;top:0px;left:0px;z-index 69;"]And absolute.[/div][/div]

VISUAL EFFECTS

---

This creates a glow/shadow/blurry thing around the outside of the div. The parameters are the same as text-shadow.

x

---

box-shadow: 0px 0px 10px #ff0080;

[div="box-shadow: 0px 0px 10px #ff0080;"]This creates a glow/shadow/blurry thing around the outside of the div.[/div]

---

You can clip the background to the text by using this code. This background, for example, is a fire gif. Other background code also works with this. Cool!

x

---

-webkit-background-clip: text;color: transparent;

[div="background-image:url(https://thumbs.gfycat.com/NastyElatedInganue-size_restricted.gif);background-position:top;background-size:100%;-webkit-background-clip: text;color: transparent;"]You can clip the background to the text by using this code.[/div]

---

This is an image with an invert filter.

All the filters you can use are: blur(10px) hue-rotate(90deg) brightness(100%) contrast(100%) grayscale(100%) invert(100%) opacity(100%) saturate(100%) sepia(100%). Change the thing in brackets to any number you want to decrease the intensity of the filter. You can also combine filters. This affects everything inside the div INCLUDING text and background colours, so be careful.
x

---

filter: blur(10px) | hue-rotate(90deg) | brightness(100%) | contrast(100%) | grayscale(100%) | invert(100%) | opacity(100%) | saturate(100%) | sepia(100%);

[div="filter: invert(100%);"]Filter example.[/div]

---

The mix-blend-mode property will apply to everything inside a div, as with filter.

x
Available options are (oh boy here we go): normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, difference, exclusion, hue, saturation, color, luminosity. I don't have the time or space to explain what all of those do. If you want to know, either read up about graphic design tools, or just play around with them.
x

---

mix-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | difference | exclusion | hue | saturation | color | luminosity;

div="background-image:linear-gradient(to left, red, blue)"][div="mix-blend-mode:multiply;"]Blend mode example. Best seen inside another div with colours or images.[/div][/div]

---

x

Skew things. Use skew(Xdeg Ydeg) and replace the X and Y with numbers.

x

The rotate thing is equally worrying. Put however many degrees you want in the rotate(?deg) thing.

x

Scale things. Use scale(Xdeg Ydeg) and replace the X and Y with numbers. Negative numbers mean cool mirrored text.

x
x
x

Matrices combine some of the possible transformation options. The parameters, in order, are: scaleX, skewY, skewX, scaleY, translateX, translateY.

x

---

[div="transform: skew(10deg, 5deg);"]Skew things. Use skew(Xdeg Ydeg) and replace the X and Y with numbers.[/div]

[div="transform: rotate(180deg);"]The rotate thing is equally worrying. Put however many degrees you want in the rotate(?deg) thing.[/div]

[div="transform: scale(1, 2)"]Scale things. Use scale(Xdeg Ydeg) and replace the X and Y with numbers. Negative numbers mean cool mirrored text.[/div]

[div="transform: matrix(1, 0.1, 0, 1, 0, 0);"]Matrices combine some of the possible transformation options. The parameters, in order, are: scaleX, skewY, skewX, scaleY, translateX, translateY.[/div]

FLEXBOX

---

These have a ratio of 5:3:1. This one is 5...

3

1!!!

These work with other BBCode/Div code, this is just a very basic example to illustrate.

Flexbox div code: [div="display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around;"]
~ Instead of row, you can put row-reverse, column, or column-reverse.
~ Instead of nowrap, you can put wrap or wrap-reverse.
~ Instead of space-around, you can put center, flex-start, flex-end, or space-between.

In a div around each thing, you've got to include flex-grow:X, where X equals how big you want the things in to be in comparison to each other. For example, I wanted it to have a 4:1 ratio, so around the 'About Me' section, I used flex-grow:4, and around the 'My Work' section, I used flex-grow:1.

Check out the much more in-depth guide here!!!
x

---

[div="display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around;"]
[div="flex-grow:5; background-color:yellow"]These have a ratio of 5:3:1. This one is 5...[/div]

[div="flex-grow:3; background-color:red;color:white"]3[/div]

[div="flex-grow:1; background-color:blue;color:white"]1!!![/div][/div]

GRIDS

---

A

B

C

D

Allows you to make customisable grid things! This is kinda hard to explain in a little preview here, so I highly recommend checking out Illirica's excellent guide on this.

Check it out here!!!
x

---

[div="display:grid; grid-template-columns: 50px 50px; grid-template-rows: 50px 50px; grid-template-areas: \"TopLeft TopRight\" \"BottomLeft BottomRight\";"]
[div="grid-area:TopLeft;background-color:skyblue;"]A[/div]
[div="grid-area:TopRight;background-color:silver;"]B[/div]
[div="grid-area:BottomLeft;background-color:slategray;"]C[/div]
[div="grid-area:BottomRight;background-color:steelblue;"]D[/div]
[/div]

MISC

---

You can change how the cursor appears when you move the mouse over a div element. You can find the full list of cursor types here...

x

BUT WHY WOULD YOU WANT TO USE BORING STANDARD CURSORS WHEN YOU CAN IMPORT YOUR OWN FUN ONES??? (This can get finnicky and not want to work sometimes. If all else fails, just copy the code from this post and replace the url with your own image. Doesn't animate gifs.) Small images work best! It gets kinda glitchy when you use big ones.

x

---

cursor: crosshair; (I'm not listing all the types here, check the link)
cursor: url('https://piskel-imgstore-b.appspot.com/img/91dacad1-f367-11e9-a37b-33a56a54cf05.gif'), auto;

[div="border:1px solid blue;cursor: crosshair;"]Default cursor example.[/div]

[div="cursor: url('https://piskel-imgstore-b.appspot.com/img/91dacad1-f367-11e9-a37b-33a56a54cf05.gif'), auto; border:1px solid red;"]Custom cursor example.[/div]

---

Resize allows the user to resize the div by dragging the corner! That's cool, right? Try it out!

Awesome!




Keep going!




Almost there!




Are you having fun yet?




What are you searching for?










I think this song is funny :)




















Ok, here's your Duane, you can stop now.





I'm serious.





:(

x

---

resize: none | both | horizontal | vertical;

[div="resize: both;overflow:auto;background-color:yellow;color:black;width:20%;height:150px;"]Resize example.[/div]

TIPS AND TRICKS

---

You can set most of the parameters to inherit and it will take the value of whatever div it's inside! Very useful if you're lazy. You can also use it in some other BBCode (more on that later).

---

When changing the font, you can include multiple fonts in the list! If a viewer's device doesn't have the first font on the list, it will see if it has the second (and so on) and display that instead. A general rule of thumb is to always include the generic term for the font type you want to use at the end of font-family. For example, if you're using Times New Roman, include Serif at the end of your font-family define thing (font-family: times new roman, serif). That way, if the viewer's device doesn't have times new roman, it will still display a serif font and you can retain your aesthetic integrity.

---

Inherit works in other code as well- most notably spoiler2. If you have a hex colour you want the text in spoiler2 to be and you're sick of having to use colour names, just slap an inherit where the colour name will be and put the whole thing in a div including color: HEX COLOUR HERE, and it should work fine!

Also, align doesn't play nice with background clipping. No idea why.

[Reyn]

s
c
r
e
a
m
s
c
r
e
a
m
s
c
r
e
a
m

s
c
r
e
a
m
s
c
r
e
a
m
s
c
r
e
a
m

[Reyn]

test.

spacer

test

t
e
s
t

sick!

[Reyn]

this is an epic post just to test something fun out

[Reyn]

this is an epic post just to test something fun out

cool

[Replica]

this is an epic post just to test something fun out

cool

hello i am creating a notification to test something fun out