tabulous.css 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
  1. * { margin: 0; padding: 0;}
  2. ul { list-style-type: none;}
  3. p {
  4. margin-bottom: 20px;
  5. }
  6. .tabs{
  7. width: 500px;
  8. margin: 0 auto;
  9. margin-bottom: 40px;
  10. }
  11. .tabs li {
  12. float: left;
  13. margin-right: 2px;
  14. }
  15. .tabs li a {
  16. display: block;
  17. padding: 17px 30px;
  18. background: #f8f8f8;
  19. text-decoration: none;
  20. color: #8478B3;
  21. }
  22. .tabs li a:hover {
  23. background: #f5f5f5;
  24. }
  25. #tabs_container {
  26. padding: 40px;
  27. overflow: hidden;
  28. position: relative;
  29. background: #f0f0f0;
  30. zoom: 1;
  31. }
  32. #tabs_container div {
  33. float: left;
  34. margin-right: 40px;
  35. zoom: 1;
  36. }
  37. .transition {
  38. -webkit-transition: all .3s ease-in-out;
  39. -moz-transition: all .3s ease-in-out;
  40. -o-transition: all .3s ease-in-out;
  41. -ms-transition: all .3s ease-in-out;
  42. transition: all .3s ease-in-out;
  43. -webkit-transition-delay: .3s;
  44. -moz-transition-delay: .3s;
  45. -o-transition-delay: .3s;
  46. -ms-transition-delay: .3s;
  47. transition-delay: .3s;
  48. }
  49. .make_transist {
  50. -webkit-transition: all .3s ease-in-out;
  51. -moz-transition: all .3s ease-in-out;
  52. -o-transition: all .3s ease-in-out;
  53. -ms-transition: all .3s ease-in-out;
  54. transition: all .3s ease-in-out;
  55. }
  56. .hidescale {
  57. -webkit-transform: scale(0.9);
  58. -moz-transform: scale(0.9);
  59. -o-transform: scale(0.9);
  60. -ms-transform: scale(0.9);
  61. transform: scale(0.9);
  62. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  63. filter: alpha(opacity=0);
  64. filter: alpha(opacity=0);
  65. opacity: 0;
  66. }
  67. .showscale {
  68. -webkit-transform: scale(1);
  69. -moz-transform: scale(1);
  70. -o-transform: scale(1);
  71. -ms-transform: scale(1);
  72. transform: scale(1);
  73. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  74. filter: alpha(opacity=100);
  75. opacity: 1;
  76. -webkit-transition-delay: .3s;
  77. -moz-transition-delay: .3s;
  78. -o-transition-delay: .3s;
  79. -ms-transition-delay: .3s;
  80. transition-delay: .3s;
  81. }
  82. .hideleft {
  83. -webkit-transform: translateX(-100%);
  84. -moz-transform: translateX(-100%);
  85. -o-transform: translateX(-100%);
  86. -ms-transform: translateX(-100%);
  87. transform: translateX(-100%);
  88. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  89. filter: alpha(opacity=0);
  90. opacity: 0;
  91. }
  92. .showleft {
  93. -webkit-transform: translateX(0px);
  94. -moz-transform: translateX(0px);
  95. -o-transform: translateX(0px);
  96. -ms-transform: translateX(0px);
  97. transform: translateX(0px);
  98. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  99. filter: alpha(opacity=100);
  100. opacity: 1;
  101. -webkit-transition-delay: .3s;
  102. -moz-transition-delay: .3s;
  103. -o-transition-delay: .3s;
  104. -ms-transition-delay: .3s;
  105. transition-delay: .3s;
  106. }
  107. .hidescaleup {
  108. -webkit-transform: scale(1.1);
  109. -moz-transform: scale(1.1);
  110. -o-transform: scale(1.1);
  111. -ms-transform: scale(1.1);
  112. transform: scale(1.1);
  113. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  114. filter: alpha(opacity=0);
  115. opacity: 0;
  116. }
  117. .showscaleup {
  118. -webkit-transform: scale(1);
  119. -moz-transform: scale(1);
  120. -o-transform: scale(1);
  121. -ms-transform: scale(1);
  122. transform: scale(1);
  123. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  124. filter: alpha(opacity=100);
  125. opacity: 1;
  126. -webkit-transition-delay: .3s;
  127. -moz-transition-delay: .3s;
  128. -o-transition-delay: .3s;
  129. -ms-transition-delay: .3s;
  130. transition-delay: .3s;
  131. }
  132. .hideflip {
  133. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  134. filter: alpha(opacity=0);
  135. opacity: 0;
  136. -webkit-transform: rotatey(-90deg) scale(1.1);
  137. -moz-transform: rotatey(-90deg) scale(1.1);
  138. -o-transform: rotatey(-90deg) scale(1.1);
  139. -ms-transform: rotatey(-90deg) scale(1.1);
  140. transform: rotatey(-90deg) scale(1.1);
  141. -webkit-transform-origin: 50% 50%;
  142. -moz-transform-origin: 50% 50%;
  143. -o-transform-origin: 50% 50%;
  144. -ms-transform-origin: 50% 50%;
  145. transform-origin: 50% 50%;
  146. }
  147. .showflip {
  148. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  149. filter: alpha(opacity=100);
  150. opacity: 1;
  151. -webkit-transition-delay: .3s;
  152. -moz-transition-delay: .3s;
  153. -o-transition-delay: .3s;
  154. -ms-transition-delay: .3s;
  155. transition-delay: .3s;
  156. -webkit-transform: rotatey(0deg) scale(1);
  157. -moz-transform: rotatey(0deg) scale(1);
  158. -o-transform: rotatey(0deg) scale(1);
  159. -ms-transform: rotatey(0deg) scale(1);
  160. transform: rotatey(0deg) scale(1);
  161. -webkit-transform-origin: 50% 50%;
  162. -moz-transform-origin: 50% 50%;
  163. -o-transform-origin: 50% 50%;
  164. -ms-transform-origin: 50% 50%;
  165. transform-origin: 50% 50%;
  166. }
  167. .tabulous_active {
  168. background: #f0f0f0 !important;
  169. color: #655c89 !important;
  170. }
  171. .tabulousclear {
  172. display: block;
  173. clear: both;
  174. }