• When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Resource BBCode storages

ViAdvena

ViAdvena

Schrödinger's cat
Hello! This is where I'll play around with the shiny new features of BBCode.
All codes here are free to use unless noted otherwise
 
This is an attempt to recreate my old codes. Click the green buttons!



A
5wQ7F00.jpg
B
ENce8kD.jpg
C
Xia.Yu.Yao.600.2011561.jpg








 
The new BBCode+ is really flexible :xFeek:

This is my attempt at creating book layout! Still a bit buggy, I hope I can fix it in the future. Not mobile friendly because I can't figure out how to make it so without making the text ridiculously small.

[class=bookcont] --book-w: 650px; width: var(--book-w); height: calc( var(--book-w) * 4/6); margin: calc( var(--book-w) /6) auto; position:relative; background: BurlyWood ; font-size: calc( var(--book-w) /52); perspective: 2000px; z-index:1; [/class] [class=sheet] position: absolute; display:flex; flex-wrap: wrap; justify-content: space-between; align-items: center; width: 49%; height: 98%; top: 1%; right: 1%; padding: 15px; box-sizing: border-box; transition: all 1s ease-in-out; transform-origin: left center; transform-style: preserve-3d; box-shadow: inset 3px 0px 20px rgba(0, 0, 0, 0.2), 0px 0px 15px rgba(0, 0, 0, 0.1); //backface-visibility:hidden; [/class] [class=bck] opacity:0; transition: all 1s ease-in-out; pointer-events: none; [/class] [class=picw] width: 60%; box-sizing: border-box; position: absolute; top: -8%; right:2%; transform: rotateZ(5deg); padding: 10px 10px 0; background: beige; text-align: center; font-size: 1.5vw; box-shadow: 1px 1px 9px; [/class] [class=lbl] width: 10%; height: 20%; position: absolute; top: 0; right:-10%; background: inherit; border-radius: 0px 5px 5px 0px; text-align: center; [/class] [class=rotate] transform: rotate3d( 0,-1,0, 180deg); opacity:1 [/class] [script=bookcont] set tog0 0 set tog1 0 set tog2 0 set tog3 0 [/script] [script class=lbl1 on=click] if (eq ${tog1} 0) (addClass rotate one) (removeClass rotate sheet) if (eq ${tog1} 0) (set tog1 1) (set tog1 0) [/script] [script class=lbl2 on=click] if (eq ${tog2} 0) (addClass rotate two) (removeClass rotate two) if (eq ${tog2} 0) (addClass rotate one) (removeClass rotate three) if (eq ${tog2} 0) (set tog2 1) (set tog2 0) [/script] [script class=lbl3 on=click] if (eq ${tog3} 0) (addClass rotate sheet) (removeClass rotate three) if (eq ${tog3} 0) (set tog3 1) (set tog3 0) [/script] [div class=bookcont] [div class="sheet three" style="background: #4f3222;"] [div class=title style="width:100%; color:white;"]
Person of Interest​
[/div]
125x125
125x125
125x125
125x125
[div class="lbl lbl3" style="top: 40%; "]C[/div][/div] [div class="sheet two" style="background: sienna;"] Name: K█████ ████

D.O.B: ████████

Codename: ████

Gender: ████

Age: ██

Role: █████ ██

History:
█████ ███████ ██ █████ ██ █████ ██████ █ ███ ████ █████ ██ █████ ██ ███████ ███████ ███████ ███████ ███████ ███████ ████ ███ ███ ████ ███████ ██ █████ ███ ████ ████ ███ █ ██████ ███████ ███████ ████ ███ ████ ███ ██ █████ █ ██████ ███████ █ ██████ █████ ██ ██ █████ █████ ██ ███████ ███████ ███ ████ ███ ████ ███████ ██ [div class=picw]
placeholder-person-380x380.jpg

01 . 05 . 23 [/div] [div class="lbl lbl2" style="top: 20%; "]B[/div] [/div] [div class="sheet one" style="background: #8b6f47;"]
Rwjy5Ft.png
[div class="lbl lbl1"]A[/div] [/div] [div class="bck sheet one" style="background: #8b6f47;"] [/div] [div class="bck sheet two" style="background: sienna; "] [/div] [div class="bck sheet three" style="background: #4f3222;"] [/div] [/div]

