Skip to content

Instantly share code, notes, and snippets.

@ajduke

ajduke/index.html

Forked from anonymous/index.html
Last active February 12, 2016 17:41
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ajduke/bcb5659b38a45b11d88d to your computer and use it in GitHub Desktop.
Save ajduke/bcb5659b38a45b11d88d to your computer and use it in GitHub Desktop.
Download ZIP
A simple experiment on new CSS features- JS Bin// source https://jsbin.com/wijeni
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
ul {
box-shadow: 1px 1px 3px #555;
margin:50px auto;
padding: 0px;
width: 120px;
transition: all .2s ease-in, transform 1.8s ease-in-out;
text-align: center;
}
ul:hover {
box-shadow: 2px 4px 3px #555;
cursor: pointer;
background: lightblue;
color: brown;
transform: rotate(360deg) scale(1.2);
}
li {
box-sizing: border-box;
width: 100%;
list-style: none;
padding: 10px 10px;
background:#fff;
background: transparent;
}
li:not(:last-child){
border-bottom: 1px solid #111;
}
</style>
</head>
<body>
<ul>
<li>First</li>
<li>Second</li>
<li>Last</li>
</ul>
<script id="jsbin-source-css" type="text/css">ul {
box-shadow: 1px 1px 3px #555;
margin:50px auto;
padding: 0px;
width: 120px;
transition: all .2s ease-in, transform 1.8s ease-in-out;
text-align: center;
}
ul:hover {
box-shadow: 2px 4px 3px #555;
cursor: pointer;
background: lightblue;
color: brown;
transform: rotate(360deg) scale(1.2);
}
li {
box-sizing: border-box;
width: 100%;
list-style: none;
padding: 10px 10px;
background:#fff;
background: transparent;
}
li:not(:last-child){
border-bottom: 1px solid #111;
}</script>
</body>
</html>
Raw
jsbin.wijeni.css
ul {
box-shadow: 1px 1px 3px #555;
margin:50px auto;
padding: 0px;
width: 120px;
transition: all .2s ease-in, transform 1.8s ease-in-out;
text-align: center;
}
ul:hover {
box-shadow: 2px 4px 3px #555;
cursor: pointer;
background: lightblue;
color: brown;
transform: rotate(360deg) scale(1.2);
}
li {
box-sizing: border-box;
width: 100%;
list-style: none;
padding: 10px 10px;
background:#fff;
background: transparent;
}
li:not(:last-child){
border-bottom: 1px solid #111;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment