Tampilkan postingan dengan label trik css. Tampilkan semua postingan
Tampilkan postingan dengan label trik css. Tampilkan semua postingan

Pure CSS Slider Images

Posted by Administrator On 4 Nov 2012 2 komentar
Kali ini saya share satu Source tentang tips trik css membuat "Pure CSS Slider with Images"
untuk memulai perlu disiapkan segelas kopi agar tidak ngantuk dan tetap konsentrasi,..LEts Rock




Demo Bisa dilihat di kolom bawah sendiri (footer) pada blog ini ...

Catatan Singkat (CATSING)
Ada 4 komponen untuk membuat "Pure CSS Slider Images":
1. CSS

untuk menyisipkan CSS ke mode HTML 
<link rel="stylesheet" href="style.css">
2. Javascript

 untuk menyisipkan Javascript ke mode HTML
<script type="text/javascript" src="jquery.js"></script>
 
3. Images

untuk menyisipkan Gambar ke mode HTML  
<img src="url gambar.jpg"/></li>

4. HTML

Untuk pemanggilan kode css nantinya menggunakan <div id

Semua Kode dalam HTML nantinya seperti ini
* Hasil Akhir Pada Mode HTML

<script type="text/javascript" src="http://spewete.co.cc/trik/css/pureslider/jquery.js"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
  <script type="text/javascript" src="http://spewete.co.cc/trik/css/pureslider/"></script>
<![endif]-->
<link rel="stylesheet" href="http://spewete.co.cc/trik/css/pureslider/style.css">

<div id="slideshow">
      <ul>
        <li><a href="#one">One</a><img id="one" src="http://spewete.co.cc/trik/css/pureslider/1.jpeg"/></li>
        <li><a href="#two">Two</a> <img id="two" src="http://spewete.co.cc/trik/css/pureslider/2.jpeg"/></li>
        <li><a href="#three">Three</a> <img id="three" src="http://spewete.co.cc/trik/css/pureslider/3.jpeg"/></li>
        <li><a href="#four">Four</a> <img id="four" src="http://spewete.co.cc/trik/css/pureslider/4.jpeg"/></li>
        <li><a href="#five">Five</a> <img id="five" src="http://spewete.co.cc/trik/css/pureslider/5.jpeg"/></li>
        <li><a href="#six">Six</a> <img id="six" src="http://spewete.co.cc/trik/css/pureslider/6.jpeg"/></li>
      </ul>
    </div>


Untuk Pengeditan dalam Style berupa lebar , tinggi dan lain-lain bisa anda bongkar n utak utik sendiri file style.css


/* Start Style Pure CSS Slider With Images */ * { margin: 0px; padding: 0px; } body { background: #eee; } /*Slideshow Div Styles*/ #slideshow { margin: 50px auto 30px auto; position: relative; width: 400px; height: 350px; padding: 10px; background: #fff url('http://spewete.co.cc/trik/css/pureslider/mulai.jpg') no-repeat 10px 50px; overflow: hidden; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0px 3px 5px #999, 0px 10px 10px #999; -moz-box-shadow: 0px 3px 5px #999, 0px 10px 10px #999; box-shadow: 0px 3px 5px #999, 0px 10px 10px #999; } /*List Styles*/ #slideshow ul { list-style: none; } #slideshow li { float: left; overflow: hidden; margin: 5px 20px 0 0; } #slideshow li a { color: #888; text-decoration: none; font: bold 15px/1 Helvetica, sans-serif; text-transform: uppercase; -webkit-transition: color 0.5s ease; -moz-transition: color 0.5s ease; -o-transition: color 0.5s ease; -ms-transition: color 0.5s ease; transition: color 0.5s ease; } #slideshow li a:hover { color: #50b0df; text-decoration: underline; } #slideshow li img { position: absolute; top: 50px; left: 10px; float: left; -webkit-transition: all 1s ease-in-out 0s; -moz-transition: all 1s ease-in-out 0s; -o-transition: all 1s ease-in-out 0s; -ms-transition: all 1s ease-in-out 0s; transition: all 1s ease-in-out 0s; } #slideshow li img:target { margin: 0 0 0 0px; } /*Shifts non-targeted images*/ #slideshow li img:not(:target) { margin: 0 0 0 -500px; } /*Alternative Animation (from top)*/ /*#slideshow li img:not(:target) { margin: -500px 0 0 0; }*/ /* End Style Pure CSS Slider With Images */


----------------------------------------------------
Terimakasih telah menyimak 
semoga membantu 
 __________________________________


READ MORE
  • BloggerHack
  • PBT