Design Website Part 3
Design Website Part tiga ? Membuat Website Galeri Foto Dengan HTML Dan CSS Versi Lightbox S.3 - Untuk menciptakan sebuah laman website yang berisi galleri foto apa saja yang kamu senang, caranya cukup mudah. Lightbox merupakan sebuah galeri foto yang dibentuk pertama kali menggunakan memakai javascript sang seorang yg bernama lokesh dhakar. Idenya adalah menciptakan laman website galeri foto sederhana dimana pada laman utama terdapat thumbnail foto-foto tadi. Kalau kita buka atau klik thumbnail foto tadi akan menampilkan foto-foto tadi pada ukuran full size.
Mari kita mulai dengan sebuah halaman website sederhana seperti itu . Apa saja yang perlu kita persiapkan? dan bagaimana membuatnya?. Ikuti langkah dan step-step berikut ya guys :
1. Code editor menjadi media buat menuliskan kode-kode program buat menciptakan page website.
2. Web Browser buat menampilkan page website yg kita buat yang asal berdasarkan kode-kode program yg kita tuliskan pada Code Editor.
3. Pengetahuan dasar mengenai HTML, CSS, & CSS layouting dan CSS3. Jika sahabat-sahabat butuh informasi tentang 4 materi tersebut, silakan kunjungi materi berikut :
Referensi HTML Dasar
Part 1
Pengenalan HTML
Part dua
Hello World
Part tiga
Tag Head Dan Tag Body
Part 4
Paragraph
Part lima
Heading
Part 6
List
Part 7
Hyperlink
Part 8
Image
Part 9
Table
Part 10
Form
Part 1
Pengenalan CSS
Part dua
Anatomi CSS
Part tiga
Penempatan File CSS
Part 4
CSS Font Styling
Part lima
CSS Text Styling
Part 6
CSS Background Styling
Part 7
CSS Selector
Part 8
CSS Inheritance
Part 9
CSS Pseudo-Class
Part 10
CSS Specifity
Part 1
Konsep CSS Layouting
Part dua
CSS Display
Part tiga
Dimensi Website
Part 4
CSS Box Model
Part lima
CSS Reset
Part 6
CSS Float & ClearFix
Part 7
CSS Position
Part 8
CSS Pseudo-Class Target
Part 9
CSS Z-Index
Part 1
Pengenalan CSS3
Part dua
Border Radius
Part tiga
Opacity
Part 4
Model Warna
RGBa & HSLa
Part lima
Box Shadow
Part 6
Text Shadow
Part 7
Gradient
Part 8
Font Face
Part 9
Vendor Prefixes
Part 10
Property Filter
Part 11
Property Transform
Part 12
Property Transition
Part 13
Property Animation
4. Layout Website. Kita perlu membuat sebuah layout website yang akan kita buat, sebagai sketsa awal untuk memulai membuat website. Dibutuhkan imajinasi yang kemudian kita bisa tuangkan dalam sebuah aplikasi untuk membuat layout website. Atau kita bisa membuatnya sendiri dengan menggunakan aplikasi design grafis seperti photoshop, coreldraw, dll. Saya ingin membuat sebuah 2 website galeri foto sederhana yang berisi hewan dan bunga. Namun untuk step yang akan saya terangkan dalam catatan ini, hanya untuk step-step secara garis besar. Nanti di akhir catatan ini, teman-teman bisa langsung download untuk source code 2 contoh website sederhana galeri foto tersebut. Berikut saya buat untuk layout-nya.
5. Setelah persiapan 1 s/d 4 siap. Kita siapkan gambar-gambar foto yang diperlukan dalam 1 folder image. Dalam folder image tersebut. Siapkan 2 folder lagi untuk gambar dengan ukuran fullsize dan untuk thumbnailnya.
6. Buat Struktur HTML seperti dibawah ini, jangan lupa isikan judul dalam tag <title>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Animal</title> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> </body> </html>
7. Untuk link file reset CSS dan style CSS halaman website galeri foto kita, silakan buat di file yang berbeda. Satukan kedua file tersebut dalam folder yang sama untuk CSS. Kemudian hubungkan file-file tersebut seperti pada link yang ada point 6, setelah tag <title>.
8. Kemudian buat untuk isi HTML pada point 6. Berisi judul utama, container untuk membungkus thumbnail foto-foto tersebut dalam sebuah tag <div>. Kemudian buat list tidak terurut yang di dalamnya ada list item yang beisi gambar dan span yang dibungkus dengan tag link.
<h1>Animal</h1> <div class="container"> <ul class="galleri"> <li> <a href="#gambar1"> <img src="img/thumbs/anjing.png" alt="Anjing"> <span>Anjing</span> </a> </li> </ul> </div>
9. Beri style untuk backgroundnya terlebih dahulu pada file : style.css
body { font: 20px/40px 'elephant', 'arial narrow', arial, sans-sherif; background-color: #D7E8EA; }
10. Beri style untuk judul utama pada halaman website galeri foto.
h1 { font-size: 80px; margin: 50px 0; text-align: center; text-shadow: 2px 2px 2px white; }
11. Buat style container pembungkus, tempat foto-foto tersebut berada.
.container { width: 600px; margin: auto; padding: 30px; background-color: #F1F9F7; box-shadow: inset 0 0 3px 3px rgba(0,0,0,50%); border-radius: 5px; }
12. Beri style foto yang akan di jadikan thumbnail galeri foto tersebut.
.galleri li { width: 120px; height: 120px; overflow: hidden; border: 4px solid #84A2A2; float: left; margin-right: 22px; position: relative; } .galleri li, .galleri li a img, .galleri li span { border-radius: 50%; }
13. Beri Style pada span untuk caption thumbnail foto tersebut.
.galleri li span { display: block; width: 120px; height: 120px; background-color: rgba(200,200,200,50%); position: absolute; top: 0; text-align: center; line-height: 120px; color: white; text-shadow: 1px 1px 2px black; opacity: 0; transform: scale(0) rotate(0); transition: 0.3s; } .galleri li a:hover span { opacity: 1; transform: scale(1) rotate(360deg); }
14. Untuk menghilangkan efek float dari point 12. Silakan buat tag <div> kosong sebelum tutup tag </ul>. Dan buat style pada file CSS tersebut.
HTML:
<div class="clear"></div>
CSS:
.clear { clear: both; }
15. Setelah halaman HTML dan CSS sudak ok sampai point 14, tinggal copy paste gambar thumbnail lainnya seperti pada tag <li> yang pertama. Jadi isi dalam tag <body> seperti ini :
<h1>Animal</h1> <div class="container"> <ul class="galleri"> <li> <a href="#gambar1"> <img src="img/thumbs/anjing.png" alt="Anjing"> <span>Anjing</span> </a> </li> <li> <a href="#gambar2"> <img src="img/thumbs/kucing.png" alt="Kucing"> <span>Kucing</span> </a> </li> <li> <a href="#gambar3"> <img src="img/thumbs/kuda.png" alt="Kuda"> <span>Kuda</span> </a> </li> <li> <a href="#gambar4"> <img src="img/thumbs/monyet.png" alt="Monyet"> <span>Monyet</span> </a> </li> <div class="clear"></div> </ul> </div>
16. Setelah style untuk semua thumbnail sudah selesai. Selanjutnya kita buat overlay. Untuk menutupi area di belakang, ketika gambar thumbnail di klik dan membuka gambar dengan ukuran full size.
HTML:
<div class="overlay" id="gambar1"> <img src="img/full/anjing.png" alt="Anjing"> </div>
CSS:
.overlay { width: 0; height: 0; overflow: hidden; position: fixed; top: 0; left: 0; background-color: rgba(0,0,0,0%); z-index: 9999; transition: 1s; text-align: center; padding: 100px 0; } .overlay:target { width: auto; height: auto; bottom: 0; right: 0; background-color: rgba(0,0,0,60%); }
17. Setelah pembuatan overlay sudah selesai, berilah style untuk gambar full size.
.overlay img { max-height: 100%; box-shadow: 2px 2px 8px rgba(0,0,0,80%); }
18. Buatlah animasi pada saat gambar thumbnail di target untuk membuka gambar full size yang berada pada overlay di file CSS
.overlay:target img { animation: fade 1s; } @keyframes zoomdanfade { 0% { transform: scale(0); opacity(0); } 100% { transform: scale(1); opacity: 1; } }
19. Setelah selesai sampai step 18. Copy paste gambar full-size lainnya. Seperti pada tampak HTML berikut:
<h1>Animal</h1> <div class="container"> <ul class="galleri"> <li> <a href="#gambar1"> <img src="img/thumbs/anjing.png" alt="Anjing"> <span>Anjing</span> </a> <div class="overlay" id="gambar1"> <img src="img/full/anjing.png" alt="Anjing"> </div> </li> <li> <a href="#gambar2"> <img src="img/thumbs/kucing.png" alt="Kucing"> <span>Kucing</span> </a> <div class="overlay" id="gambar2"> <img src="img/full/kucing.png" alt="Kucing"> </div> </li> <li> <a href="#gambar3"> <img src="img/thumbs/kuda.png" alt="Kuda"> <span>Kuda</span> </a> <div class="overlay" id="gambar3"> <img src="img/full/kuda.png" alt="Kuda"> </div> </li> <li> <a href="#gambar4"> <img src="img/thumbs/monyet.png" alt="Monyet"> <span>Monyet</span> </a> <div class="overlay" id="gambar4"> <img src="img/full/monyet.png" alt="Monyet"> </div> </li> <div class="clear"></div> </ul> </div>
20. Buatlah navigasi untuk memudahkan kita berpindah dari satu gambar ke gambar lain seperti HTML dan CSS berikut:
HTML:
<h1>Animal</h1> <div class="container"> <ul class="galleri"> <li> <a href="#gambar1"> <img src="img/thumbs/anjing.png" alt="Anjing"> <span>Anjing</span> </a> <div class="overlay" id="gambar1"> <a href="#" class="close">x-close</a> <a href="#gambar4" class="prev">prev</a> <img src="img/full/anjing.png" alt="Anjing"> <a href="#gambar2" class="next">next</a> </div> </li> <li> <a href="#gambar2"> <img src="img/thumbs/kucing.png" alt="Kucing"> <span>Kucing</span> </a> <div class="overlay" id="gambar2"> <a href="#" class="close">x-close</a> <a href="#gambar1" class="prev">prev</a> <img src="img/full/kucing.png" alt="Kucing"> <a href="#gambar3" class="next">next</a> </div> </li> <li> <a href="#gambar3"> <img src="img/thumbs/kuda.png" alt="Kuda"> <span>Kuda</span> </a> <div class="overlay" id="gambar3"> <a href="#" class="close">x-close</a> <a href="#gambar2" class="prev">prev</a> <img src="img/full/kuda.png" alt="Kuda"> <a href="#gambar4" class="next">next</a> </div> </li> <li> <a href="#gambar4"> <img src="img/thumbs/monyet.png" alt="Monyet"> <span>Monyet</span> </a> <div class="overlay" id="gambar4"> <a href="#" class="close">x-close</a> <a href="#gambar3" class="prev">prev</a> <img src="img/full/monyet.png" alt="Monyet"> <a href="#gambar1" class="next">next</a> </div> </li> <div class="clear"></div> </ul> </div>
CSS:
.overlay .close { text-decoration: none; position: absolute; top: 50px; left: 50%; margin-left: -35px; color: white; background-color: black; border: 1px solid white; line-height: 15px; padding: 5px; opacity:0; } .overlay:target .close { animation: slidedownfade .5s .5s forwards; } .overlay:target .next, .overlay:target .prev { animation: fade .5s .5s forwards; } /* ------ navigasi ------*/ .next,.prev { width: 57px; height: 93px; background-image: url(../galleri/img/next.png); position: absolute; top: 40%; text-indent: -9999px; margin-left: 50px; opacity: 0; } .prev { background-image: url(../galleri/img/prev.png); margin-left: -100px; } /* ----- animasi ----- */ @keyframes slidedownfade { 0% { opacity: 0; margin-top: -20px; } 100% { opacity: 1; margin-top: 0; } } @keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } }
Finally It’s Done. Untuk source code-nya silakan download here!
Belum ada Komentar untuk "Design Website Part 3"
Posting Komentar