InsaneJournal

Tweak says, "We're the running free."

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!

	disparagingrant 2011-12-01 07:40 pm UTC (link)
	This might be a stupid question but I've looked around and am not really finding any answers. Is it possible to put an actual link within the character box? To link back to the ij journal or profile? (Reply to this)