CSS   100
mixed slider css
Guest on 17th March 2023 12:15:17 AM


  1. #mixed-slider {
  2.         font-family: 'Open Sans', sans-serif;
  3. }
  4.  
  5. #mixed-slider .slide {
  6.         background-color: #EEEEEE;     
  7. }
  8.  
  9.  
  10. #mixed-slider .timer-animation {
  11.         top: 10px;
  12.         right: 10px;   
  13. }
  14.  
  15.  
  16. #mixed-slider .slide-arrows a.previous {
  17.         left: -80px;   
  18. }
  19.  
  20.  
  21. #mixed-slider .slide-arrows a.next {
  22.         right: -80px;  
  23. }
  24.  
  25.  
  26. #mixed-slider .title {
  27.         font-size: 24px;
  28.         margin-bottom: 10px;
  29. }
  30.  
  31.  
  32. #mixed-slider .content p {
  33.         font-size: 12px;
  34.         margin-top: 10px;
  35. }
  36.  
  37.  
  38. #mixed-slider .link {
  39.         font-size: 14px;
  40.         position: absolute;
  41.         bottom: 0;
  42. }
  43.  
  44.  
  45. #mixed-slider .link a {
  46.         font-size: 12px;
  47.         color: #666666;
  48. }
  49.  
  50.  
  51. #mixed-slider .content-box {
  52.         padding: 10px;
  53.         background: #888;
  54.         color: #CCC;
  55.         font-size: 13px;
  56.         line-height: 20px;
  57.         border:4px solid #DDD;
  58.         -webkit-border-radius: 6px;
  59.         -moz-border-radius: 6px;
  60.         border-radius: 6px;
  61. }
  62.  
  63.  
  64. #mixed-slider .content-box .title {
  65.         font-size: 14px;
  66.         font-weight: bold;
  67.         font-style: italic;
  68.         color: #EEEEEE;
  69. }
  70.  
  71.  
  72. #mixed-slider .content-box .button {
  73.         display: block;
  74.         text-decoration: none;
  75.         width: 70px;
  76.         padding: 2px;
  77.         margin-top: 10px;
  78.         color: #666;
  79.         background-color: #EEEEEE;
  80.         border: 4px solid #FFFFFF;
  81.         -webkit-border-radius: 6px;
  82.         -moz-border-radius: 6px;
  83.         border-radius: 6px;
  84. }
  85.  
  86.  
  87. #mixed-slider .image-box {
  88.         background: url(image_shadow.html) no-repeat 9px 158px;
  89.         width: 260px;
  90.         height: 170px;
  91.         float: left;
  92. }
  93.  
  94.  
  95. #mixed-slider .image-box img {
  96.         margin: 10px;
  97.         border: 4px solid #FFF;
  98.         transition : border 500ms ease-out;
  99.         -webkit-transition : border 500ms ease-out;
  100.         -moz-transition : border 500ms ease-out;
  101.         -o-transition : border 500ms ease-out;
  102. }
  103.  
  104.  
  105. #mixed-slider .image-box img:hover {
  106.         border: 4px solid #333;
  107. }
Raw Paste

Login or Register to edit or fork this paste. It's free.