Trik Komputer: Simpel Content Slider Pure CSS3

Senin, 28 November 2011

Simpel Content Slider Pure CSS3

Mumpung masih hangat para developer membicarakan tutorial CSS3, sekarang Beben Koben si bloglang anu ganteng kalem tea akan berbagi kembali tut's mengenai cara membuat Content Slider use CSS3. Before i'll have posted about this tema, you all can check from is this . Sama trick namun berbeda hasil ~~hayah~~ master @gabromanato selaku owner kembali menggebrak dengan tutorial terbaru "Pure CSS3 content slider"
Mr. Gabriele Romanato seorang web development dimana karya²nya maknyus bin yahut :x Simpel dalam menjelaskan, disertakan dengan live demo guna mendukung penjelasan postingan bagi yang jelek pemahaman bahasa inggris macam aku :">
Cekgidot...

Markup HTML

<div id="slideshow">

<div class="slide s1">
<img src="http://LINK-YOUR-IMAGE-1.jpg" alt="" />
<div class="caption">Keterangan gambar kolom 1</div>
</div>

<div class="slide s2">
<img src="LINK-YOUR-IMAGE-2.jpg" alt="" />
<div class="caption">Keterangan gambar kolom 2</div>
</div>

<div class="slide s3">
<img src="LINK-YOUR-IMAGE-3.jpg" alt="" />
<div class="caption">Keterangan gambar kolom 3</div>
</div>

<div class="slide s4">
<img src="LINK-YOUR-IMAGE-4.jpg" alt="" />
<div class="caption">Keterangan gambar kolom 4</div>
</div>

</div>

Kode markUp ini disimpan didalam tag <body> template kalian!

Structure CSS

#slideshow {
width: 700px;
height: 330px;
margin: 5px auto;
overflow: hidden;
position: relative;
background: #ccc;
border: 1px solid #000;
}
#slideshow div.slide {
width: 700px;
height: 330px;
position: absolute;
top: 0;
cursor: pointer;
z-index: 1;
-moz-transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-ms-transition: all 1s ease-out;
transition: all 1s ease-out;
}
#slideshow div.slide img {
position: absolute;
top: 0;
left: 0;
width: 700px;
height: 330px;
}
#slideshow div.slide div.caption {
height: 2em;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
color: #fff;
line-height: 2;
text-indent: 0.5em;
}
#slideshow div.s1 {
left: 0px;
}
#slideshow div.s2 {
left: 175px;
}
#slideshow div.s3 {
left: 350px;
}
#slideshow div.s4 {
left: 525px;
}
#slideshow div.slide:hover {
left: 0;
z-index: 2;
}

SAVE.

Penjelasan

Perhatikan kode width yg diberi warna. Sesuaikan panjang tersebut dengan dimana nanti sobat akan menyimpan code markpup HTML (dalam tag body). Jika sobat mau simpan, misalkan (outer-wrapper, main-wrapper or unik ID lainnya) maka panjang slideshow sesuaikan dengan itu!

Kode left ada 4 biji. Jumlah panjang yg kalian buat tadi, bagi saja dengan nominal 4. Tambahkan seterusnya dengan kelipatannya. Ini berfungsi agar menciptakan lebar kolom sama ;) Good luck b-)

Demo Via jsbin

Happy slideshow anymore \m/

Trik Komputer

Senin, 28 November 2011

Simpel Content Slider Pure CSS3

Markup HTML

Structure CSS

Penjelasan

Tidak ada komentar:

Posting Komentar