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

HTML Dasar

Part 1

Pengenalan HTML

HTML Dasar

Part dua

Hello World

HTML Dasar

Part tiga

Tag Head Dan Tag Body

HTML Dasar

Part 4

Paragraph

HTML Dasar

Part lima

Heading

HTML Dasar

Part 6

List

HTML Dasar

Part 7

Hyperlink

HTML Dasar

Part 8

Image

HTML Dasar

Part 9

Table

HTML Dasar

Part 10

Form

CSS Dasar

Part 1

Pengenalan CSS

CSS Dasar

Part dua

Anatomi CSS

CSS Dasar

Part tiga

Penempatan File CSS

CSS Dasar

Part 4

CSS Font Styling

CSS Dasar

Part lima

CSS Text Styling

CSS Dasar

Part 6

CSS Background Styling

CSS Dasar

Part 7

CSS Selector

CSS Dasar

Part 8

CSS Inheritance

CSS Dasar

Part 9

CSS Pseudo-Class

CSS Dasar

Part 10

CSS Specifity

CSS Layouting

Part 1

Konsep CSS Layouting

CSS Layouting

Part dua

CSS Display

CSS Layouting

Part tiga

Dimensi Website

CSS Layouting

Part 4

CSS Box Model

CSS Layouting

Part lima

CSS Reset

CSS Layouting

Part 6

CSS Float & ClearFix

CSS Layouting

Part 7

CSS Position

CSS Layouting

Part 8

CSS Pseudo-Class Target

CSS Layouting

Part 9

CSS Z-Index

CSS3

Part 1

Pengenalan CSS3

CSS3

Part dua

Border Radius

CSS3

Part tiga

Opacity

CSS3

Part 4

Model Warna

RGBa & HSLa

CSS3

Part lima

Box Shadow

CSS3

Part 6

Text Shadow

CSS3

Part 7

Gradient

CSS3

Part 8

Font Face

CSS3

Part 9

Vendor Prefixes

CSS3

Part 10

Property Filter

CSS3

Part 11

Property Transform

CSS3

Part 12

Property Transition

CSS3

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.

Gallery Photo Lightbox

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!

Gallery Photo Of Animals

Galerry Photo Of Flowers

Belum ada Komentar untuk "Design Website Part 3"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel