Created
February 24, 2014 02:06
-
-
Save hhua/9180693 to your computer and use it in GitHub Desktop.
Advanced CSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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