Képes szövegdoboz:
<link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css"></link><link href="http://fonts.googleapis.com/css?family=Arvo" rel="stylesheet" type="text/css"></link>
<style type="text/css">
.razzi {width: 360px; height: 160px; background-color: #caecae; border: 15px solid #eee;}
.boii {font-family: 'Oswald', sans-serif; padding: 10px;}
.druunk {width: 185px;letter-spacing: 1px; font-family: 'Arvo', serif;line-height: 90%;text-align: justify;overflow: auto; font-size: 10px; padding: 5px; background-color: #fff; height: 100px; margin-right: 5px; float: right; }
</style>
<br />
<center>
<div class="razzi">
<div style="float: left; padding: 5px; width: 150px;">
<img src="http://placehold.it/150" style="height: 150px; width: 150px;" /></div>
<div class="boii">
USERNAME • ONLINE</div>
<div class="druunk">
instant message goes here doll face. it can be as long or as short as you want. </div>
</div>
<a href="http://shine.b1.jcink.com/index.php?showuser=4262">▼</a>
</center>
<style type="text/css">
.razzi {width: 360px; height: 160px; background-color: #caecae; border: 15px solid #eee;}
.boii {font-family: 'Oswald', sans-serif; padding: 10px;}
.druunk {width: 185px;letter-spacing: 1px; font-family: 'Arvo', serif;line-height: 90%;text-align: justify;overflow: auto; font-size: 10px; padding: 5px; background-color: #fff; height: 100px; margin-right: 5px; float: right; }
</style>
<br />
<center>
<div class="razzi">
<div style="float: left; padding: 5px; width: 150px;">
<img src="http://placehold.it/150" style="height: 150px; width: 150px;" /></div>
<div class="boii">
USERNAME • ONLINE</div>
<div class="druunk">
instant message goes here doll face. it can be as long or as short as you want. </div>
</div>
<a href="http://shine.b1.jcink.com/index.php?showuser=4262">▼</a>
</center>
Kerekített sarkú, egyszerűbb szövegdoboz:
<link href="//fonts.googleapis.com/css?family=Crete+Round:400|Advent+Pro:400" rel="stylesheet" type="text/css">
<div style="width:350px; height:220px; background-color:#B7CBBF;padding-top:2px; padding:10px; border-radius:50px 0px 50px 0px; border-bottom:5px solid #F9A799; border-top:5px solid #F4BFAD;">
<div style="color:#8C886F; border-bottom: 3px double #8C886F; text-align:center; font: 34px 'Crete Round'; ">Rules</div>
<p style="color:#8C886F; margin:30px; font: 14px
'advent pro'; ">Don't steal. Leave the credit on. All that good stuff. Change whatever colors you wish; change anything you like, really. If you want wish to use this as a base code, that's fine as long as my credit stays on. Link me to where you're using this because I'm vain and like to see my stuff. <span style="color:#f9a799; text-shadow: 3px 3px 3px #444;">♥</span>
<br><br><span style="background-color:white"><span style="color:#AADEAD; ">#AADEAD</span> <span style="color:#BBDEAD; ">#BBDEAD</span> <span style="color:#CCDEAD; ">#CCDEAD</span> <span style="color:#DDDEAD; ">#DDDEAD</span> <span style="color:#EEDEAD; ">#EEDEAD</span></span>
</div>
</div>
<div style="width:350px; height:220px; background-color:#B7CBBF;padding-top:2px; padding:10px; border-radius:50px 0px 50px 0px; border-bottom:5px solid #F9A799; border-top:5px solid #F4BFAD;">
<div style="color:#8C886F; border-bottom: 3px double #8C886F; text-align:center; font: 34px 'Crete Round'; ">Rules</div>
<p style="color:#8C886F; margin:30px; font: 14px
'advent pro'; ">Don't steal. Leave the credit on. All that good stuff. Change whatever colors you wish; change anything you like, really. If you want wish to use this as a base code, that's fine as long as my credit stays on. Link me to where you're using this because I'm vain and like to see my stuff. <span style="color:#f9a799; text-shadow: 3px 3px 3px #444;">♥</span>
<br><br><span style="background-color:white"><span style="color:#AADEAD; ">#AADEAD</span> <span style="color:#BBDEAD; ">#BBDEAD</span> <span style="color:#CCDEAD; ">#CCDEAD</span> <span style="color:#DDDEAD; ">#DDDEAD</span> <span style="color:#EEDEAD; ">#EEDEAD</span></span>
</div>
</div>
Dupla keretes, görgetősáv, gifes szövegdoboz:
<style>
.mindcontrol { height: 230px; overflow: auto; padding-right: 4px; }
.mindcontrol b { color:#556677 }
.mindcontrol::-webkit-scrollbar { width: 5px; height: 5px; }
.mindcontrol::-webkit-scrollbar-track { width: 5px; background-color: #ffeedd; }
.mindcontrol::-webkit-scrollbar-thumb { background-color: #ddbbbb; }
.friiday:hover { position: relative; left: -220px; transition: 1.3s; -webkit-transition: all 1.3s ease; -moz-transition: all 1.3s ease; -ms-transition: all 1.3s ease; -o-transition: all 1.3s ease; }
.friiday { position: relative; left: 2px; transition: 1.3s; text-align; center; -webkit-transition: all 1.3s ease; -moz-transition: all 1.3s ease; -ms-transition: all 1.3s ease; -o-transition: all 1.3s ease; }
</style>
<center>
<div style="background-color:#ddbbbb; width: 250px; height: 400px; padding: 15px; ">
<div style="background-color:#fff; border: solid 5px #ffeedd;padding: 20px; font-family: arial; font-size: 9px; color: #000; text-align: justify; width: 200px; height: 350px; opacity: 0.95; overflow: hidden;">
<div class="mindcontrol">
POST GOES HERE.
</div>
<div class="friiday"><table><td><div style="font-family: times; font-size: 24px; color: #ddbbbb; text-shadow: 1px 1px #556677; font-weight: bold; line-height: 20px; width: 210px;"><i>how is this friday?</i></div></td><td>
<div style="color: #556677; text-transform: uppercase; font-size: 8px; letter-spacing: 1px; text-align: center; width: 200px; ">tag - notes</div></td></table></div>
<a href="http://shine.b1.jcink.com/index.php?showuser=3389" title="thanks joei"><img src="https://placehold.it/200x150" width="200"></a>
</div>
</div>
</center>
.mindcontrol { height: 230px; overflow: auto; padding-right: 4px; }
.mindcontrol b { color:#556677 }
.mindcontrol::-webkit-scrollbar { width: 5px; height: 5px; }
.mindcontrol::-webkit-scrollbar-track { width: 5px; background-color: #ffeedd; }
.mindcontrol::-webkit-scrollbar-thumb { background-color: #ddbbbb; }
.friiday:hover { position: relative; left: -220px; transition: 1.3s; -webkit-transition: all 1.3s ease; -moz-transition: all 1.3s ease; -ms-transition: all 1.3s ease; -o-transition: all 1.3s ease; }
.friiday { position: relative; left: 2px; transition: 1.3s; text-align; center; -webkit-transition: all 1.3s ease; -moz-transition: all 1.3s ease; -ms-transition: all 1.3s ease; -o-transition: all 1.3s ease; }
</style>
<center>
<div style="background-color:#ddbbbb; width: 250px; height: 400px; padding: 15px; ">
<div style="background-color:#fff; border: solid 5px #ffeedd;padding: 20px; font-family: arial; font-size: 9px; color: #000; text-align: justify; width: 200px; height: 350px; opacity: 0.95; overflow: hidden;">
<div class="mindcontrol">
POST GOES HERE.
</div>
<div class="friiday"><table><td><div style="font-family: times; font-size: 24px; color: #ddbbbb; text-shadow: 1px 1px #556677; font-weight: bold; line-height: 20px; width: 210px;"><i>how is this friday?</i></div></td><td>
<div style="color: #556677; text-transform: uppercase; font-size: 8px; letter-spacing: 1px; text-align: center; width: 200px; ">tag - notes</div></td></table></div>
<a href="http://shine.b1.jcink.com/index.php?showuser=3389" title="thanks joei"><img src="https://placehold.it/200x150" width="200"></a>
</div>
</div>
</center>
Képes szövegdoboz:
<div style="color: #ae9f71; font-family: miniver; font-size: 35px; text-shadow: 1px 0px white, 0px 1px white, -1px 0px white, 0px -1px white; width: 180px;">
Üdv itt!
</div>
<div style="color: #9d968d; font-family: arial narrow; font-size: 9px; margin-top: 7px; text-transform: uppercase; width: 195px;">
Ide is jön szöveg
</div>
<div style="color: #9d968d; font-family: georgia; font-size: 8px; letter-spacing: 2px; line-height: 90%; text-align: justify; width: 155px;">
szöveg,szöveg,szöveg,szöveg ééééééés szöveeeeeeeeeeeeg
</div>
<br />
<div style="border-top: 5px solid black; color: #ae9f71; font-family: tahoma; font-size: 11px; height: 170px; line-height: 90%; line-xolor: #ae9f71; overflow: auto; padding: 5px; text-align: justify; width: 150px;">
BlahblahblhablahBlahblahblhablahBlahblahblhablahBlahblahblhablahBlahblahblhablahBlahblahblhablahBlahblahblhablahBlahblahblhablahBlahblahblhablahBlahblahblhablahBlahblahblhablahBlahblahblhablahBlahblahblhablahBlahblahblhablahBlahblahblhablahBlahblahblhablahBlahblahblhablahBlahblahblhablahBlahblahblhablahBlahblahblhablahBlahblahblhablahBlahblahblhablahBlahblahblhablahBlahblahblhablahBlahblahblhablahBlahblahblhablahBlahblahblhablahBlahblahblhablahBlahblahblhablahBlahblahblhablahBlahblahblhablahBlahblahblhablahBlahblahblhablah
</div>
<span style="font-style: italic;"><span style="font-weight: bold;">Puszipá</span></span>
</div>