Code: 
[nobr]
   [class=bookcont]
      --book-w: 650px;
      width: var(--book-w); height:  calc( var(--book-w) * 4/6);
      margin: calc( var(--book-w) /6) auto;
      position:relative;
      background: BurlyWood ;
      font-size: calc( var(--book-w) /52);
      perspective: 2000px;
      z-index:1;
   [/class]
   [class=sheet]
      position: absolute;
      display:flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      width: 49%; height: 98%;
      top: 1%; right: 1%;
      padding: 15px;
      box-sizing: border-box;
      transition: all 1s ease-in-out;
      transform-origin: left center;
      transform-style: preserve-3d;
      box-shadow:  inset 3px 0px 20px rgba(0, 0, 0, 0.2), 0px 0px 15px rgba(0, 0, 0, 0.1);
      //backface-visibility:hidden;
   [/class]
   [class=bck]
      opacity:0;
      transition: all 1s ease-in-out;
      pointer-events: none;
   [/class]
   [class=picw]
      width: 60%;
      box-sizing: border-box;
      position: absolute;
      top: -8%; right:2%;
      transform: rotateZ(5deg);
      padding: 10px 10px 0;
      background: beige;
      text-align: center;
      font-size: 1.5vw;
      box-shadow: 1px 1px 9px;
   [/class]
   [class=lbl]
      width: 10%; height: 20%;
      position: absolute;
      top: 0; right:-10%;
      background: inherit;
      border-radius: 0px 5px 5px 0px;
      text-align: center;
   [/class]
   [class=rotate]
      transform: rotate3d( 0,-1,0, 180deg);
      opacity:1
   [/class]


   [script=bookcont]
      set tog0 0
      set tog1 0
      set tog2 0
      set tog3 0
   [/script]


   [script class=lbl1 on=click]
      if (eq ${tog1} 0) (addClass rotate one) (removeClass rotate  sheet)
      if (eq ${tog1} 0) (set tog1 1) (set tog1 0)
   [/script]
   [script class=lbl2 on=click]
      if (eq ${tog2} 0) (addClass rotate two) (removeClass rotate  two)
      if (eq ${tog2} 0) (addClass rotate one)  (removeClass rotate  three)
      if (eq ${tog2} 0) (set tog2 1) (set tog2 0)
   [/script]
   [script class=lbl3 on=click]
      if (eq ${tog3} 0) (addClass rotate sheet) (removeClass rotate  three)
      if (eq ${tog3} 0) (set tog3 1) (set tog3 0)
   [/script]

[div class=bookcont]
   [div class="sheet three" style="background: #4f3222;"]
     [div class=title style="width:100%; color:white;"]
       [CENTER][B]Person of Interest[/B][/CENTER]
     [/div]
     [br][/br][IMG]http://via.placeholder.com/125x125[/IMG][IMG]http://via.placeholder.com/125x125[/IMG][IMG]http://via.placeholder.com/125x125[/IMG][IMG]http://via.placeholder.com/125x125[/IMG]
     [div class="lbl lbl3" style="top: 40%; "]C[/div]
   [/div]

   [div class="sheet two" style="background: sienna;"]

         Name: K█████ ████
[br][/br][br][/br]
         D.O.B: ████████
[br][/br][br][/br]
Codename: ████
[br][/br][br][/br]
Gender: ████
[br][/br][br][/br]
Age: ██
[br][/br][br][/br]
Role: █████ ██
[br][/br][br][/br]
History: [br][/br]
█████ ███████ ██ █████ ██ █████ ██████ █ ███ ████ █████ ██ █████ ██ ███████ ███████ ███████ ███████ ███████ ███████ ████ ███ ███ ████ ███████ ██ █████ ███ ████ ████ ███ █ ██████ ███████ ███████ ████ ███ ████ ███ ██ █████ █ ██████ ███████ █ ██████ █████ ██ ██ █████ █████ ██ ███████ ███████ ███ ████ ███ ████ ███████ ██
      [div class=picw]
         [IMG]https://rbwebtel.com/wp-content/uploads/2017/11/placeholder-person-380x380.jpg[/IMG]
         [br][/br] [FONT=Allura]01 . 05 . 23[/FONT]
      [/div]
      [div class="lbl lbl2" style="top: 20%; "]B[/div]
   [/div]
   [div class="sheet one" style="background: #8b6f47;"]
      [IMG]https://i.imgur.com/Rwjy5Ft.png?3[/IMG]
      [div class="lbl lbl1"]A[/div]
   [/div]
   [div class="bck sheet one" style="background: #8b6f47;"] [/div]
   [div class="bck sheet two" style="background: sienna; "] [/div]
   [div class="bck sheet three" style="background: #4f3222;"] [/div]
[/div]
[/nobr]
 
ViAdvena said:
The new BBCode+ is really flexible :xFeek:

This is my attempt at creating book layout! Still a bit buggy, I hope I can fix it in the future. Not mobile friendly because I can't figure out how to make it so without making the text ridiculously small.

[class=bookcont] --book-w: 650px; width: var(--book-w); height: calc( var(--book-w) * 4/6); margin: calc( var(--book-w) /6) auto; position:relative; background: BurlyWood ; font-size: calc( var(--book-w) /52); perspective: 2000px; z-index:1; [/class] [class=sheet] position: absolute; display:flex; flex-wrap: wrap; justify-content: space-between; align-items: center; width: 49%; height: 98%; top: 1%; right: 1%; padding: 15px; box-sizing: border-box; transition: all 1s ease-in-out; transform-origin: left center; transform-style: preserve-3d; box-shadow: inset 3px 0px 20px rgba(0, 0, 0, 0.2), 0px 0px 15px rgba(0, 0, 0, 0.1); //backface-visibility:hidden; [/class] [class=bck] opacity:0; transition: all 1s ease-in-out; pointer-events: none; [/class] [class=picw] width: 60%; box-sizing: border-box; position: absolute; top: -8%; right:2%; transform: rotateZ(5deg); padding: 10px 10px 0; background: beige; text-align: center; font-size: 1.5vw; box-shadow: 1px 1px 9px; [/class] [class=lbl] width: 10%; height: 20%; position: absolute; top: 0; right:-10%; background: inherit; border-radius: 0px 5px 5px 0px; text-align: center; [/class] [class=rotate] transform: rotate3d( 0,-1,0, 180deg); opacity:1 [/class] [script=bookcont] set tog0 0 set tog1 0 set tog2 0 set tog3 0 [/script] [script class=lbl1 on=click] if (eq ${tog1} 0) (addClass rotate one) (removeClass rotate sheet) if (eq ${tog1} 0) (set tog1 1) (set tog1 0) [/script] [script class=lbl2 on=click] if (eq ${tog2} 0) (addClass rotate two) (removeClass rotate two) if (eq ${tog2} 0) (addClass rotate one) (removeClass rotate three) if (eq ${tog2} 0) (set tog2 1) (set tog2 0) [/script] [script class=lbl3 on=click] if (eq ${tog3} 0) (addClass rotate sheet) (removeClass rotate three) if (eq ${tog3} 0) (set tog3 1) (set tog3 0) [/script] [div class=bookcont] [div class="sheet three" style="background: #4f3222;"] [div class=title style="width:100%; color:white;"]
Person of Interest​
[/div]
125x125
125x125
125x125
125x125
[div class="lbl lbl3" style="top: 40%; "]C[/div][/div] [div class="sheet two" style="background: sienna;"] Name: K█████ ████

D.O.B: ████████

Codename: ████

Gender: ████

Age: ██

Role: █████ ██

History:
█████ ███████ ██ █████ ██ █████ ██████ █ ███ ████ █████ ██ █████ ██ ███████ ███████ ███████ ███████ ███████ ███████ ████ ███ ███ ████ ███████ ██ █████ ███ ████ ████ ███ █ ██████ ███████ ███████ ████ ███ ████ ███ ██ █████ █ ██████ ███████ █ ██████ █████ ██ ██ █████ █████ ██ ███████ ███████ ███ ████ ███ ████ ███████ ██ [div class=picw]
placeholder-person-380x380.jpg

01 . 05 . 23 [/div] [div class="lbl lbl2" style="top: 20%; "]B[/div] [/div] [div class="sheet one" style="background: #8b6f47;"]
Rwjy5Ft.png
[div class="lbl lbl1"]A[/div] [/div] [div class="bck sheet one" style="background: #8b6f47;"] [/div] [div class="bck sheet two" style="background: sienna; "] [/div] [div class="bck sheet three" style="background: #4f3222;"] [/div] [/div]

Code: 
[nobr]
   [class=bookcont]
      --book-w: 650px;
      width: var(--book-w); height:  calc( var(--book-w) * 4/6);
      margin: calc( var(--book-w) /6) auto;
      position:relative;
      background: BurlyWood ;
      font-size: calc( var(--book-w) /52);
      perspective: 2000px;
      z-index:1;
   [/class]
   [class=sheet]
      position: absolute;
      display:flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      width: 49%; height: 98%;
      top: 1%; right: 1%;
      padding: 15px;
      box-sizing: border-box;
      transition: all 1s ease-in-out;
      transform-origin: left center;
      transform-style: preserve-3d;
      box-shadow:  inset 3px 0px 20px rgba(0, 0, 0, 0.2), 0px 0px 15px rgba(0, 0, 0, 0.1);
      //backface-visibility:hidden;
   [/class]
   [class=bck]
      opacity:0;
      transition: all 1s ease-in-out;
      pointer-events: none;
   [/class]
   [class=picw]
      width: 60%;
      box-sizing: border-box;
      position: absolute;
      top: -8%; right:2%;
      transform: rotateZ(5deg);
      padding: 10px 10px 0;
      background: beige;
      text-align: center;
      font-size: 1.5vw;
      box-shadow: 1px 1px 9px;
   [/class]
   [class=lbl]
      width: 10%; height: 20%;
      position: absolute;
      top: 0; right:-10%;
      background: inherit;
      border-radius: 0px 5px 5px 0px;
      text-align: center;
   [/class]
   [class=rotate]
      transform: rotate3d( 0,-1,0, 180deg);
      opacity:1
   [/class]


   [script=bookcont]
      set tog0 0
      set tog1 0
      set tog2 0
      set tog3 0
   [/script]


   [script class=lbl1 on=click]
      if (eq ${tog1} 0) (addClass rotate one) (removeClass rotate  sheet)
      if (eq ${tog1} 0) (set tog1 1) (set tog1 0)
   [/script]
   [script class=lbl2 on=click]
      if (eq ${tog2} 0) (addClass rotate two) (removeClass rotate  two)
      if (eq ${tog2} 0) (addClass rotate one)  (removeClass rotate  three)
      if (eq ${tog2} 0) (set tog2 1) (set tog2 0)
   [/script]
   [script class=lbl3 on=click]
      if (eq ${tog3} 0) (addClass rotate sheet) (removeClass rotate  three)
      if (eq ${tog3} 0) (set tog3 1) (set tog3 0)
   [/script]

[div class=bookcont]
   [div class="sheet three" style="background: #4f3222;"]
     [div class=title style="width:100%; color:white;"]
       [CENTER][B]Person of Interest[/B][/CENTER]
     [/div]
     [br][/br][IMG]http://via.placeholder.com/125x125[/IMG][IMG]http://via.placeholder.com/125x125[/IMG][IMG]http://via.placeholder.com/125x125[/IMG][IMG]http://via.placeholder.com/125x125[/IMG]
     [div class="lbl lbl3" style="top: 40%; "]C[/div]
   [/div]

   [div class="sheet two" style="background: sienna;"]

         Name: K█████ ████
[br][/br][br][/br]
         D.O.B: ████████
