Design Website Part 3
Design Website Part 3 – Membuat Website Galeri Foto Dengan HTML Dan CSS Versi Lightbox S.3 - Untuk membuat sebuah halaman website yang berisi galleri foto apa saja yang kamu suka, caranya cukup mudah. Lightbox adalah sebuah galeri foto yang dibuat pertama kali dengan menggunakan javascript oleh seorang yang bernama lokesh dhakar. Idenya adalah membuat halaman website galeri foto sederhana dimana pada halaman utama terdapat thumbnail foto-foto tersebut. Kalau kita buka atau klik thumbnail foto tersebut akan menampilkan foto-foto tersebut dalam 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 sebagai media untuk menuliskan kode-kode program untuk membuat halaman website.
2. Web Browser untuk menampilkan halaman website yang kita buat yang berasal dari kode-kode program yang kita tuliskan dalam Code Editor.
3. Pengetahuan dasar mengenai HTML, CSS, dan CSS layouting dan CSS3. Apabila teman-teman butuh informasi mengenai 4 materi tersebut, silakan kunjungi materi berikut :
Referensi HTML Dasar
Referensi CSS Dasar
Referensi CSS Layouting
Referensi CSS3
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!
Post a Comment for "Design Website Part 3"
Silakan berkomentar secara bijak dan sesuai dengan topik pembahasan