Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <h1>Abcfghijklmnopq</h1>
</body>
</html>
 
BODY {
  background: white;
  text-align: center;
  font-family: Georgia;
}
H1 {
  font-size: 50px;
  font-weight: normal;
  cursor: pointer;
  text-shadow: 1px 1px 0 hsl(20,100%,50%),
               2px 2px 0 hsl(20,100%,50%),
               3px 3px 0 hsl(35,100%,50%),
               4px 4px 0 hsl(35,100%,50%),
               5px 5px 0 hsl(45,100%,50%),
               6px 6px 0 hsl(45,100%,55%),
               7px 7px 0 hsl(55,100%,60%),
               8px 8px 0 hsl(55,100%,65%);
  color: hsl(0,100%,40%);
  transition: all 1s;
  }
  H1:hover {
    text-shadow: 1px -1px 0 hsl(290,100%,40%),
               2px -2px 0 hsl(290,100%,40%),
               3px -3px 0 hsl(280,100%,60%),
               4px -4px 0 hsl(280,100%,60%),
               5px -5px 0 hsl(270,100%,75%),
               6px -6px 0 hsl(270,100%,80%),
               7px -7px 0 hsl(260,100%,85%),
               8px -8px 0 hsl(260,100%,90%);
      color: hsl(300,100%,30%);
    }
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x