[br][/br][br][/br]
Codename: ████
[br][/br][br][/br]
Gender: ████
[br][/br][br][/br]
Age: ██
[br][/br][br][/br]
Role: █████ ██
[br][/br][br][/br]
History: [br][/br]
█████ ███████ ██ █████ ██ █████ ██████ █ ███ ████ █████ ██ █████ ██ ███████ ███████ ███████ ███████ ███████ ███████ ████ ███ ███ ████ ███████ ██ █████ ███ ████ ████ ███ █ ██████ ███████ ███████ ████ ███ ████ ███ ██ █████ █ ██████ ███████ █ ██████ █████ ██ ██ █████ █████ ██ ███████ ███████ ███ ████ ███ ████ ███████ ██
      [div class=picw]
         [IMG]https://rbwebtel.com/wp-content/uploads/2017/11/placeholder-person-380x380.jpg[/IMG]
         [br][/br] [FONT=Allura]01 . 05 . 23[/FONT]
      [/div]
      [div class="lbl lbl2" style="top: 20%; "]B[/div]
   [/div]
   [div class="sheet one" style="background: #8b6f47;"]
      [IMG]https://i.imgur.com/Rwjy5Ft.png?3[/IMG]
      [div class="lbl lbl1"]A[/div]
   [/div]
   [div class="bck sheet one" style="background: #8b6f47;"] [/div]
   [div class="bck sheet two" style="background: sienna; "] [/div]
   [div class="bck sheet three" style="background: #4f3222;"] [/div]
[/div]
[/nobr]
Click to expand...

this, is, so cool. omg.
 
Ridge Ridge Thank you! Like I said, the code is still buggy tho, so it's easy to break @_@


A code for character roster in my profile. Now all of you can see most of the characters I have made in my RPN career.


