Skip to content

Instantly share code, notes, and snippets.

@cfleschhut

cfleschhut/css3_snippets.css

Created May 23, 2011 20:51
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 cfleschhut/987578 to your computer and use it in GitHub Desktop.
Save cfleschhut/987578 to your computer and use it in GitHub Desktop.
Download ZIP
CSS3 Snippets [TVM]
Raw
css3_snippets.css
.default {
width: 100px; height: 100px; background: orange;
text-align: center; line-height: 100px;
position: absolute; top: 50px; left: 50px;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
}
/* Gradients (linear/radial) */
.gradient-linear {
background: -webkit-gradient(linear, 0 0, 100% 100%, from(tomato), to(tomato), color-stop(0.5, papayawhip));
background: -moz-linear-gradient(0% 100% 0deg, papayawhip, tomato);
}
.gradient-radial {
background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(papayawhip), to(tomato));
background: -moz-radial-gradient(center, circle closest-corner, papayawhip 0%, tomato 100%);
}
/* Transitions */
.transition {
-webkit-transform: translate(100px, 0);
-moz-transform: translate(100px, 0);
}
/* Animations (WebKit) */
@-webkit-keyframes bounce {
from {
-webkit-transform: scale(0.5) rotate(0deg);
}
to {
-webkit-transform: scale(2) rotate(-360deg);
}
}
.animation {
-webkit-animation: bounce 0.5s infinite alternate;
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 Snippets</title>
<link rel="stylesheet" href="css3_snippets.css">
<script>
function setClassName(el, cls) {
el.className.indexOf(cls) != -1 ? el.className = el.className.replace(new RegExp(" "+cls), "") : el.className += " "+cls;
}
</script>
</head>
<body>
<div id="foo" class="default" onclick='setClassName(this, "transition");'></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment