Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on Jun 22nd, 2012  |  syntax: None  |  size: 2.69 KB  |  hits: 9  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. /**
  2.  * The first commented line is your dabblet’s title
  3.  */
  4.  
  5. body {
  6.         -webkit-perspective: 900;
  7.         background:#E7E7E7;
  8. }
  9.  
  10. .doorway {
  11.         background: url('http://dl.dropbox.com/u/6727078/dursos-site.jpg');
  12.         width: 250px;
  13.         height: 350px;
  14.         border: black solid 1px;
  15.        
  16.         margin: 100px auto;
  17.        
  18.         /*-webkit-transition: -webkit-transform ease-in-out 1s;*/
  19.         box-shadow: inset 0 0 20px black;
  20. }
  21.  
  22. p {
  23.         position: absolute;
  24.         bottom: -10px;
  25.         /*left: 10px;*/
  26.         width: 230px;
  27.         /*opacity: 0;*/
  28.         /*display: none;*/
  29.         /*display: none;*/
  30.         font-family: "Arial";
  31.         font-size: 12px;
  32.         color: white;
  33.         background: rgba(0,0,0,.6);
  34.         padding: 10px;
  35.        
  36.         border-top-left-radius: 20px;
  37.         border-top-right-radius: 20px;
  38.  
  39.         /*box-shadow: 2px 0 4px black;*/
  40.         box-shadow: 0 0 4px black;
  41.        
  42.         -webkit-transition-property: -webkit-transform;
  43.         -webkit-transition-timing-function: ease-out;
  44.         -webkit-transition-duration: 400ms;
  45.         -webkit-transform-origin: center bottom;
  46.         z-index: 1;
  47. }
  48.  
  49. .doorway .door{
  50.         position: absolute;
  51.         background: rgba(255,255,255,.5);
  52.         border: black solid 1px;
  53.         box-shadow: 0 0 5px black;
  54.         width: 250px;
  55.         height: 350px;
  56.  
  57.         -webkit-transition-property: z-index, -webkit-transform;
  58.         -webkit-transition-duration: 900ms;
  59.         -webkit-transition-delay: 400ms;
  60.         -webkit-transition-timing-function: ease-out;
  61.         -webkit-transform-origin: left center;
  62.         -webkit-transform-style: preserve-3d;
  63.        
  64.         z-index: 2;
  65. }
  66.  
  67. .doorway .door:before {
  68.         content: '';
  69.         position: absolute;
  70.         top: 170px;
  71.         right: 15px;
  72.         width: 20px;
  73.         height: 20px;
  74.         background: black;
  75.         border-radius: 10px;
  76.         box-shadow: 0 0 2px black;
  77. }
  78.  
  79. .door .above_window, .door .left_of_window, .door .right_of_window,
  80. .door .below_window {
  81.         background: #0094cb;
  82. }
  83.  
  84. .door .above_window {
  85.         line-height: 40px;
  86.         text-align: center;
  87.         font-family: "Lucida Sans";
  88.         color: black;
  89. }
  90.  
  91. .door .left_of_window,
  92. .door .right_of_window {
  93.         height: 120px;
  94.         width: 40px;
  95. }
  96.  
  97. .door .left_of_window {
  98.         float: left;
  99. }
  100.  
  101. .door .right_of_window {
  102.         float: right;
  103. }
  104.  
  105. .door .below_window {
  106.         clear: both;
  107.         height: 190px;
  108. }
  109.  
  110.         .door .below_window .technologies {
  111.                 position: relative;
  112.                 background: rgba(255,255,255,.3);
  113.                 box-shadow: inset 0 0 5px black;
  114.                 width: 170px;
  115.                 height: 130px;
  116.                 top: 25px;
  117.                 margin: 0 auto;
  118.                 font-family: "Lucida Sans";
  119.  
  120.         }
  121.                 .door .technologies h2 {
  122.                         background: rgba(0,0,0,.3);
  123.                         color: white;
  124.                         padding: 5px;
  125.                         text-align: center;
  126.                         font-size: 20px;
  127.                 }
  128.                 .door .technologies ul {
  129.                         list-style-type: none;
  130.                 }
  131.  
  132. .doorway:hover p{
  133.         -webkit-transition-delay: 300ms;
  134.         -webkit-transition-duration: 1s;
  135.         -webkit-transform: rotateX(-180deg);
  136.         /*display: block;*/
  137.         /*opacity: 1;*/
  138. }
  139.  
  140. .doorway:hover .door{
  141.         /*z-index: 1;*/
  142.         -webkit-transition-delay: 0;
  143.         /*-webkit-transition: -webkit-transform ease-out 900ms;*/
  144.         -webkit-transform: rotateY(-180deg);
  145. }
create a new version of this paste RAW Paste Data