سلايد شو ذاتي التحكم

هوم بلوجر

by homeblogger7

HTML

<div class="out-wrapper">
<div class="wrapper">

 <!--  INPUT FOR BUTTON SELECT SLIDE -->
 <input type="radio" name="next" id="slide1" checked>
 <input type="radio" name="next" id="slide2">
 <input type="radio" name="next" id="slide3">
 <input type="radio" name="next" id="slide4">
 <!--  INPUT FOR BUTTON STOP&PLAY -->
 <input type="radio" name="sto" id="play">
 <input type="radio" name="sto" id="stop" checked>
 <input type="radio" name="sto" id="pause">

<div class="brain">
 <label for="slide4" class="int manage_one left"></label>
 <label for="slide2" class="int manage_one right"></label>
 <label for="slide1" class="int manage_two left"></label>
 <label for="slide3" class="int manage_two right"></label>
 <label for="slide2" class="int manage_tre left"></label>
 <label for="slide4" class="int manage_tre right"></label>
 <label for="slide3" class="int manage_for left"></label>
 <label for="slide1" class="int manage_for right"></label>
  <!-- CONTAINER -->
  <div class="cont">
   <!-- BUTTON PLAY&STOP -->
   <div class="menu">
    <label for="stop" class="butStop" onclick=""></label>
    <label for="play" class="butPlay" onclick=""></label>
    <label for="pause" class="butPause" onclick=""></label>
    <span class="hideStop"></span>
    <span class="hidePlay"></span>
    <span class="hidePause"></span>
    <span class="tooltip"><p>أزرار التحكم!</p></span>
   </div>
   <!-- IMAGE -->
   <div class="image">
    <img src="http://d.top4top.net/p_61by6q1.jpg" class="oneP"  alt="Flash">
    <img src="http://e.top4top.net/p_61xplk2.jpg" class="twoP"  alt="Superman">
    <img src="http://a.top4top.net/p_616moe3.jpg" class="threeP"  alt="Team">
    <img src="http://b.top4top.net/p_61mbt64.jpg" class="fourP"  alt="Joker">
   </div>
   <!-- ANIMATION LINE -->
   <div class="aline">
    <div class="line"></div>
    <div class="bord"><span></span></div>
    <div class="bord"><span></span></div>
    <div class="bord"><span></span></div>
    <div class="bord"><span></span></div>
...

CSS

/* ================= Supported layout/pattern: ================= */


/* -------- [1]. CSS Compressor -------- */

/* a. Normal */
#foo{margin:0;padding:0} /* comment */
#foo:focus{outline:none}

/* b. Strip all comments */
#foo{margin:0;padding:0}
#foo:focus{outline:none}

/* c. Super compact */
#foo{margin:0;padding:0}#foo:focus{outline:none}

/* d. Keep indentation inside `@query {}` */
#foo{margin:0;padding:0}#foo:focus{outline:none}
#foo{margin:0;padding:0}#foo:focus{outline:none}
@media screen and (max-width:400px){
  #foo{margin:0;padding:0}#foo:focus{outline:none}
  #foo{margin:0;padding:0}#foo:focus{outline:none}
}


/* -------- [2]. CSS Beautifier -------- */

/* a. Normal */
#foo {
  margin:0;
  padding:0;
}

#foo:focus {
  outline:none;
}

/* b. Replace double space indentation with a tab character or 4 spaces */
#tab-character {
 margin:0;
 padding:0;
}

#four-space {
    outline:none;
}

/* c. Break multiple selector */
#foo,
#bar,
.walaaa {
  margin:0;
  padding:0;
}

/* d. Space after `:` and `,` */
#foo {
  margin: 0 auto;
  background-image: linear-gradient(top, #333, #555);
  color: rgba(0, 0, 0, .4);
}

/* e. Inline bracket for single property */
#foo .bg {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background:white url('img/bg-image.png') no-repeat 0 0;
}

#foo .bg-1 {background-position:0 0;}
#foo .bg-2 {background-position:100% 0;}
#foo .bg-3 {background-position:100% 100%;}
#foo .bg-4 {background-position:0 100%;}

/* f. Remove the last semicolon in single property */
#foo .bg {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background:white url('img/bg-image.png') no-repeat 0 0;
}

#foo .bg-1 {background-position:0 0}
#foo .bg-2 {background-position:100% 0}
#foo .bg-3 {background-position:100% 100%}
#foo .bg-4 {background-position:0 100%}

/* g. Inline layout mode */
#foo .bg { position:absolute; top:0; right:0; bottom:0; left:0; background:white url('img/bg-image.png') no-repeat 0 0;...