scott23 · February 24, 2012 21:51
diff --git a/dabblet.css b/dabblet.css
 /**
 * CSS3 Slideout Arrow
 */
 .userContent {
   padding: 0 5px;
   width: 230px;
   animation: myfirst 1s;
   background: limegreen;
   height: 40px;
   line-height:40px;
   float:left;
   }

 .arrow-right {
   animation: myfirst 1s;
   float:left;
   width: 0;
   height: 0;
   border-top: 20px solid transparent;
   border-bottom: 20px solid transparent;
   border-left: 20px solid limegreen;
 }
 .tablecontent {
   margin: 0 7px;
   border: 2px solid limegreen;
   padding: 2px 3px;
   width: 50%;
   box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.17);
 }
 .user {
   animation: myfirst 1s;
 }

 @keyframes myfirst {
  from { width: 0px; opacity: 0; }
  to   { width: 230px; opacity: 1;}
 }

 body {
  padding: 20px;
 }
 * { margin: 0; padding: 0; }
diff --git a/dabblet.html b/dabblet.html
 <!-- content to be placed inside <body>…</body> -->

 <div class="userContent"><p class="user">Username here</p></div>
 <div class="arrow-right"></div>
diff --git a/settings.json b/settings.json
 {"view":"separate","seethrough":"","prefixfree":"1","page":"all"}
	/**
	* CSS3 Slideout Arrow
	*/
	.userContent {
	padding: 0 5px;
	width: 230px;
	animation: myfirst 1s;
	background: limegreen;
	height: 40px;
	line-height:40px;
	float:left;
	}

	.arrow-right {
	animation: myfirst 1s;
	float:left;
	width: 0;
	height: 0;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 20px solid limegreen;
	}
	.tablecontent {
	margin: 0 7px;
	border: 2px solid limegreen;
	padding: 2px 3px;
	width: 50%;
	box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.17);
	}
	.user {
	animation: myfirst 1s;
	}

	@keyframes myfirst {
	from { width: 0px; opacity: 0; }
	to { width: 230px; opacity: 1;}
	}

	body {
	padding: 20px;
	}
	* { margin: 0; padding: 0; }
	<!-- content to be placed inside <body>…</body> -->

	<div class="userContent"><p class="user">Username here</p></div>
	<div class="arrow-right"></div>