Cara Membuat Gallery Foto + LightBox Dengan HTML Dan CSS3
cara membuat galeri slide di html dan css - Hallo teman-teman kembali lagi dengan saya suryapero dalam pembahasa lain yaitu tentang programmer website. saya akan membagikan cara membuat gallery foto yang keren buat kamu. tutorial ini saya dapatkan di Web Programming Unpas.
Gallery foto adalah foto yang berisi kenangan kamu berupa sebuat foto, tetapi disimpan di website atau blog. tutorial ini bisa kamu terapkan di blog atau website kamu. kamu bisa melihat data HTML dan CSS
Fitur-Fitur
3. Simpan Theme Atau themplate kamu dan lihat hasilnya.
Demikianlah tutorial membuat gallery gambar dengan HTML dan CSS , semoga bermanfaat bagi kamu. pastikan praktekan juga agar tambah mengerti. support blog ini dengan bantu membagikan artikel blog ini agar lebih luas pembahasan dan ilmunya.
Gallery foto adalah foto yang berisi kenangan kamu berupa sebuat foto, tetapi disimpan di website atau blog. tutorial ini bisa kamu terapkan di blog atau website kamu. kamu bisa melihat data HTML dan CSS
Fitur-Fitur
- Slide Image
- Tombol Close
- Animation
- Dll
1.Salin HTML Dibawah ini, letakkan di sorce code kamu.
<!-- WWW.SURYAPERO.COM -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gallery Foto</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<!-- WWW.SURYAPERO.COM -->
</head>
<body>
<h1>Gallery Foto</h1>
<!-- WWW.SURYAPERO.COM -->
<div class="container">
<ul class="gallery">
<li>
<a href="#gambar-1">
<img src="img/thumbs/1.png" alt="Sagiri">
<span>Sagiri</span>
</a>
<div class="overlay" id="gambar-1">
<a href="#" class="close">X Close</a>
<a href="#gambar-4" class="prev">prev</a>
<img src="img/full/1.png" alt="">
<a href="#gambar-2" class="next">next</a>
</div>
</li>
<li>
<a href="#gambar-2">
<img src="img/thumbs/2.png" alt="Ikazuki">
<span>Ikazuki</span>
</a>
<div class="overlay" id="gambar-2">
<a href="#" class="close">X Close</a>
<a href="#gambar-1" class="prev">prev</a>
<img src="img/full/Yoi.png" alt="">
<a href="#gambar-3" class="next">next</a>
</div>
</li>
<li>
<a href="#gambar-3">
<img src="img/thumbs/3.png" alt="Sagiri">
<span>Sagiri</span>
</a>
<div class="overlay" id="gambar-3">
<a href="#" class="close">X Close</a>
<a href="#gambar-2" class="prev">prev</a>
<img src="img/full/3.png" alt="">
<a href="#gambar-4" class="next">next</a>
</div>
</li>
<li>
<a href="#gambar-4">
<img src="img/thumbs/4.png" alt="Sagiri">
<span>Sagiri</span>
</a>
<div class="overlay" id="gambar-4">
<a href="#" class="close">X Close</a>
<a href="#gambar-3" class="prev">prev</a>
<img src="img/full/4.png" alt="">
<a href="#gambar-1" class="next">next</a>
</div>
</li>
<div class="clear"></div>
</ul>
</div>
<!-- WWW.SURYAPERO.COM -->
</body>
</html>font*/
/*WWW.SURYAPERO.COM*/
@font-face {
font-family: 'bebas_neue_regularregular';
src: url('../fonts/bebasneue_regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/*Sytle Utama*/
/*WWW.SURYAPERO.COM*/
body {
font: 18px/36px 'bebas_neue_regularregular';
background-image: url(../img/air.jpg);
background-attachment: fixed;
background-size: cover;
}
h1 {
font-size: 80px;
margin: 50px 0;
text-align: center;
text-shadow: 2px 2px 3px rgba(0,0,0,.5);
}
.container {
width: 600px;
background-color: white;
margin: auto;
padding: 30px;
box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
border-radius: 5px;
}
.gallery li {
width: 120px;
height: 120px;
/*overflow: hidden;*/
border: 5px solid #666;
/*display: inline-block;*/
float: left;
margin-right: 17px;
position: relative;
}
.gallery li img,
.gallery li span,
.gallery li {
border-radius: 50%;
}
.gallery li span {
display: block;
width: 120px;
height: 120px;
background-color: rgba(200,200,200,.5);
position: absolute;
top:0;
text-align: center;
line-height: 120px;
color: #333;
text-shadow: 2px 1px 2px #ddd;
opacity: 0;
transform: scale(0) rotate(0);
transition: .5s;
}
.gallery li a:hover span {
opacity: 1;
transform: scale(1) rotate(360deg);
}
.clear {
clear: both;
}
/*Overlay*/
/*WWW.SURYAPERO.COM*/
.overlay {
width: 0;
height: 0;
overflow: hidden;
position: fixed;
top:0;
left:0;
background-color: rgba(0,0,0,0);
z-index: 1;
transition: .6s;
text-align: center;
padding:100px 0;
}
.overlay:target {
width: auto;
height: auto;
bottom: 0;
right: 0;
background-color: rgba(0,0,0,.7);
}
.overlay img {
max-height: 100%;
filter: drop-shadow(2px 2px 10px rgba(0,0,0,.8));
}
.overlay:target img {
animation: fadeSaja 1s;
}
.overlay .close {
position: absolute;
left: 40%;
z-index: 2;
color: white;
text-decoration: none;
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: fadeSaja .5s .5s forwards;
}
/*Navigasi*/
.next, .prev {
width: 57px;
height: 93px;
background-image: url(../img/kanan.png);
position: absolute;
text-indent: -9999px;
top: 40%;
margin-left: 50px;
opacity: 0;
}
.prev {
background-image: url(../img/kiri.png);
margin-left: -100px;
}
/*Animation*/
/*WWW.SURYAPERO.COM*/
@keyframes fadeSaja {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes zoomDanFade {
0% {
transform: scale(0);
opacity: 0;
}
100% {
transform: scale(1);
opacity:1;
}
}
@keyframes slideDownFade {
0% {
opacity: 0;
margin-top: -20px;
}
100% {
opacity: 1;
margin-top: 0;
}
}
/*WWW.SURYAPERO.COM3. Simpan Theme Atau themplate kamu dan lihat hasilnya.
Demikianlah tutorial membuat gallery gambar dengan HTML dan CSS , semoga bermanfaat bagi kamu. pastikan praktekan juga agar tambah mengerti. support blog ini dengan bantu membagikan artikel blog ini agar lebih luas pembahasan dan ilmunya.
Posting Komentar untuk "Cara Membuat Gallery Foto + LightBox Dengan HTML Dan CSS3"