InsaneJournal
Tweak says, "I met a possum"
Username:
Password:
Remember Me
Create Account
IJ Login
OpenID Login
Search by
:
Username
E-mail
Region
Interest
AOL IM
ICQ Number
Yahoo! ID
MSN Username
Jabber
View
Create Account
IJ Login
OpenID Login
Journal
Post
Edit Entries
Customize Journal
Comment Settings
Recent Comments
Manage Tags
Account
Manage Account
Viewing Options
Manage Profile
Manage Notifications
Manage Pictures
Manage Schools
Account Status
Friends
Edit Friends
Edit Custom Groups
Friends Filter
Nudge Friends
Invite
Create RSS Feed
Asylums
Post
Asylum Invitations
Manage Asylums
Create Asylum
Site
Support
Upgrade Account
FAQs
Search By Location
Search By Interest
Search Randomly
Ally -- are you already gone? (
wastintime
) wrote in
rp_tutorials
,
@
2011
-
09
-
26
01:16:00
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> <style type="text/css"> body { font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif; font-size:24px; line-height: 28px; font-weight:bold; letter-spacing: 2px; color:#CCC; text-shadow: 0 -1px 2px #000; text-align: center; background: #161616 url('http://i.imgur.com/XYFPE.gif') repeat-x top left fixed; padding: 25px; } 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 <span class="bio house"> <img src="http://krisallen.net/grabbr/sc?USERNAME" /> <em>Name Name</em> <p class="birth"><b>Birth:</b> DD Month YYYY <span class="sep">|</span> Location</p> <p class="race"><b>Race:</b> Type <span class="sep">|</span> Blood</p> <p class="job"><b>Occupation:</b> Job <span class="sep">|</span> Location</p> <p class="edu"><b>Education:</b> House <span class="yr">(YYYY)</span> <span class="sep">|</span> School</p> <p class="marital"><b>Marital Status:</b> Status <span class="yr">(YYYY)</span> <span class="sep">|</span> Significant Other</p> <p class="kids"><b>Children:</b> Name Name <span class="yr">(YYYY)</span>, Name Name <span class="yr">(YYYY)</span>, Name Name <span class="yr">(YYYY)</span></p> <p class="status">(Status)</p> </span> </a> </div> </body> </html>
Leave any questions or feedback in the comments, thanks!
(
Read comments
)
Post a comment in response:
From:
( )
Anonymous
- this user has disabled anonymous posting.
( )
OpenID
InsaneJournal user
Username:
Password:
Login?
Don't have an account?
Create one now
.
Subject:
No HTML allowed in subject
Don't auto-format:
Message:
Check spelling during preview