gridrotator.css 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. .ri-grid{
  2. width: 600px;
  3. }
  4. .ri-grid ul li,
  5. .ri-grid ul li a{
  6. width: 100px;
  7. height: 100px;
  8. }
  9. .ri-grid ul li a img{
  10. width: 100%;
  11. }
  12. .ri-grid{
  13. margin: 0 auto 30px;
  14. position: relative;
  15. height: auto;
  16. }
  17. .ri-grid ul {
  18. list-style: none;
  19. display: block;
  20. width: 100%;
  21. margin: 0;
  22. padding: 0;
  23. }
  24. /* Clear floats by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
  25. .ri-grid ul:before,
  26. .ri-grid ul:after{
  27. content: '';
  28. display: table;
  29. }
  30. .ri-grid ul:after {
  31. clear: both;
  32. }
  33. .ri-grid ul {
  34. zoom: 1; /* For IE 6/7 (trigger hasLayout) */
  35. }
  36. .ri-grid ul li {
  37. -webkit-perspective: 400px;
  38. -moz-perspective: 400px;
  39. -o-perspective: 400px;
  40. -ms-perspective: 400px;
  41. perspective: 400px;
  42. margin: 0;
  43. padding: 0;
  44. float: left;
  45. position: relative;
  46. display: block;
  47. overflow: hidden;
  48. background: #E9E1D1;
  49. }
  50. .ri-grid ul li a{
  51. display: block;
  52. outline: none;
  53. position: absolute;
  54. left: 0;
  55. top: 0;
  56. width: 100%;
  57. height: 100%;
  58. -webkit-background-size: 100% 100%;
  59. -moz-background-size: 100% 100%;
  60. background-size: 100% 100%;
  61. background-position: center center;
  62. background-repeat: no-repeat;
  63. background-color: #333;
  64. -webkit-box-sizing: content-box;
  65. -moz-box-sizing: content-box;
  66. box-sizing: content-box;
  67. }
  68. /* Grid wrapper sizes */
  69. .ri-grid-size-1{
  70. width: 800px;
  71. height:300px;
  72. overflow: hidden;
  73. }
  74. .ri-grid-size-2{
  75. width: 1020px;
  76. height:374px;
  77. overflow: hidden;
  78. }