InsaneJournal

Tweak says, "change my tune, please!"

Ally -- are you already gone? (wastintime) wrote in rp_tutorials,
@ 2011-09-26 01:16:00

Entry tags:

coding: cast list

Super-Badass Character List That Will Make You Want To Slap Yo Mama

Live Example

I know right?

It took me a few days and several hours to figure this out so I'd appreciate it if you credited

rp_tutorials. Or you can pay me in cookies. Whichever is easier for you. Mkay?

THE SCRIBBLD CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Page Title</title>

a, a:link, a:visited {
	color:#CCC;
	text-decoration: none;
}

a:hover {
	color:#888;
}

b {
	font-weight: bold;
}

.character {
	padding: 15px;
	background: transparent;
	display: inline-block;
        text-align: justify;
}

.tooltip {
	position: relative;
}

.tooltip .bio {
  display: block;
  opacity: 0;
  position: absolute;
  padding: 15px;
  left: 0;
  top: -10px;
  z-index: 99;
  width: 420px;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: normal;
  line-height: 12px;
  border-radius: 5px 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  transition: opacity 2s;
  -moz-transition: opacity 2s;
  -webkit-transition: opacity 2s;
  -o-transition: opacity 2s;
}

.tooltip:hover .bio {
  opacity: 1;
}
.tooltip img {
  margin: -10px 10px 0 -55px;
  float: left;
  width: 100px;
  height: 100px;
  border-radius: 5px 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
.tooltip em {
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  font-size: 24px;
  line-height: 28px;
  font-weight: bold;
  font-style: italic;
  display: inline-block;
  padding: 5px 0 10px;
}

.house {
  color: #333;
  text-shadow: 0 -1px 2px #888;
  background: rgb(242,242,242); /* Old browsers */
  background: -moz-linear-gradient(top, rgba(242,242,242,1) 0%, rgba(170,170,170,1) 100%); /* FF3.6+ */ 
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(242,242,242,1)), color-stop(100%,rgba(170,170,170,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(242,242,242,1) 0%,rgba(170,170,170,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(242,242,242,1) 0%,rgba(170,170,170,1) 100%); /* Opera11.10+ */
  background: -ms-linear-gradient(top, rgba(242,242,242,1) 0%,rgba(170,170,170,1) 100%); /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#aaaaaa',GradientType=0 ); /* IE6-9 */
  background: linear-gradient(top, rgba(242,242,242,1) 0%,rgba(170,170,170,1) 100%); /* W3C */
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
  border: 2px solid #333;
}

.house img {
  border: 2px solid #333;
}

.huff {
background: rgb(255,246,81); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,246,81,1) 0%, rgba(239,199,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,246,81,1)), color-stop(100%,rgba(239,199,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,246,81,1) 0%,rgba(239,199,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,246,81,1) 0%,rgba(239,199,0,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(255,246,81,1) 0%,rgba(239,199,0,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff651', endColorstr='#efc700',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(255,246,81,1) 0%,rgba(239,199,0,1) 100%); /* W3C */
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
  border: 2px solid #333;
  color: #333;
}

.huff img {
  border: 2px solid #333;
}

.gryff {
background: rgb(255,0,0); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,0,0,1) 0%, rgba(43,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,0,0,1)), color-stop(100%,rgba(43,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,0,0,1) 0%,rgba(43,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,0,0,1) 0%,rgba(43,0,0,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(255,0,0,1) 0%,rgba(43,0,0,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#2b0000',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(255,0,0,1) 0%,rgba(43,0,0,1) 100%); /* W3C */
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
  border: 2px solid #F9D402;
  color: #F9D402;
}

.gryff img {
  border: 2px solid #F9D402;
}

.raven {
background: rgb(7,0,226); /* Old browsers */
background: -moz-linear-gradient(top, rgba(7,0,226,1) 0%, rgba(2,0,35,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(7,0,226,1)), color-stop(100%,rgba(2,0,35,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(7,0,226,1) 0%,rgba(2,0,35,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(7,0,226,1) 0%,rgba(2,0,35,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(7,0,226,1) 0%,rgba(2,0,35,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0700e2', endColorstr='#020023',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(7,0,226,1) 0%,rgba(2,0,35,1) 100%); /* W3C */
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
  border: 2px solid #9B6700;
  color: #9B6700;
}

.raven img {
  border: 2px solid #9B6700;
}

.slyth {
background: rgb(9,135,13); /* Old browsers */
background: -moz-linear-gradient(top, rgba(9,135,13,1) 0%, rgba(0,25,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(9,135,13,1)), color-stop(100%,rgba(0,25,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(9,135,13,1) 0%,rgba(0,25,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(9,135,13,1) 0%,rgba(0,25,0,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(9,135,13,1) 0%,rgba(0,25,0,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#09870d', endColorstr='#001900',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(9,135,13,1) 0%,rgba(0,25,0,1) 100%); /* W3C */
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
  border: 2px solid #CCC;
  color: #CCC;
}

.slyth img {
  border: 2px solid #CCC;
}

.beaux {
background: rgb(15,216,213); /* Old browsers */
background: -moz-linear-gradient(top, rgba(15,216,213,1) 0%, rgba(0,74,178,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(15,216,213,1)), color-stop(100%,rgba(0,74,178,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(15,216,213,1) 0%,rgba(0,74,178,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(15,216,213,1) 0%,rgba(0,74,178,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(15,216,213,1) 0%,rgba(0,74,178,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0fd8d5', endColorstr='#004ab2',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(15,216,213,1) 0%,rgba(0,74,178,1) 100%); /* W3C */
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
  border: 2px solid #0B00A5;
  color: #0B00A5;
}

.beaux img {
  border: 2px solid #0B00A5;
}

.durm {
background: rgb(137,71,9); /* Old browsers */
background: -moz-linear-gradient(top, rgba(137,71,9,1) 0%, rgba(56,21,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(137,71,9,1)), color-stop(100%,rgba(56,21,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(137,71,9,1) 0%,rgba(56,21,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(137,71,9,1) 0%,rgba(56,21,0,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(137,71,9,1) 0%,rgba(56,21,0,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#894709', endColorstr='#381500',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(137,71,9,1) 0%,rgba(56,21,0,1) 100%); /* W3C */
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
  border: 2px solid #EA9000;
  color: #EA9000;
}

.durm img {
  border: 2px solid #EA9000;
}

.other {
background: rgb(192,63,252); /* Old browsers */
background: -moz-linear-gradient(top, rgba(192,63,252,1) 0%, rgba(64,0,117,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(192,63,252,1)), color-stop(100%,rgba(64,0,117,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(192,63,252,1) 0%,rgba(64,0,117,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(192,63,252,1) 0%,rgba(64,0,117,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(192,63,252,1) 0%,rgba(64,0,117,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c03ffc', endColorstr='#400075',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(192,63,252,1) 0%,rgba(64,0,117,1) 100%); /* W3C */
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
  border: 2px solid #00FFAE;
  color: #00FFAE;
}

.other img {
  border: 2px solid #00FFAE;
}

</style>
</head>

<body>
<div class="character">
 <a href="#" class="tooltip">
 Name Name
 
 <img src="http://krisallen.net/grabbr/sc?USERNAME" />
 Name Name
 	Birth: DD Month YYYY | Location
 Race: Type | Blood
 Occupation: Job | Location
 Education: House (YYYY) | School
 Marital Status: Status (YYYY) | Significant Other
 Children: Name Name (YYYY), Name Name (YYYY), Name Name (YYYY)
 (Status)
 
 </a>
</div>
</body>
</html>

Leave any questions or feedback in the comments, thanks!

	burningstars 2011-09-26 09:37 pm UTC (link)
	If I could give you a lifetime supply of your favorite cookies, I would. That's how epic this is! (Reply to this)