Blog'e Wong Kerteg Ireng: Tutorial Pemrograman Web CSS

Tuesday, July 10, 2018

Tutorial Membuat Slide Show Sederhana - Blog'e Wong Kreteg Ireng

July 10, 2018Tutorial Pemrograman Web CSSNo comments

Tutorial Membuat Slide Show Sederhana - Hai, Sobat, kali ini mau berbagi artikel tentang cara membuat slideshow sederhana untuk blog sobat.

Tutorial Membuat Slide Show Sederhana - Blog'e Wong Kreteg Ireng

<br />
<br />
<html> <head> <title>Latihan Membuat Slide Show</title> <style> /*css resets*/ *{ padding:0; margin:0; } img{ max-width:100%; height:auto; } ul,ol{ list-style-type:none; } /*end css resets*/ /*posisi letak slider*/ .container{ margin: 10% auto; position: relative; overflow: hidden; } .container, ul.slide li img{ width: 500px; height: 300px; } ul.slide{ position: absolute; display: block; width: 300%; } .caption{ position: absolute; background-color:rgba(0,0,0,0.5); bottom: 0px; padding: 10px; color: white; left: 0; right: 0; } /*end posisi letak slider*/ /*css slider*/ ul.slide li{ display: inline-block; float: left; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; transition: transform 2000ms; -webkit-transition: -webkit-transform 2000ms; -moz-transition: -moz-transform 2000ms; transition:-webkit-transform 2000ms, transform 2000ms; } ul.slide li.slide-1{ left: 0%; } ul.slide li.slide-2{ left: 100%; } ul.slide li.slide-3{ left: 200%; } #nav1:checked ~ ul.slide li{ transform: translateX(0%); -webkit-transform: translateX(0%); -moz-transform: translateX(0%); } #nav2:checked ~ ul.slide li{ transform: translateX(-100%); -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); } #nav3:checked ~ ul.slide li{ transform: translateX(-200%); -webkit-transform: translateX(-200%); -moz-transform: translateX(-200%); } /*end css slider*/ /*nav*/ .radio-nav{ display: none; } /*end nav*/ /*style tombol*/ .nav-arrow{ position: absolute; top: 45%; width: 50px; height: 50px; } .nav-next{ right: 10px; } .nav-prev{ left: 10px; } .nav-arrow label{ transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; background-color:rgba(0,0,0,0.5); color: white; border-radius: 50%; display: block; position: absolute; padding:15px 20px; cursor: pointer; z-index: 1; opacity: 0; font-weight: bold; line-height: 1; } .container:hover .nav-arrow label{ background-color:rgba(0,0,0,0.7); } /*end style tombol*/ /*urutan tombol*/ #nav-1:checked ~ .nav-prev label.nav-3, #nav-1:checked ~ .nav-next label.nav-2, #nav-2:checked ~ .nav-prev label.nav-1, #nav-2:checked ~ .nav-next label.nav-3, #nav-3:checked ~ .nav-prev label.nav-2, #nav-3:checked ~ .nav-next label.nav-1 { z-index: 2; opacity: 1; } /*end urutan tombol*/ </style> </head> <body> <div class="container">
<input type="radio" name="slide" class="radio-nav" id="nav-1" checked/> <input type="radio" name="slide" class="radio-nav" id="nav-2" /> <input type="radio" name="slide" class="radio-nav" id="nav-3" /> <ul class="slide">
<li class="slide-1"> <img src="1 (1).png"> <div class="caption">
123</div>
</li>
<li class="slide-2"> <img src="1 (2).png"> <div class="caption">
231</div>
</li>
<li class="slide-3"> <img src="1 (3).png"> <div class="caption">
312</div>
</li>
</ul>
<div class="nav-arrow nav-next">
<label class="nav-1" for="nav-1">></label> <label class="nav-2" for="nav-2">></label> <label class="nav-3" for="nav-3">></label> </div>
<div class="nav-arrow nav-prev">
<label class="nav-1" for="nav-1"><</label> <label class="nav-2" for="nav-2"><</label> <label class="nav-3" for="nav-3"><</label> </div>
</div>
</body> </html><br />
<br />
<br />

Sekian Artikel kali ini, semoga bisa bermanfaat bagi sobat yang sedang belajar membuat slide show sederhana.

Masih banyak lagi tutorial-tutorial yang nanti akan saya bagikan, selengkapnya cek Blog'e Wong Kreteg Ireng.

Share: Facebook Twitter Google+

Thursday, May 10, 2018

Tutorial Web Sederhana dengan HTML dan CSS - Blog'e Wong Kreteg Ireng

May 10, 2018Tutorial Pemrograman Web CSS, Tutorial Pemrograman Web HTMLNo comments

Tutorial Web Sederhana dengan HTML dan CSS - Kali ini saya ingin membagikan tutorial web sederhana menggunakan html dan css untuk pemula. web sederhana ini sebenarnya adalah salah satu tugas kuliah saya.

Untuk Script lengkapnya langsung aja sedot link dibawah ini.

Download

Sekian tutorial kali ini tentang "Tutorial Web Sederhana dengan HTML dan CSS - Blog'e Wong Kreteg Ireng", semoga tulisan yang saya bagikan bisa bermanfaat bagi sobat yang baru mengenal atau belajar membuat blog sendiri.

Masih banyak lagi tutorial-tutorial yang nanti akan saya bagikan, selengkapnya cek Blog'e Wong Kreteg Ireng.

Share: Facebook Twitter Google+

Blog'e Wong Kerteg Ireng

Monday, August 27, 2018

Contoh Template Website Statis Sederhana Menggunakan HTML dan CSS - Blog'e Wong Kreteg Ireng

Tuesday, July 10, 2018

Tutorial Membuat Slide Show Sederhana - Blog'e Wong Kreteg Ireng

Thursday, May 10, 2018

Tutorial Web Sederhana dengan HTML dan CSS - Blog'e Wong Kreteg Ireng

Halaman

Labels

Blog Archive

Blog'e Wong Kerteg Ireng

Monday, August 27, 2018

Contoh Template Website Statis Sederhana Menggunakan HTML dan CSS - Blog'e Wong Kreteg Ireng

Tuesday, July 10, 2018

Tutorial Membuat Slide Show Sederhana - Blog'e Wong Kreteg Ireng

Thursday, May 10, 2018

Tutorial Web Sederhana dengan HTML dan CSS - Blog'e Wong Kreteg Ireng

Social Profiles

Halaman

Labels

Blog Archive