Many new BBCodes
Posted: 28 Jul 2010, 23:45
Note: Most are heavily based on new CSS 3 standards. As a result, you can expect them to work perfect in Chrome and Safari, with some minor problems in Opera, and only several may work in IE and Firefox.
Here are the codes:
Circle: Use this BBCode to place circles with defined color and size, made using pure CSS!
BB:
HTML:
Help:
Spoiler: A well known BBCode, remade on my way, with transparency and hovering.
BB:
HTML:
Help:
Fire text: Make a text that looks like it's burning!
BB:
HTML:
Help:
Flaming text:Text that isn't burning, but is rather flaming.
BB:
HTML:
Help:
Icy text:Text that is frozen, or it is just burning with blue flames...
BB:
HTML:
Help:
Greenery text:Text that will appear in a nice greenery themed box...
BB:
HTML:
Help:
Flowers text:Text that is decorated with some flowers...
BB:
HTML:
Help:
EDITS:
Here are the codes:
Circle: Use this BBCode to place circles with defined color and size, made using pure CSS!
BB:
Code: Select all
[circle={NUMBER}]{COLOR}[/circle]Code: Select all
<p style="height:1em;width:1em;font-size:{NUMBER}px;background:{COLOR};border-radius:0.5em;display:inline-block;padding:1px;margin:1px;"></p>Circle:[circle=Circle radius in pixels]Circle color[/circle]
Spoiler: A well known BBCode, remade on my way, with transparency and hovering.
BB:
Code: Select all
[spoiler][/spoiler]Code: Select all
<style type="text/css">
.spoilerOuter{width:90%;background:white;border:darkgreen solid 2px;padding:5px;overflow:hidden;height:30px;}
.spoilerInner{max-height:200px;width:100%;overflow-y:auto;overflow-x:hidden;word-wrap:break-word;background:#FFFFCC;opacity:0.3;}
.spoilerInner:hover{opacity:1;}
</style>
<div class="spoilerOuter">
<strong>SPOILER:</strong><a onclick="this.style.display='none';this.parentNode.style.height='auto'"><strong>Show</strong></a></strong>
<hr style="border-color:green;" />
<div class="spoilerInner">
{TEXT}
</div>
</div>Code: Select all
[spoiler]Contents[/spoiler]Fire text: Make a text that looks like it's burning!
BB:
Code: Select all
[burning]{TEXT}[/burning]Code: Select all
<div style="max-width:95%;background:black;border-radius:15px;font-size:34px;font-family:Calibri;color:white;padding:15px;text-align:center;font-weight:bold;text-shadow: 0px -3px 6px yellow, 0px -8px 9px orange, 0px -13px 13px red;">{TEXT}</div>[burning]Text to display.[/burning]
Flaming text:Text that isn't burning, but is rather flaming.
BB:
Code: Select all
[flaming]{TEXT}[/flaming]Code: Select all
<div style="max-width:95%;background:black;border-radius:15px;font-size:34px;font-family:Calibri;color:white;padding:15px;text-align:center;font-weight:bold;text-shadow:0px -5px 5px maroon,0px -10px 10px fuchsia,0px -15px 15px violet;">{TEXT}</div>[flaming]Text to display.[/flaming]
Icy text:Text that is frozen, or it is just burning with blue flames...
BB:
Code: Select all
[iced]{TEXT}[/iced]Code: Select all
<div style="max-width:95%;background:black;border-radius:15px;font-size:34px;font-family:Calibri;color:white;padding:15px;text-align:center;font-weight:bold;text-shadow: 0px -3px 6px #CCFFFF, 0px -8px 9px #33CCFF, 0px -13px 13px #0066CC;">{TEXT}</div>[iced]Text to display.[/iced]
Greenery text:Text that will appear in a nice greenery themed box...
BB:
Code: Select all
[greenery]{TEXT}[/greenery]Code: Select all
<div style="max-width:95%;background-color:black;background-image:url('http://i30.tinypic.com/10n6qfa.jpg'),url('http://i25.tinypic.com/rtqhs3.jpg');background-position: top right, bottom left;background-repeat:repeat-x;border-radius:25px;font-size:34px;font-family:Calibri;color:white;padding:1.5em 5px;text-align:center;font-weight:bold;text-shadow: 0px -10px 10px darkgreen, 0px 10px 10px darkgreen, 5px 0px 5px lightgreen, -5px 0px 5px lightgreen;">{TEXT}</div>[greenery]Text to display.[/greenery]
Flowers text:Text that is decorated with some flowers...
BB:
Code: Select all
[flowers]{TEXT}[/flowers]Code: Select all
<div style="max-width:90%;min-height:111px;background: black url('http://i26.tinypic.com/2i3olk.jpg') bottom right no-repeat;border-radius:25px;font-size:34px;font-family:Calibri;color:white;padding-right:225px;padding-top:50px;padding-bottom:5px;padding-left:15px;text-align:center;font-weight:bold;text-shadow:0px 0px 25px fuchsia;">{TEXT}</div>[flowers]Text to display.[/flowers]
EDITS:
- Added new Greenery code.
- Added new Flowers code.
- Added new Flaming code.
- Fixed Fire and Ice codes to allow multi-line text.
