Códigos para efeitos

<link href='http://fonts.googleapis.com/css?family=Wire+One' rel='stylesheet' type='text/css'><link href='http://fonts.googleapis.com/css?family=Montez' rel='stylesheet' type='text/css'><center><div style="width: 600px; padding: 2px; border-right: 8px solid #B8860B; border-left: 8px solid #B8860B; -moz-border-radius: 50px 50px 30px 30px; border-radius: 50px 50px 30px 30px;"><div style="width: 500px; height: 200px; background-image: url(http://media.tumblr.com/tumblr_lvovjcEUrE1r3h4ef.gif); -moz-border-radius: 50px 50px 50px 50px; border-radius: 50px 50px 50px 50px;"></div><BR><div style="width:450px; color: #DAA520; font-family: Montez; text-align: left; font-size:40px; padding-top: 0px; padding-bottom: 0px;">Cause i'm only a crack...</div>
<div style="width:450px; color: gray; font-family: Wire One; font-size: 24px; text-transform: uppercase; text-align: Right; padding-top: 0px; padding-bottom: 0px;">In this Castle Of Glass.</div>
<div style="width: 450px; padding: 5px; border-right: 1px dotted #B8860B; border-left: 1px dotted #B8860B; font-family: trebuchet ms; font-size: 11px; text-align: justify; letter-spacing: 2px; overflow: auto;">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

<center><style text="text/css">#image { width: 420px; height: 150px; background-image: url(xxx); border-top: 1px dashed #9C9C9C; border-bottom: 1px dashed #9C9C9C; }#box { width: 420px; }#box:hover #info { display: block; }#infotitle { width: 305px; background-color: #B8860B; padding: 10px; text-align: center; font-family:wire one; font-size: 30px; letter-spacing: 5; color: #FFFFFF; text-transform: uppercase; -webkit-transition-property: color, background-color, letter-spacing; -webkit-transition-duration: .5s, .5s, .5s; -webkit-transition-timing-function: linear, ease-in; -moz-transition-property: color, background-color; -moz-transition-duration: .5s, .5s, .5s; -moz-transition-timing-function: linear, ease-in; }#infotitle:hover { display: block; width: 305px; background-color: #B8860B; padding: 10px; text-align: center; font-family: wire one; font-size: 30px; letter-spacing: 15; color: #FFFFFF; text-transform: uppercase; }#info { display: none; -moz-transition: display .5s ease-in; -webkit-transition: display .5s ease-in; width: 305px; padding: 10px; background-color: #B8860B; text-align: justify; font-family: tahoma; font-size: 12px; color: #FFFFFF; line-height: .9; -webkit-border-radius: 0px 0px 10px 10px; -moz-border-radius: 0px 0px 50px 50px;} #box { width: 320px; }#boxy:hover #plotting { display: block; } #plotting { display: none; -moz-transition: display .5s ease-in; -webkit-transition: display .5s ease-in; width: 220px; border-left: 15px solid #FFFFFF; border-right: 15px solid #FFFFFF; border-bottom: 15px solid #FFFFFF; padding: 10px; background-color: #B8860B; text-align: justify; font-family: arial; font-size: 9px; color: #EE3B3B; line-height: .9; } </style><center><BR><BR><link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'><style class="text/css">@import url(http://fonts.googleapis.com/css?family=Wire+One);</style></div><div style="position: relative; "><div id="box"><div id="infotitle">OBSERVAÇÕES</div><div id="info">


Arma I ▬ Descrição.



Poder Ativo I ▬ Descrição.



Poder Passivo I ▬ Descrição.

Enfim, editem aqui conforme a criatividade de vocês.</div>
<BR><BR>
</div></div></div></center>



</div></center>