Gagap Tech ID: Tutorial Pemrograman Web CSS

Tuesday, July 10, 2018

Tutorial Membuat Slide Show Sederhana - Gagap Tech ID

July 10, 2018Tutorial Pemrograman Web CSSNo comments

Tutorial Membuat Slide Show Sederhana - Gagap Tech ID

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 Gagap Tech ID.

Share: Facebook Twitter Google+

Thursday, May 10, 2018

Tutorial Web Sederhana dengan HTML dan CSS - Gagap Tech ID

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

Tutorial Web Sederhana dengan HTML dan CSS - Gagap Tech ID

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 - Gagap Tech ID", 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 Gagap Tech ID.

Share: Facebook Twitter Google+

Gagap Tech ID

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 - Gagap Tech ID

Tutorial Membuat Slide Show Sederhana - Gagap Tech ID

Thursday, May 10, 2018

Tutorial Web Sederhana dengan HTML dan CSS - Gagap Tech ID

Tutorial Web Sederhana dengan HTML dan CSS - Gagap Tech ID

Report Abuse

Labels

Blog Archive

Theme Support

Gagap Tech ID

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 - Gagap Tech ID

Tutorial Membuat Slide Show Sederhana - Gagap Tech ID

Thursday, May 10, 2018

Tutorial Web Sederhana dengan HTML dan CSS - Gagap Tech ID

Tutorial Web Sederhana dengan HTML dan CSS - Gagap Tech ID

Social Profiles

Report Abuse

Labels

Blog Archive

Theme Support