[CSS] Codigos Interesantes

<style type="text/css">

.pulloutimage{
  position: relative;
}

.pulloutimage img{
  position: absolute; /* absolute position and stack images inside container */
  left: 0;
}

.pulloutimage img.ondemand{ /*CSS for image shown on demand */
  opacity: 0;
  visibility: hidden; /* hide it initially (mainly for legacy browsers) */
}

.pulloutimage img.original{
  z-index: 1; /* set base z-index of initially shown image */
}


@-webkit-keyframes revealfromright{ /* keyframe animation that slides a DIV out from another before overlapping later */
  0%{ /* Start of animation */
  z-index: -1;
  opacity: 0;
  }
  50%{ /* Half way point, move image to right edge of container */
  opacity: 1;
  z-index: -1;
  left: 100%;
  box-shadow: none;
  }
  51%{ /* 51% point, stack animating image on top of original image */
  z-index: 2;
  }
  100%{ /* Final point, move animating image back so it's on top of original */
  left: 0;
  box-shadow: 8px 8px 15px gray;
  }
}

@-moz-keyframes revealfromright{
  0%{
  z-index:-1;
  opacity:0;
  }
  50%{
  opacity:1;
  z-index:-1;
  left:100%;
  box-shadow: none;
  }
  51%{
  z-index:2;
  }
  100%{
  left:0;
  box-shadow: 8px 8px 15px gray;
  }
}

@-ms-keyframes revealfromright{
  0%{
  z-index:-1;
  opacity:0;
  }
  50%{
  opacity:1;
  z-index:-1;
  left:100%;
  box-shadow: none;
  }
  51%{
  z-index:2;
  }
  100%{
  left:0;
  box-shadow: 8px 8px 15px gray;
  }
}


.pulloutimage:hover img.ondemand{ /* when mouse rolls over pulloutimage container, style to apply to "ondemand" image */
  -webkit-animation-name:revealfromright; /* specify animation keyframe */
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
 
  -moz-animation-name:revealfromright;
  -moz-animation-duration: 1s;
  -moz-animation-iteration-count: 1;
 
  -ms-animation-name:revealfromright;
  -ms-animation-duration: 1s;
  -ms-animation-iteration-count: 1;
 
  animation-name:revealfromright;
  animation-duration: 1s;
  animation-iteration-count: 1;
 
  visibility:visible;
  opacity:1;
  box-shadow: 8px 8px 15px gray;
  z-index:2;
}

.pulloutimage:hover img.original{ /* when mouse rolls over pulloutimage container, style to apply to "original" image */
  opacity:0.5;
}

</style>  <!--dimensions of each container should be set to original image's dimensions -->
<div style="width:298px; height:223px" class="pulloutimage"><img src="http://www.dynamicdrive.com/dynamicindex4/desert.jpg" class="original" alt="" /> <img src="http://www.dynamicdrive.com/dynamicindex4/forest.jpg" class="ondemand" alt="" /></div>
<br />
<div style="width:263px; height:199px" class="pulloutimage"><img src="http://dynamicdrive.com/dynamicindex14/stadium.jpg" class="original" alt="" /> <img src="http://www.dynamicdrive.com/cssexamples/media/horses.jpg" class="ondemand" alt="" /></div>

<style type="text/css">

.wireframemenu{
border: 1px solid #C0C0C0;
background-color: white;
border-bottom-width: 0;
width: 170px;
}

* html .wireframemenu{ /*IE only rule. Original menu width minus all left/right paddings */
width: 164px;
}

.wireframemenu ul{
padding: 0;
margin: 0;
list-style-type: none;
}

.wireframemenu a{
font: bold 13px Verdana;
padding: 4px 3px;
display: block;
width: 100%; /*Define width for IE6's sake*/
color: #595959;
text-decoration: none;
border-bottom: 1px solid #C0C0C0;
}

.wireframemenu a:visited{
color: #595959;
}

html>body .wireframemenu a{ /*Non IE rule*/
width: auto;
}

.wireframemenu a:hover{
background-color: #F8FBBD;
color: black;
}

</style>
<div class="wireframemenu">
<ul>
    <li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
    <li><a href="http://www.dynamicdrive.com/style/">CSS Library</a></li>
    <li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
    <li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Gif Optimizer</a></li>
    <li><a href="http://tools.dynamicdrive.com/favicon/">Favicon Creator</a></li>
    <li><a href="http://tools.dynamicdrive.com/button/">Button Maker</a></li>
</ul>
</div>

<ul class="bubblewrap">
    <li><a href="#"><img title="Add to Stumbleupon" src="http://dynamicdrive.com/cssexamples/media/stumbleupon.png" alt="" /></a></li>
    <li><a href="http://dynamicdrive.com"><img title="Add to Facebook" src="http://dynamicdrive.com/cssexamples/media/facebook.png" alt="" /></a></li>
    <li><a href="http://dynamicdrive.com"><img title="Add to Digg" src="http://dynamicdrive.com/cssexamples/media/digg.png" alt="" /></a></li>
    <li><a href="http://dynamicdrive.com"><img title="Add to Twitter" src="http://dynamicdrive.com/cssexamples/media/twitter.png" alt="" /></a></li>
    <li><a href="http://dynamicdrive.com"><img title="Add RSS Feed" src="http://dynamicdrive.com/cssexamples/media/rss.png" alt="" /></a></li>
</ul>
<style type="text/css">

.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}

.bubblewrap li{
display:inline;
width: 65px;
height:60px;
}

.bubblewrap li img{
width: 55px; /* width of each image.*/
height: 60px; /* height of each image.*/
border:0;
margin-right: 12px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}

.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}

</style>

<style type="text/css">

.bevelmenu{
font: bold 13px arial;
padding: 6px 0;
margin: 0;
width: 100%;
background-color: #FFF2BF;
text-align: left; /*set value to "right" for example to align menu to the right of page*/
}

.bevelmenu li{
list-style: none;
display: inline;
}

.bevelmenu li a{
padding: 3px 0.5em;
text-decoration: none;
color: black;
background-color: #FFF2BF;
border: 2px solid #FFF2BF;
}

.bevelmenu li a:hover{
color: black;
background-color: #FFE271;
border-style: outset;
}

html>body .bevelmenu li a:active{ /* Apply mousedown effect only to NON IE browsers */
border-style: inset;
}
</style>
<ul class="bevelmenu">
    <li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
    <li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
    <li><a href="http://www.codingforums.com">Coding Forums</a></li>
    <li><a href="http://www.cssdrive.com">CSS Drive</a></li>
    <li><a href="http://www.google.com">Google</a></li>
</ul>