API tools faq
paste
Advertisement
Guest User

Slider CSS

a guest
Sep 10th, 2014
350
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 9.00 KB | None | 0 0
raw download clone embed print report
  1. /*-----------------[SLIDER START]------------------------*/
  2. #slider {
  3.   width:640px;
  4.   height:320px;
  5.   margin:0 auto;
  6.   background:#fff;
  7.   overflow:visible;
  8.   -moz-transition:all 150ms ease-in;
  9.   -webkit-transition:all 150ms ease-in;
  10.   -o-transition:all 150ms ease-in;
  11.   position:relative;
  12.   transform:rotate(0deg);
  13.   -ms-transform:rotate(0deg);
  14.   -moz-transform:rotate(0deg);
  15.   -webkit-transform:rotate(0deg);
  16.   -o-transform:rotate(0deg);
  17. }
  18.  
  19. #slider-shadow {
  20.   width:640px;
  21.   height:320px;
  22.   margin:0 auto;
  23.   position:relative;
  24.   background:#fff;
  25.   box-shadow:0 0 5px 0 rgba(0,0,0,0.2);
  26.   -moz-box-shadow:0 0 5px 0 rgba(0,0,0,0.2);
  27.   -webkit-box-shadow:0 0 5px 0 rgba(0,0,0,0.2);
  28. }
  29.  
  30. #slider-shadow:before,#slider-shadow:after {
  31.   content:'';
  32.   position:absolute;
  33.   width:60%;
  34.   height:20px;
  35.   -webkit-box-shadow:0 8px 16px rgba(0,0,0,0.5);
  36.   -moz-box-shadow:0 8px 16px rgba(0,0,0,0.5);
  37.   -ms-box-shadow:0 8px 16px rgba(0,0,0,0.5);
  38.   -o-box-shadow:0 8px 16px rgba(0,0,0,0.5);
  39.   box-shadow:0 8px 16px rgba(0,0,0,0.5);
  40.   -webkit-transform:rotate(-4deg) skew(-10deg);
  41.   -moz-transform:rotate(-4deg) skew(-10deg);
  42.   -o-transform:rotate(-4deg) skew(-10deg);
  43.   -ms-transform:rotate(-4deg) skew(-10deg);
  44.   transform:rotate(-4deg) skew(-10deg);
  45.   left:10px;
  46.   bottom:13px;
  47.   z-index:-1;
  48. }
  49.  
  50. #slider-shadow:after {
  51.   left:auto;
  52.   right:10px;
  53.   -webkit-transform:rotate(4deg) skew(10deg);
  54.   -moz-transform:rotate(4deg) skew(10deg);
  55.   -o-transform:rotate(4deg) skew(10deg);
  56.   -ms-transform:rotate(4deg) skew(10deg);
  57.   transform:rotate(4deg) skew(10deg);
  58. }
  59.  
  60. #mask {
  61.   overflow:hidden;
  62. }
  63.  
  64. #slider-shadow:hover {
  65.   background-color:#fff;
  66.   -webkit-animation:rotatey 400ms ease-out;
  67.   -moz-animation:rotatey 400ms ease-out;
  68. }
  69.  
  70. #slider:hover #pause {
  71.   opacity:.8;
  72. }
  73.  
  74. #slider:hover #progress {
  75.   background-color:rgba(255,255,255,0.0);
  76. }
  77.  
  78. #slider:hover ul,#slider:hover #progress,#slider:hover #overlay {
  79.   -moz-animation-play-state:paused;
  80.   -webkit-animation-play-state:paused;
  81. }
  82.  
  83. #pause {
  84.   width:640px;
  85.   height:320px;
  86.   position:absolute;
  87.   top:0;
  88.   opacity:0;
  89.   background-image:url(http://s27.postimg.org/ryq4pxayn/gtk_media_pause.png);
  90.   background-position:center;
  91.   background-repeat:no-repeat;
  92.   pointer-events:none;
  93.   -moz-transition:all 150ms ease-in;
  94.   -webkit-transition:all 150ms ease-in;
  95.   -o-transition:all 150ms ease-in;
  96. }
  97.  
  98. #overlay {
  99.   width:640px;
  100.   height:320px;
  101.   position:absolute;
  102.   top:0;
  103.   background-image:url(http://w.noimage.png);
  104.   background-position:center;
  105.   background-repeat:no-repeat;
  106.   pointer-events:none;
  107.   -moz-transition:all 150ms ease-in;
  108.   -webkit-transition:all 150ms ease-in;
  109.   -o-transition:all 150ms ease-in;
  110.   opacity:.5;
  111.   -moz-animation:overlay-fade 18s infinite;
  112.   -webkit-animation:overlay-fade 18s infinite;
  113. }
  114.  
  115. #progress {
  116.   width:1px;
  117.   height:3px;
  118.   background:none repeat scroll 0 0 rgba(0,136,204,0.8);
  119.   -moz-animation:progress 18s infinite;
  120.   -webkit-animation:progress 18s infinite;
  121.   position:relative;
  122.   top:-3px;
  123.   -moz-transition:all 150ms ease-in;
  124.   -webkit-transition:all 150ms ease-in;
  125.   -o-transition:all 150ms ease-in;
  126. }
  127.  
  128. #slider ul {
  129.   width:2560px;
  130.   list-style:none;
  131.   padding:0;
  132.   margin:0;
  133.   -moz-animation:slide-animation 18s infinite;
  134.   -webkit-animation:slide-animation 18s infinite;
  135.   position:relative;
  136.   left:0;
  137. }
  138.  
  139. #slider li {
  140.   display:inline;
  141.   width:640px;
  142.   height:320px;
  143.   margin:0;
  144.   padding:0;
  145.   float:left;
  146.   position:relative;
  147.   background-image:url(http://i62.tinypic.com/2m7cie1.gif);
  148.   background-position:50% 50%;
  149.   background-repeat:no-repeat;
  150. }
  151.  
  152. #slider li:last-of-type {
  153.   background-color:#362c30;
  154. }
  155.  
  156. #slider li a {
  157.   display:block;
  158.   text-decoration:none;
  159. }
  160.  
  161. #slider li .slider-span {
  162.   display:block;
  163.   width:100%;
  164.   padding:15px 20px;
  165.   position:absolute;
  166.   bottom:0;
  167.   left:0;
  168.   background-color:rgba(0,0,0,0.4);
  169.   text-shadow:1px 1px 1px #362c30;
  170.   pointer-events:none;
  171.   text-align:left;
  172. }
  173.  
  174. @-webkit-keyframes slide-animation {
  175.   0% {
  176.     opacity:0;
  177.   }
  178.  
  179.   2% {
  180.     opacity:1;
  181.   }
  182.  
  183.   20% {
  184.     left:0;
  185.     opacity:1;
  186.   }
  187.  
  188.   22.5% {
  189.     opacity:.6;
  190.   }
  191.  
  192.   25% {
  193.     left:-640px;
  194.     opacity:1;
  195.   }
  196.  
  197.   45% {
  198.     left:-640px;
  199.     opacity:1;
  200.   }
  201.  
  202.   47.5% {
  203.     opacity:.6;
  204.   }
  205.  
  206.   50% {
  207.     left:-1280px;
  208.     opacity:1;
  209.   }
  210.  
  211.   70% {
  212.     left:-1280px;
  213.     opacity:1;
  214.   }
  215.  
  216.   72.5% {
  217.     opacity:.6;
  218.   }
  219.  
  220.   75% {
  221.     left:-1920px;
  222.     opacity:1;
  223.   }
  224.  
  225.   95% {
  226.     opacity:1;
  227.   }
  228.  
  229.   98% {
  230.     left:-1920px;
  231.     opacity:0;
  232.   }
  233.  
  234.   100% {
  235.     left:0;
  236.     opacity:0;
  237.   }
  238. }
  239.  
  240. @-moz-keyframes slide-animation {
  241.   0% {
  242.     opacity:0;
  243.   }
  244.  
  245.   2% {
  246.     opacity:1;
  247.   }
  248.  
  249.   20% {
  250.     left:0;
  251.     opacity:1;
  252.   }
  253.  
  254.   22.5% {
  255.     opacity:.6;
  256.   }
  257.  
  258.   25% {
  259.     left:-640px;
  260.     opacity:1;
  261.   }
  262.  
  263.   45% {
  264.     left:-640px;
  265.     opacity:1;
  266.   }
  267.  
  268.   47.5% {
  269.     opacity:.6;
  270.   }
  271.  
  272.   50% {
  273.     left:-1280px;
  274.     opacity:1;
  275.   }
  276.  
  277.   70% {
  278.     left:-1280px;
  279.     opacity:1;
  280.   }
  281.  
  282.   72.5% {
  283.     opacity:.6;
  284.   }
  285.  
  286.   75% {
  287.     left:-1920px;
  288.     opacity:1;
  289.   }
  290.  
  291.   95% {
  292.     opacity:1;
  293.   }
  294.  
  295.   98% {
  296.     left:-1920px;
  297.     opacity:0;
  298.   }
  299.  
  300.   100% {
  301.     left:0;
  302.     opacity:0;
  303.   }
  304. }
  305.  
  306. @-webkit-keyframes progress {
  307.   0% {
  308.     width:0;
  309.     opacity:0;
  310.   }
  311.  
  312.   2% {
  313.     width:0;
  314.     opacity:1;
  315.   }
  316.  
  317.   20% {
  318.     width:640px;
  319.     opacity:1;
  320.   }
  321.  
  322.   22.5% {
  323.     width:640px;
  324.     opacity:0;
  325.   }
  326.  
  327.   22.59% {
  328.     width:0;
  329.   }
  330.  
  331.   25% {
  332.     width:0;
  333.     opacity:1;
  334.   }
  335.  
  336.   45% {
  337.     width:640px;
  338.     opacity:1;
  339.   }
  340.  
  341.   47.5% {
  342.     width:640px;
  343.     opacity:0;
  344.   }
  345.  
  346.   47.59% {
  347.     width:0;
  348.   }
  349.  
  350.   50% {
  351.     width:0;
  352.     opacity:1;
  353.   }
  354.  
  355.   70% {
  356.     width:640px;
  357.     opacity:1;
  358.   }
  359.  
  360.   72.5% {
  361.     width:640px;
  362.     opacity:0;
  363.   }
  364.  
  365.   72.59% {
  366.     width:0;
  367.   }
  368.  
  369.   75% {
  370.     width:0;
  371.     opacity:1;
  372.   }
  373.  
  374.   95% {
  375.     width:640px;
  376.     opacity:1;
  377.   }
  378.  
  379.   98% {
  380.     width:640px;
  381.     opacity:0;
  382.   }
  383.  
  384.   100% {
  385.     width:0;
  386.     opacity:0;
  387.   }
  388. }
  389.  
  390. @-moz-keyframes progress {
  391.   0% {
  392.     width:0;
  393.     opacity:0;
  394.   }
  395.  
  396.   2% {
  397.     width:0;
  398.     opacity:1;
  399.   }
  400.  
  401.   20% {
  402.     width:640px;
  403.     opacity:1;
  404.   }
  405.  
  406.   22.5% {
  407.     width:640px;
  408.     opacity:0;
  409.   }
  410.  
  411.   22.59% {
  412.     width:0;
  413.   }
  414.  
  415.   25% {
  416.     width:0;
  417.     opacity:1;
  418.   }
  419.  
  420.   45% {
  421.     width:640px;
  422.     opacity:1;
  423.   }
  424.  
  425.   47.5% {
  426.     width:640px;
  427.     opacity:0;
  428.   }
  429.  
  430.   47.59% {
  431.     width:0;
  432.   }
  433.  
  434.   50% {
  435.     width:0;
  436.     opacity:1;
  437.   }
  438.  
  439.   70% {
  440.     width:640px;
  441.     opacity:1;
  442.   }
  443.  
  444.   72.5% {
  445.     width:640px;
  446.     opacity:0;
  447.   }
  448.  
  449.   72.59% {
  450.     width:0;
  451.   }
  452.  
  453.   75% {
  454.     width:0;
  455.     opacity:1;
  456.   }
  457.  
  458.   95% {
  459.     width:640px;
  460.     opacity:1;
  461.   }
  462.  
  463.   98% {
  464.     width:640px;
  465.     opacity:0;
  466.   }
  467.  
  468.   100% {
  469.     width:0;
  470.     opacity:0;
  471.   }
  472. }
  473.  
  474. @-webkit-keyframes rotatey {
  475.   0% {
  476.     transform:rotate(0deg);
  477.     -ms-transform:rotate(0deg);
  478.     -moz-transform:rotate(0deg);
  479.     -webkit-transform:rotate(0deg);
  480.     -o-transform:rotate(0deg);
  481.   }
  482.  
  483.   25% {
  484.     transform:rotate(1deg);
  485.     -ms-transform:rotate(1deg);
  486.     -moz-transform:rotate(1deg);
  487.     -webkit-transform:rotate(1deg);
  488.     -o-transform:rotate(1deg);
  489.   }
  490.  
  491.   50% {
  492.     transform:rotate(-1deg);
  493.     -ms-transform:rotate(-1deg);
  494.     -moz-transform:rotate(-1deg);
  495.     -webkit-transform:rotate(-1deg);
  496.     -o-transform:rotate(-1deg);
  497.   }
  498.  
  499.   100% {
  500.     transform:rotate(0deg);
  501.     -ms-transform:rotate(0deg);
  502.     -moz-transform:rotate(0deg);
  503.     -webkit-transform:rotate(0deg);
  504.     -o-transform:rotate(0deg);
  505.   }
  506. }
  507.  
  508. @-moz-keyframes rotatey {
  509.   0% {
  510.     transform:rotate(0deg);
  511.     -ms-transform:rotate(0deg);
  512.     -moz-transform:rotate(0deg);
  513.     -webkit-transform:rotate(0deg);
  514.     -o-transform:rotate(0deg);
  515.   }
  516.  
  517.   25% {
  518.     transform:rotate(1deg);
  519.     -ms-transform:rotate(1deg);
  520.     -moz-transform:rotate(1deg);
  521.     -webkit-transform:rotate(1deg);
  522.     -o-transform:rotate(1deg);
  523.   }
  524.  
  525.   50% {
  526.     transform:rotate(-1deg);
  527.     -ms-transform:rotate(-1deg);
  528.     -moz-transform:rotate(-1deg);
  529.     -webkit-transform:rotate(-1deg);
  530.     -o-transform:rotate(-1deg);
  531.   }
  532.  
  533.   100% {
  534.     transform:rotate(0deg);
  535.     -ms-transform:rotate(0deg);
  536.     -moz-transform:rotate(0deg);
  537.     -webkit-transform:rotate(0deg);
  538.     -o-transform:rotate(0deg);
  539.   }
  540. }
  541.  
  542. @-webkit-keyframes overlay-fade {
  543.   0% {
  544.     opacity:0;
  545.   }
  546.  
  547.   2% {
  548.     opacity:.5;
  549.   }
  550.  
  551.   95% {
  552.     opacity:.5;
  553.   }
  554.  
  555.   98% {
  556.     opacity:0;
  557.   }
  558.  
  559.   100% {
  560.     opacity:0;
  561.   }
  562. }
  563.  
  564. @-moz-keyframes overlay-fade {
  565.   0% {
  566.     opacity:0;
  567.   }
  568.  
  569.   2% {
  570.     opacity:.5;
  571.   }
  572.  
  573.   95% {
  574.     opacity:.5;
  575.   }
  576.  
  577.   98% {
  578.     opacity:0;
  579.   }
  580.  
  581.   100% {
  582.     opacity:0;
  583.   }
  584. }
  585.  
  586. #slider ul li .slider-span h2 {
  587.   font-size:24px;
  588.   line-height:24px;
  589.   color:#fff;
  590.   font-weight:normal;
  591.   text-shadow:1px 1px 1px #362c30;
  592. }
  593.  
  594. /*-------------------[SLIDER END]-------------------------*/
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!