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:
x
solid, dotted, dashed, double, groove, ridge, inset, outset, none, hidden.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
x
padding-top, padding-bottom, padding-left, padding-right.[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
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.
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% | 20px;
[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 (
x
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%).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),
x
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.The background image tiles (repeats) by both the X and Y axis by default, but you can change this to not repeat at all (
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
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
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 want. You can use words (
xto top/bottom/left/right), or you can input an angle (e.g. 90deg).For your sake and for mine, please refer to this website 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;"]Gradient example.[/div]
[div="background: linear-gradient(to left, cyan, yellow, magenta);color:black;"]To left example.[/div]You can change how the background behaves when you scroll. Ain't that neat? Available options are
x
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).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
x
mix-blend-mode: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, difference, exclusion, hue, saturation, color, luminosity.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:
x
solid, dotted, dashed, double, groove, ridge, inset, outset, none, hidden.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.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
x
% or px.You can alter the amount of padding for each edge. Available edges are
x
padding-top, padding-bottom, padding-left, padding-right.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
x
% or px. This one is at 50%.width:50%;
[div="width:50%;"]Width example.[/div]You can alter the height of a div as well, but you have to use
x
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.)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.:)
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!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 this page.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.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
x
text-shadow.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.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.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
x
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
x
rotate(?deg) thing.Scale things. Use
xscale(Xdeg Ydeg) and replace the X and Y with numbers. Negative numbers mean cool mirrored text.x
x
Matrices combine some of the possible transformation options. The parameters, in order, are:
x
scaleX, skewY, skewX, scaleY, translateX, translateY.[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!!!
Check out the much more in-depth guide here!!!Maxx[2.0]ine wrote: ↑Mon Jul 08, 2019 8:36 pmFlexbox div code:[div="display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around;"]
~ Instead ofrow, you can putrow-reverse,column, orcolumn-reverse.
~ Instead ofnowrap, you can putwraporwrap-reverse.
~ Instead ofspace-around, you can putcenter,flex-start,flex-end, orspace-between.
In a div around each thing, you've got to includeflex-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 usedflex-grow:4, and around the 'My Work' section, I usedflex-grow:1.
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
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://i.imgur.com/kULEBy6.png'), 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
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.
:(
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.If your device defaults to quotation marks like this: ” instead of like this: ", that's no good. Div (and other BBCode) only works with ", so you might want to copy paste that if things are going wrong.
