Skip to content

Instantly share code, notes, and snippets.

@hhua

hhua/foo.html

Created February 24, 2014 02:06
Show Gist options
  • Save hhua/9180693 to your computer and use it in GitHub Desktop.
Save hhua/9180693 to your computer and use it in GitHub Desktop.
Download ZIP
Advanced CSS
Raw
foo.html
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box box-round"></div>
<div class="box box_shadow"></div>
<div class="box box_gradient"></div>
<div class="box box_rgba"></div>
<div class="box box_rotate"></div>
<div class="box box_scale"></div>
<div class="box box_3dtransform"></div>
<div class="box box_transition"></div>
<div class="box box_text_shadow">Hello World</div>
<div class="box box_opacity"></div>
<div class="box box_animation"></div>
<div class="box"></div>
</body>
</html>
Raw
style.css
/* http://css3please.com/ */
.box{
width: 300px;
height: 200px;
background-color: #cccccc;
margin: 30px;
}
.box-round{
-webkit-border-radius: 100%;
border-radius: 100%;
background-clip: padding-box;
/* -webkit-border-radius: 12px;
border-radius: 12px;
background-clip: padding-box;*/
}
.box_shadow{
-webkit-box-shadow: 0px 0px 10px 0px #333333;
box-shadow: 0px 0px 10px 0px #333333;
}
.box_gradient{
background-color: #444444;
background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#eeeeee));
background-image: -webkit-linear-gradient(top, #444444, #eeeeee);
background-image: -moz-linear-gradient(top, #444444, #eeeeee);
background-image: -o-linear-gradient(top, #444444, #eeeeee);
background-image: linear-gradient(to bottom, #444444, #eeeeee);
}
.box_rgba{
background-color: transparent;
background-color: rgba(180, 180, 144, .5);
}
.box_rotate:hover{
-webkit-transform: rotate(-7.5deg);
-moz-transform: rotate(-7.5deg);
-ms-transform: rotate(-7.5deg);
-o-transform: rotate(-7.5deg);
transform: rotate(-7.5deg);
/* -webkit-transform: rotate(7.5deg);
-moz-transform: rotate(7.5deg);
-ms-transform: rotate(7.5deg);
-o-transform: rotate(7.5deg);
transform: rotate(7.5deg);
*/
}
.box_scale:hover{
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
}
.box_3dtransform:hover{
-webkit-perspective: 300px;
-moz-perspective: 300px;
-ms-perspectsive: 300px;
perspective: 300px;
-webkit-transform: rotateY(90deg); -webkit-transform-style: preserve-3d;
-moz-transform: rotateY(90deg); -moz-transform-style: preserve-3d;
-ms-transform: rotateY(90deg); -ms-transform-style: preserve-3d;
transform: rotateY(90deg); transform-style: preserve-3d;
}
.box_transition{
-webkit-transition: all 1.5s ease-out;
-moz-transition: all 1.5s ease-out;
-o-transition: all 1.5s ease-out;
transition: all 1.5s ease-out;
}
.box_transition:hover{
height: 400px;
width: 600px;
border-radius: 100%;
background-color: red;
}
.box_text_shadow{
line-height: 200px;
text-align: center;
font-size: 30px;
}
.box_text_shadow:hover{
text-shadow: 1px 1px 3px #888;
}
.box_opacity{
-webkit-transition: all 1.5s ease-out;
-moz-transition: all 1.5s ease-out;
-o-transition: all 1.5s ease-out;
transition: all 1.5s ease-out;
}
.box_opacity:hover{
opacity: .1;
}
.box_animation:hover{
-webkit-animation: myanim 5s infinite;
-moz-animation: myanim 5s infinite;
-o-animation: myanim 5s infinite;
animation: myanim 5s infinite;
}
@-webkit-keyframes myanim {
0% { opacity: 0.0; }
50% { opacity: 0.5; height: 500px; }
100% { opacity: 1.0; }
}
@-moz-keyframes myanim {
0% { opacity: 0.0; }
50% { opacity: 0.5; height: 500px; }
100% { opacity: 1.0; }
}
@-o-keyframes myanim {
0% { opacity: 0.0; }
50% { opacity: 0.5; height: 500px; }
100% { opacity: 1.0; }
}
@keyframes myanim {
0% { opacity: 0.0; }
50% { opacity: 0.5; height: 500px;}
100% { opacity: 1.0; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment