IctoraPost
You've got mail
This is a slightly hacky way to extend the choices of using BBCode by exploiting the system and adding in extra CSS styling tags where there shouldn't be any. Keep in mind that this whole thing could be fixed and become obselete later, as none of this is supposed to happen.
With the advent of the [div] tag, there's no need for any of this trickery any more. It's become obselete. I hereby change this guide from a slightly hacky one to a completely legitimate guide to the [div] tag (but maybe with some slightly hacky stuff as well)!
You can do many things with this, such as
larger text sizes
smaller text sizes
rounded corners
background images
gradients
set widths and heights
circles
scroll boxes
scroll boxes
scroll boxes
scroll boxes
scroll boxes
scroll boxes
scroll boxes
scroll boxes
scroll boxes are kind of redundant here with there being a specific tag for it now, but I'll keep this here anyway
scroll boxes
scroll boxes
scroll boxes
scroll boxes
scroll boxes
scroll boxes
scroll boxes
scroll boxes are kind of redundant here with there being a specific tag for it now, but I'll keep this here anyway
box shadows
text shadows and glows
text borders
transformations
transparency
positioning
And MORE!
Lyro
has a much more professional post on this 'CSS property injection' phenomenon here, if you want to know a bit more about it.This thread will give only a basic explanation on all these tricks. If you want to learn more, go to W3Schools for well-documented guides to everything HTML and CSS, as well as reference sheets. Also, make sure to check out @mayhem TR4NQU1L17Y 's very helpful chart here.
Code:
[div=padding: 10px; font-size:50px; padding:0;]larger text sizes[/div]
[div=padding: 10px; font-size:8px; padding:0;]smaller text sizes[/div]
[div=padding: 10px; border: 5px solid grey; background-color:lightgrey; border-radius:10px;]rounded corners[/div]
[div=padding: 10px; background: url(https://static.pexels.com/photos/9694/pexels-photo.jpeg) 50%; border-radius:50px;][COLOR=#ffffff]background images[/COLOR][/div]
[div=padding: 10px; background: red; background: -webkit-linear-gradient(left, red , yellow); background: -o-linear-gradient(right, red, yellow); background: -moz-linear-gradient(right, red, yellow); background: linear-gradient(to right, red , yellow); border-radius:50px;][COLOR=#ffffff]gradients[/COLOR][/div]
[div=padding: 10px; background-color: khaki; border-radius:30px 0; width: 40%; height: 40px;]set widths and heights[/div]
[div=padding: 10px; border: 3px dashed blue; background-color:skyblue; border-radius:100%; height:50px; width:50px;]circles[/div]
[div=padding: 10px; border-radius:5px; background-color: olive; height:100px; overflow:auto;][COLOR=#ffffff]scroll boxes
scroll boxes
scroll boxes
scroll boxes
scroll boxes
scroll boxes
scroll boxes
scroll boxes
scroll boxes[/COLOR][/div]
[div=padding: 10px; background-color: gold; box-shadow: 2px 2px 3px black, 4px 4px 0px 2px pink; border-radius:10px;]box shadows[/div]
[div=padding: 10px; text-shadow: 1px 1px 1px orange;]text shadows and glows[/div]
[div=padding: 10px; border: 1px solid violet; display:inline-block; border-radius:50px;]text borders[/div]
[div=padding: 10px; border: 1px solid grey; border-radius:10px; transform: rotate(1deg);]transformations[/div]
[div=padding: 10px; border: 5px dotted maroon; background-color:brown; opacity:0.6; border-radius:10px;][COLOR=#ffffff]transparency[/COLOR][/div]
[div=padding: 10px; background-color:silver; display:inline-block; border-radius:50px; position:relative; left: 30%;]positioning[/div]Sorry if anything looks bad on the dark theme - I use the lighter ones, so things might be a bit wonky.
Last edited:
