Character Creation 2
Tables 2
Step By Step 3
Character Advancement 6
Qualities 7
Character Creation 2
Tables 2
Step By Step 3
Character Advancement 6
Qualities 7
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta name="description" content="[add your bin description]" /> | |
<title>Simple Map</title> | |
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> | |
<meta charset="utf-8"> | |
<style> | |
html, body, #map-canvas { | |
height: 100%; |
/* jshint esnext: true */ | |
var array = [1337, 1553, 1224], | |
i = 0, | |
l = list(), | |
item = l.next(); | |
function *list() { | |
for (var c = 0; c < array.length; c++) { | |
yield array[c]; | |
} | |
} |
/** | |
* shirt | |
*/ | |
background: red; | |
background-image: radial-gradient(#000 50%,#000 50%,#fff 50%), radial-gradient(#000 50%,#000 50%,#fff 50%), | |
radial-gradient(#000 50%,#000 50%,#fff 50%), linear-gradient(45deg, transparent 45%, #fff 45%, #fff 55%,#fff 55%), | |
linear-gradient(-45deg,transparent 45%, #fff 45%, #fff 55%, #fff 55%), linear-gradient(90deg,transparent 45%, #fff 45%, #fff 55%, #fff 55%), linear-gradient(#fff,#fff), linear-gradient( 90deg,#fff,#fff), | |
linear-gradient( 90deg,#fff,#fff); | |
background-size: 15px 15px,15px 15px,15px 15px, 100px 100px, 100px 100px, 35px 200px, 10px 20px, 30px 10px, 30px 10px; | |
background-position: 93px 120px,93px 170px,93px 220px,0px -15px, 100px -15px, 75px 85px, 140px 150px, 140px 150px, 140px 170px ; |
.mouth{ | |
background: black; | |
background-image: linear-gradient(#ccc,#fff), linear-gradient(#fff,#ccc); | |
background-size: 100% 20px; | |
background-position: center 0px, center 20px; | |
background-repeat: no-repeat; | |
height: 40px; | |
width: 20%; | |
animation: lips 1s linear infinite; | |
position: relative; |
/** | |
* lined background | |
*/ | |
div{ | |
background: linear-gradient(0deg, #bbb 1px, transparent 1px ),linear-gradient(90deg,transparent 45px, #bbb 50px, transparent 51px); | |
background-size: 1px 1.5em,auto ; | |
background-position:0 -.4em ; | |
min-height: 100%; | |
line-height:1.5em; | |
font-size:1em; |
/** | |
* The first commented line is your dabblet’s title | |
*/ | |
div{ | |
font-size:1em; | |
width:180px; | |
line-height:1em; | |
max-height:2em; | |
overflow:hidden; |
/** | |
* rounded border inside | |
*/ | |
.container{ | |
border-radius:7px; | |
margin:5px; | |
padding:15px; | |
background:white; | |
position:relative; | |
} |
/** | |
* load animation | |
*/ | |
.circle{ | |
position:absolute; | |
border:5px red solid; | |
border-color:red red transparent transparent; | |
width:190px; | |
height:190px; | |
border-radius:100px 100px 100px 100px; |
/* | |
3d Demo | |
*/ | |
#wrapper{ | |
perspective:500px; | |
height:100px; | |
background:slategray; | |
} | |
#wrapper div{ | |
height:100px; |