Skip to content

Instantly share code, notes, and snippets.

@fitzgeraldsteele

fitzgeraldsteele/css3test.html

Created March 21, 2011 05:30
Show Gist options
  • Save fitzgeraldsteele/879080 to your computer and use it in GitHub Desktop.
Save fitzgeraldsteele/879080 to your computer and use it in GitHub Desktop.
Download ZIP
css3 test: opacity, transition, reflection, transform
Raw
css3test.html
<DOCTYPE html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>csstest</title>
<style type="text/css" media="screen">
img:hover {border:#CCC 2px solid;
opacity:1.0;
-webkit-transition:opacity 1s ease-in;
-moz-transition:opacity 1s ease-in;
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, color-stop(0.5, transparent), to(rgba(255, 255, 255, 0.5)));
-moz-box-reflect: below 0px
-moz-gradient(linear, left top, left bottom,
color-stop(0.5, transparent),
to(rgba(255, 255, 255, 0.5)));
}
img{opacity:0.50;}
p {-moz-transform: rotate(-20deg) skewX(5deg);
-webkit-transform: rotate(-20deg) skewX(5deg);
}
</style>
</head>
<body id="csstest" onload="">
<div><img src = "http://farm6.static.flickr.com/5296/5541424021_09bf02e3c5_m_d.jpg" ></img></div>
<p>Supermoon photo original found on <a href="http://www.flickr.com/photos/gienkhan/5541424021/">flickr</a>.</p>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment