Просмотр файла cms/main.css

Конкурс дизайнеров на 15000 рублей
ADS LINK - Сервис интернет рекламы
Размер файла: 3.13Kb 
  1. .gallery {
  2.     margin: 100px auto 0;
  3.     width: 180px;
  4. }
  5. .gallery a {
  6.     display: inline-block;
  7.     height: 160px;
  8.     position: relative;
  9.     width: 128px;
  10.  
  11.     /* CSS3 Prevent selections */
  12.     -moz-user-select: none;
  13.     -webkit-user-select: none;
  14.     -khtml-user-select: none;
  15.     user-select: none;
  16. }
  17. .gallery a img {
  18.     border: 8px solid #fff;
  19.     border-bottom: 10px solid #fff;
  20.     cursor: pointer;
  21.     display: block;
  22.     height: 100%;
  23.     left: 30px;
  24.     position: absolute;
  25.     top: 0px;
  26.     width: 100%;
  27.     z-index: 1;
  28.  
  29.     /* CSS3 Box sizing property */
  30.     -moz-box-sizing: border-box;
  31.     -webkit-box-sizing: border-box;
  32.     -o-box-sizing: border-box;
  33.     box-sizing: border-box;
  34.  
  35.     /* CSS3 transition rules */
  36.     -webkit-transition: all 1.0s ease;
  37.     -moz-transition: all 1.0s ease;
  38.     -o-transition: all 1.0s ease;
  39.     transition: all 1.0s ease;
  40.  
  41.     /* CSS3 Box Shadow */
  42.     -moz-box-shadow: 2px 2px 4px #444;
  43.     -webkit-box-shadow: 2px 2px 4px #444;
  44.     -o-box-shadow: 2px 2px 4px #444;
  45.     box-shadow: 2px 2px 4px #444;
  46. }
  47.  
  48. /* Custom CSS3 rotate transformation */
  49. .gallery a:nth-child(1) img {
  50.     -moz-transform: rotate(0deg);
  51.     -webkit-transform: rotate(0deg);
  52.     transform: rotate(0deg);
  53. }
  54. .gallery a:nth-child(2) img {
  55.     -moz-transform: rotate(-20deg);
  56.     -webkit-transform: rotate(-20deg);
  57.     transform: rotate(-20deg);
  58. }
  59. .gallery a:nth-child(3) img {
  60.     -moz-transform: rotate(-15deg);
  61.     -webkit-transform: rotate(-15deg);
  62.     transform: rotate(-15deg);
  63. }
  64. .gallery a:nth-child(4) img {
  65.     -moz-transform: rotate(-10deg);
  66.     -webkit-transform: rotate(-10deg);
  67.     transform: rotate(-10deg);
  68. }
  69. .gallery a:nth-child(5) img {
  70.     -moz-transform: rotate(-5deg);
  71.     -webkit-transform: rotate(-5deg);
  72.     transform: rotate(-5deg);
  73. }
  74. .gallery a:nth-child(6) img {
  75.     -moz-transform: rotate(0deg);
  76.     -webkit-transform: rotate(0deg);
  77.     transform: rotate(0deg);
  78. }
  79. .gallery a:nth-child(7) img {
  80.     -moz-transform: rotate(5deg);
  81.     -webkit-transform: rotate(5deg);
  82.     transform: rotate(5deg);
  83. }
  84. .gallery a:nth-child(8) img {
  85.     -moz-transform: rotate(10deg);
  86.     -webkit-transform: rotate(10deg);
  87.     transform: rotate(10deg);
  88. }
  89. .gallery a:nth-child(9) img {
  90.     -moz-transform: rotate(15deg);
  91.     -webkit-transform: rotate(15deg);
  92.     transform: rotate(15deg);
  93. }
  94. .gallery a:nth-child(10) img {
  95.     -moz-transform: rotate(20deg);
  96.     -webkit-transform: rotate(20deg);
  97.     transform: rotate(20deg);
  98. }
  99. .gallery a:nth-child(11) img {
  100.     -moz-transform: rotate(25deg);
  101.     -webkit-transform: rotate(25deg);
  102.     transform: rotate(25deg);
  103. }
  104. .gallery a:nth-child(12) img {
  105.     -moz-transform: rotate(30deg);
  106.     -webkit-transform: rotate(30deg);
  107.     transform: rotate(30deg);
  108. }
  109.  
  110. .gallery a:focus img {
  111.     cursor: default;
  112.     height: 250%;
  113.     left: 0px;
  114.     top: -10px;
  115.     position: absolute;
  116.     width: 250%;
  117.     z-index: 25;
  118.  
  119.     /* CSS3 transition rules */
  120.     -webkit-transition: all 1.0s ease;
  121.     -moz-transition: all 1.0s ease;
  122.     -o-transition: all 1.0s ease;
  123.     transition: all 1.0s ease;
  124.  
  125.     /* CSS3 transform rules */
  126.     -moz-transform: rotate(0deg);
  127.     -webkit-transform: rotate(0deg);
  128.     -o-transform: rotate(0deg);
  129.     transform: rotate(0deg);
  130. }