Many new BBCodes

[KukY13]

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:

Code: Select all

[circle={NUMBER}]{COLOR}[/circle]

HTML:

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>

Help:

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]

HTML:

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>

Help:

Code: Select all

[spoiler]Contents[/spoiler]

---

Fire text: Make a text that looks like it's burning!
BB:

Code: Select all

[burning]{TEXT}[/burning]

HTML:

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>

Help:

[burning]Text to display.[/burning]

---

Flaming text:Text that isn't burning, but is rather flaming.
BB:

Code: Select all

[flaming]{TEXT}[/flaming]

HTML:

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>

Help:

[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]

HTML:

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>

Help:

[iced]Text to display.[/iced]

---

Greenery text:Text that will appear in a nice greenery themed box...
BB:

Code: Select all

[greenery]{TEXT}[/greenery]

HTML:

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>

Help:

[greenery]Text to display.[/greenery]

---

Flowers text:Text that is decorated with some flowers...
BB:

Code: Select all

[flowers]{TEXT}[/flowers]

HTML:

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>

Help:

[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.

[Inner Circle]

Nice BBCodes!

One question to the Circle BBCode: Is it possible to make some sort of Pie Chart with this code?

[Stitch]

Very impressive with the fire and icy text.

[KukY13]

Nice BBCodes!

One question to the Circle BBCode: Is it possible to make some sort of Pie Chart with this code?

Thanks!
It is possible, but it would be really hard to make some realistic sections, but it shouldn't be hard to make simplier ones... It's a good idea, and I'll give it a try.

Very impressive with the fire and icy text.

Thanks! I'm working on a green BBCode, like that ones, but with more like nature/grass theme...

[KukY13]

Here is your Pie Chart BBCode:

That is the best I can do

BB Code:

Code: Select all

[piechart]{NUMBER1},{NUMBER2},{NUMBER3},{NUMBER4}[/piechart]

HTML Code:

Code: Select all

<p style="height:4em;width:4em;font-size:20px;display:inline-block;padding:1px;margin:1px;text-align:right;height:20px;padding-top:60px;background:red;-webkit-border-top-left-radius:4em;-o-border-top-left-radius:4em;-moz-border-radius-top-left:4em;">{NUMBER1}%</p><p style="height:4em;width:4em;font-size:20px;display:inline-block;padding:1px;margin:1px;height:20px;padding-top:60px;background:blue;-webkit-border-top-right-radius:4em;-o-border-top-right-radius:4em;-moz-border-radius-top-right:4em;">{NUMBER2}%</p><br /><p style="height:4em;width:4em;font-size:20px;display:inline-block;padding:1px;margin:1px;text-align:right;background:green;-webkit-border-bottom-left-radius:4em;-o-border-bottom-left-radius:4em;-moz-border-radius-bottom-right:4em;">{NUMBER4}%</p><p style="height:4em;width:4em;font-size:20px;display:inline-block;padding:1px;margin:1px;background:yellow;-webkit-border-bottom-right-radius:4em;-o-border-bottom-right-radius:4em;-moz-border-radius-bottom-right:4em;">{NUMBER3}%</p>

BEWARE! In order to ensure browser compatibility, nice alignment and correct shaping, the code has been made incredibly messy and is held together working this way only by pure magic! Do not try making any changes to the code! Well, you can, but the chart will probably have a shape of a highly asymetryic egg after those...

Enjoy! Id you can!