Print this pageSHUTTER STYLE
CLICK LINKPAGE STYLE
CLICK LINK
<html>
<head>
<style type="text/css">
<style>
body {
background: black;color:#ccc;
font-family: "Yanone Kaffeesatz", sans-serif;
height: 100%;overflow:hidden}
.effect {
position: relative;
display: inline-block;
width: 200px;
height: 90px;
line-height: 90px;
cursor: pointer;
perspective: 250px;
margin:50px 20px 0 0;}
.effect > div, .effect a {
width: 200px;
height: 90px;
position: absolute;
margin:0 auto;
color: #111;
background-color: #e4ecb9;
font-size: 20px;
text-align: center;
text-shadow:1px 2px 3px #999;}
.effect > a {
display: block;
background-color: #DC143C;
text-shadow:1px 2px 4px #111;
color:#fff;}
.shutter > div, .shutter a {
transition: 0.5s all linear;
-webkit-transition: 0.5s all linear;
-moz-transition: 0.5s all linear;
-ms-transition: 0.5s all linear;
-o-transition: 0.5s all linear;
position: absolute;}
.shutter > div {
z-index: 10;
transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;}
.shutter:hover > div {
transform: rotateX(-90deg);
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
-ms-transform: rotateX(-90deg);
-o-transform: rotateX(-90deg);}
.page > div, .page a {
transition: 0.8s all linear;
-webkit-transition: 0.8s all linear;
-moz-transition: 0.8s all linear;
-ms-transition: 0.8s all linear;
-o-transition: 0.8s all linear;
position: absolute;
z-index: 5;}
.page > div {
z-index: 10;
transform-origin: 50% -5%;
-webkit-transform-origin: 50% -5%;
-moz-transform-origin: 50% -5%;
-ms-transform-origin: 50% -5%;
-o-transform-origin: 50% -5%;}
.page:hover > div {
transform: rotateX(360deg);
-webkit-transform: rotateX(360deg);
-moz-transform: rotateX(360deg);
-ms-transform: rotateX(360deg);
-o-transform: rotateX(360deg);
z-index: 1;}
</style><br />
</head>
<body bgcolor="black">
<div class="effect shutter"><div>SHUTTER STYLE</div><a href="#">CLICK LINK</a></div>
<div class="effect page"><div>PAGE STYLE</div><a href="#">CLICK LINK</a></div>
<div style='clear: both;'></div>
</body>
</html>
<head>
<style type="text/css">
<style>
body {
background: black;color:#ccc;
font-family: "Yanone Kaffeesatz", sans-serif;
height: 100%;overflow:hidden}
.effect {
position: relative;
display: inline-block;
width: 200px;
height: 90px;
line-height: 90px;
cursor: pointer;
perspective: 250px;
margin:50px 20px 0 0;}
.effect > div, .effect a {
width: 200px;
height: 90px;
position: absolute;
margin:0 auto;
color: #111;
background-color: #e4ecb9;
font-size: 20px;
text-align: center;
text-shadow:1px 2px 3px #999;}
.effect > a {
display: block;
background-color: #DC143C;
text-shadow:1px 2px 4px #111;
color:#fff;}
.shutter > div, .shutter a {
transition: 0.5s all linear;
-webkit-transition: 0.5s all linear;
-moz-transition: 0.5s all linear;
-ms-transition: 0.5s all linear;
-o-transition: 0.5s all linear;
position: absolute;}
.shutter > div {
z-index: 10;
transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;}
.shutter:hover > div {
transform: rotateX(-90deg);
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
-ms-transform: rotateX(-90deg);
-o-transform: rotateX(-90deg);}
.page > div, .page a {
transition: 0.8s all linear;
-webkit-transition: 0.8s all linear;
-moz-transition: 0.8s all linear;
-ms-transition: 0.8s all linear;
-o-transition: 0.8s all linear;
position: absolute;
z-index: 5;}
.page > div {
z-index: 10;
transform-origin: 50% -5%;
-webkit-transform-origin: 50% -5%;
-moz-transform-origin: 50% -5%;
-ms-transform-origin: 50% -5%;
-o-transform-origin: 50% -5%;}
.page:hover > div {
transform: rotateX(360deg);
-webkit-transform: rotateX(360deg);
-moz-transform: rotateX(360deg);
-ms-transform: rotateX(360deg);
-o-transform: rotateX(360deg);
z-index: 1;}
</style><br />
</head>
<body bgcolor="black">
<div class="effect shutter"><div>SHUTTER STYLE</div><a href="#">CLICK LINK</a></div>
<div class="effect page"><div>PAGE STYLE</div><a href="#">CLICK LINK</a></div>
<div style='clear: both;'></div>
</body>
</html>
Artikel Terkait
A M A R A J E N
0 komentar
Posting Komentar