[class=roster] position: relative; max-width: 800px; height: 420px; margin: 5px auto; padding: 10px 0; box-shadow: 0px 0px 5px ; display: flex; justify-content: space-around; align-items: center; align-content: space-evenly; flex-direction: column; flex-wrap: wrap; //border: 1px solid; background-image: url('https://www.rpnation.com/media/8efc3bca-png.34924/full'); [/class] [class=detext] position: relative; width: 125px; height:125px; //margin: 0px 10px; display: block; [/class] [class=tooltip] width: 100%; height:100%; position: absolute; left: 0px; top: 0px; z-index: 1; opacity: 0; transition: opacity 1s, width .6s cubic-bezier(0.770, 0.000, 0.175, 1.000), height .5s cubic-bezier(0.770, 0.000, 0.175, 1.000); display:flex; align-items: flex-end; justify-content: flex-end; //border: 1px solid; [/class] [class=tooltiptext] width: 125px; color: #fff; text-align: center; padding: 5px 0; //margin-bottom: 15px; margin-right: -20px; position:relative; //border-radius: 20% 0px 0px 0px ; //box-shadow: 1px 1px 2px 1px dimgrey; font-family: 'Book Antiqua'; [/class] [class=tooltiptextpoint] content: "v"; position: absolute; top: 30%; left: 0%; margin: -8px 0 0 -16px; border-width: 8px; border-style: solid; border-color: transparent; border-right-color: inherit; [/class] [class=title] display: inline-block; text-shadow: 1px 1px 5px black, -1px -1px 5px blue; color:ghostwhite; margin-bottom:-40px; transition: all .5s; [/class] [class=titlehov] text-shadow: 2px 2px 5px blue, -2px -2px 5px black; [/class] [class name=tooltip state=hover] opacity: .8; width: 130%; height:110%; [/class] [class name=tooltip state=active] opacity: .8; width: 193%; [/class] [script class=tooltip on=mouseenter] addClass titlehov title [/script] [script class=tooltip on=mouseleave] removeClass titlehov title [/script]
[div class=title]Character Roster[/div]​
[div class=roster] [div class=detext style="box-shadow: 1px 1px 5px 1px DodgerBlue;"]
Rgzar2t.jpg
[div class=tooltip] [div class=tooltiptext style="background: DodgerBlue; border-color: DodgerBlue;"] [div class=tooltiptextpoint][/div] Angkasa Soleil
SoCal: Upland War[/div][/div] [/div] [div class=detext style="box-shadow: 1px 1px 5px 1px Blue;"]
XJz92Nq.jpg
[div class=tooltip] [div class=tooltiptext style="background: blue; border-color: blue;"] [div class=tooltiptextpoint][/div] Sterren
SoCal: Upland War[/div][/div] [/div] [div class=detext style="box-shadow: 1px 1px 5px 1px green;"]
584izmL.png
[div class=tooltip] [div class=tooltiptext style="background: green; border-color: green;"] [div class=tooltiptextpoint][/div] Sienna Argante
Blood & Glory[/div][/div] [/div] [div class=detext style="box-shadow: 1px 1px 5px 1px olive;"]
xORx8es.png
[div class=tooltip] [div class=tooltiptext style="background: olive; border-color: olive;"] [div class=tooltiptextpoint][/div] Azami Ryuudo
Dere Festival[/div][/div] [/div] [div class=detext style="box-shadow: 1px 1px 5px 1px maroon;"]
45Ch9iS.jpg
[div class=tooltip] [div class=tooltiptext style="background: Maroon; border-color: Maroon;"] [div class=tooltiptextpoint][/div] Elva Rheanne
Only Black Horse[/div][/div] [/div] [div class=detext style="box-shadow: 1px 1px 5px 1px SaddleBrown;"]
phjIwc4.jpg
[div class=tooltip] [div class=tooltiptext style="background: SaddleBrown; border-color: SaddleBrown;"] [div class=tooltiptextpoint][/div] Ravi
B E T W E E N[/div][/div] [/div] [div class=detext style="box-shadow: 1px 1px 5px 1px darkolivegreen;"]
lbVgvL4.jpg
[div class=tooltip] [div class=tooltiptext style="background: darkolivegreen; border-color: darkolivegreen;"] [div class=tooltiptextpoint][/div] Roland Tomas
G H O S T[/div][/div] [/div] [div class=detext style="box-shadow: 1px 1px 5px 1px navy;"]
ArePk5K.png
[div class=tooltip] [div class=tooltiptext style="background: navy; border-color: navy;"] [div class=tooltiptextpoint][/div] Adrian Ross
GHOST OUT[/div][/div] [/div] [div class=detext style="box-shadow: 1px 1px 5px 1px purple;"]
ZT4ay68.png
[div class=tooltip] [div class=tooltiptext style="background: purple; border-color: purple;"] [div class=tooltiptextpoint][/div] Marianne Ross
AEGIS: TF 108[/div][/div] [/div] [div class=detext style="box-shadow: 1px 1px 5px 1px GoldenRod;"]
6FtNWPc.png
[div class=tooltip] [div class=tooltiptext style="background: GoldenRod; border-color: transparent GoldenRod transparent transparent;"] [div class=tooltiptextpoint][/div] Lucian Ross
Arena 13[/div][/div] [/div] [div class=detext style="box-shadow: 1px 1px 5px 1px SandyBrown;"]
QDKFpEk.png
[div class=tooltip] [div class=tooltiptext style="background: SandyBrown; border-color: SandyBrown;"] [div class=tooltiptextpoint][/div] Lilianne Ross
Saturday AM[/div][/div] [/div] [div class=detext style="box-shadow: 1px 1px 5px 1px black;"]
YkvgTXq.png
[div class=tooltip] [div class=tooltiptext style="background: black; border-color: black;"] [div class=tooltiptextpoint][/div] ??? ?????
????? ?? ???[/div][/div] [/div] [/div]


[div style="visibility: hidden; "]
[div style="visibility: visible; background: dodgerblue; padding: 10px 15px; border-radius: 5px; display: inline-block; color: white; margin: auto;"]code[/div]​
[div style="visibility: visible;"]
Code: 
[nobr]
[class=roster]
    position: relative;
    max-width: 800px;
    height: 420px;
    margin: 5px auto;
    padding: 10px 0;
    box-shadow: 0px 0px 5px ;
    display: flex;
    justify-content: space-around;
    align-items: center;
    align-content: space-evenly;
    flex-direction: column;
    flex-wrap: wrap;
    background-image: url('https://www.rpnation.com/media/8efc3bca-png.34924/full');
[/class]

[class=detext]
    position: relative;
    width: 125px;
    height:125px;
    display: block;
[/class]

[class=tooltip]
    width: 100%; height:100%;
    position: absolute;
    left: 0px; top: 0px;
    z-index: 1;
    opacity: 0;
    transition: opacity 1s, width .6s cubic-bezier(0.770, 0.000, 0.175, 1.000), height .5s cubic-bezier(0.770, 0.000, 0.175, 1.000);
    display:flex;
    align-items: flex-end;
    justify-content: flex-end;
[/class]

[class=tooltiptext]
    width: 125px;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    margin-right: -20px;
    position:relative;
    font-family: 'Book Antiqua';
[/class]

[class=tooltiptextpoint]
    content: "v";
    position: absolute;
    top: 30%;
    left: 0%;
    margin: -8px 0 0 -16px;
    border-width: 8px;
    border-style: solid;
    border-color: transparent;
    border-right-color: inherit;
[/class]

[class=title]
    display: inline-block;
    text-shadow: 1px 1px 5px black, -1px -1px 5px blue;
    color:ghostwhite;
    margin-bottom:-40px;
    transition: all .5s;
[/class]

[class=titlehov]
    text-shadow: 2px 2px 5px blue, -2px -2px 5px black;
[/class]

[class name=tooltip state=hover]
    opacity: .8; width: 130%; height:110%;
[/class]

[class name=tooltip state=active]
    opacity: .8; width: 193%;
[/class]

[script class=tooltip on=mouseenter]
   addClass titlehov title
[/script]

[script class=tooltip on=mouseleave]
   removeClass titlehov title
[/script]



[CENTER][div class=title][SIZE=7][h][font=Lobster]Character Roster[/font][/h][/SIZE][/div][/CENTER]

[div class=roster]
    [div class=detext style="box-shadow: 1px 1px 5px 1px DodgerBlue;"]
        [IMG]https://i.imgur.com/Rgzar2t.jpg[/IMG]
        [div  class=tooltip]
            [div  class=tooltiptext style="background: DodgerBlue; border-color: DodgerBlue;"]
                [div class=tooltiptextpoint][/div]
                Angkasa Soleil
                [br][/br]SoCal: Upland War
            [/div]
        [/div]
    [/div]

    [div class=detext style="box-shadow: 1px 1px  5px 1px Blue;"]
        [IMG]https://i.imgur.com/XJz92Nq.jpg[/IMG]
        [div  class=tooltip]
            [div  class=tooltiptext style="background: blue; border-color: blue;"]
                [div class=tooltiptextpoint][/div]
                Sterren
                [br][/br]SoCal: Upland War
            [/div]
        [/div]
    [/div]

    [div class=detext style="box-shadow: 1px 1px  5px 1px green;"]
        [IMG]https://i.imgur.com/584izmL.png?1[/IMG]
        [div  class=tooltip]
            [div  class=tooltiptext style="background: green; border-color: green;"]
                [div class=tooltiptextpoint][/div]
                Sienna Argante
                [br][/br]Blood & Glory
            [/div]
        [/div]
    [/div]
    
    [div class=detext style="box-shadow: 1px 1px  5px 1px olive;"]
        [IMG]https://i.imgur.com/xORx8es.png[/IMG]
        [div  class=tooltip]
            [div  class=tooltiptext style="background: olive; border-color: olive;"]
                [div class=tooltiptextpoint][/div]
                Azami Ryuudo
                [br][/br]Dere Festival
            [/div]
        [/div]
    [/div]

    [div class=detext style="box-shadow: 1px 1px  5px 1px maroon;"]
        [IMG]https://i.imgur.com/45Ch9iS.jpg[/IMG]
        [div  class=tooltip]
            [div  class=tooltiptext style="background: Maroon; border-color: Maroon;"]
                [div class=tooltiptextpoint][/div]
                Elva Rheanne
                [br][/br]Only Black Horse
            [/div]
        [/div]
    [/div]



    [div class=detext style="box-shadow: 1px 1px  5px 1px SaddleBrown;"]
        [IMG]https://i.imgur.com/phjIwc4.jpg[/IMG]
        [div  class=tooltip]
            [div  class=tooltiptext style="background: SaddleBrown; border-color: SaddleBrown;"]
                [div class=tooltiptextpoint][/div]
                Ravi
                [br][/br]B E T W E E N
            [/div]
        [/div]
    [/div]

    [div class=detext style="box-shadow: 1px 1px  5px 1px darkolivegreen;"]
        [IMG]https://i.imgur.com/lbVgvL4.jpg[/IMG]
        [div class=tooltip]
            [div  class=tooltiptext style="background: darkolivegreen; border-color: darkolivegreen;"]
                [div class=tooltiptextpoint][/div]
                Roland Tomas
                [br][/br]G H O S T
            [/div]
        [/div]
    [/div]

    [div class=detext style="box-shadow: 1px 1px  5px 1px navy;"]
        [IMG]https://i.imgur.com/ArePk5K.png[/IMG]
        [div  class=tooltip]
            [div  class=tooltiptext style="background: navy; border-color: navy;"]
                [div class=tooltiptextpoint][/div]
                Adrian Ross
                [br][/br]GHOST OUT
            [/div]
        [/div]
    [/div]

    [div class=detext style="box-shadow: 1px 1px  5px 1px purple;"]
        [IMG]https://i.imgur.com/ZT4ay68.png[/IMG]
        [div  class=tooltip]
            [div  class=tooltiptext style="background: purple; border-color: purple;"]
                [div class=tooltiptextpoint][/div]
                [URL='https://www.rpnation.com/threads/ross-m.248677/'][COLOR=rgb(255, 255, 255)][U]Marianne Ross[/U][/COLOR][/URL]
                [br][/br][URL='https://www.rpnation.com/forums/aegis-training-facility-108.9510/'][COLOR=rgb(255, 255, 255)][U]AEGIS: TF 108[/U][/COLOR][/URL]
            [/div]
        [/div]
    [/div]

    [div class=detext style="box-shadow: 1px 1px  5px 1px GoldenRod;"]
        [IMG]https://i.imgur.com/6FtNWPc.png[/IMG]
        [div  class=tooltip]
            [div  class=tooltiptext style="background: GoldenRod; border-color: transparent GoldenRod transparent transparent;"]
                [div class=tooltiptextpoint][/div]
                Lucian Ross
                [br][/br]Arena 13
            [/div]
        [/div]
    [/div]

    [div class=detext style="box-shadow: 1px 1px  5px 1px SandyBrown;"]
        [IMG]https://i.imgur.com/QDKFpEk.png[/IMG]
        [div  class=tooltip]
            [div  class=tooltiptext style="background: SandyBrown; border-color: SandyBrown;"]
                [div class=tooltiptextpoint][/div]
                Lilianne Ross
                [br][/br]Saturday AM
            [/div]
        [/div]
    [/div]

    [div class=detext style="box-shadow: 1px 1px  5px 1px black;"]
        [IMG]https://i.imgur.com/YkvgTXq.png[/IMG]
        [div  class=tooltip]
            [div  class=tooltiptext style="background: black; border-color: black;"]
                [div class=tooltiptextpoint][/div]
                ??? ?????
                [br][/br]????? ?? ???
            [/div]
        [/div]
    [/div]

[/div]

[/nobr]
[/div]
[/div]
 
You must log in or register to reply here.

Users who are viewing this thread

Total: 2 (members: 0, guests: 2)

Similar threads

mizton
Help quote bubble codes?
Replies
1
Views
146
Uxie
Uxie
roxybirdie
Closed music player button [resolved]
Replies
2
Views
408
roxybirdie
roxybirdie
arsensonfire
Help Anyone's shop still open?
Replies
1
Views
235
The Dark Wizard
The Dark Wizard
Back
Top