Selamat siang, kembali lagi lagi dengan saya. Hari ini saya ingin menunjukkan kepada sobat bagaimana untuk membuat efek lightbox yang rapi hanya menggunakan CSS. Idenya adalah untuk memiliki beberapa thumbnail yang dapat diklik, dan setelah diklik, masing-masing gambar akan ditampilkan besar. Menggunakan transisi CSS dan animasi, kita bisa membuat gambar besar muncul dengan cara elegant.
Dengan bantuan dari
Untuk "menutup" lightbox, kita akan klik pada link dengan tag div class lb-close yang menunjuk ke elemen dengan ID halaman yang tag <body>.
Mungkin cukup sekian tutorial mengenai CSS3 Lightbox! Saya harap Anda menikmati tutorial ini dan menemukan inspirasi!
Dengan bantuan dari
pseudo-class : target
, kita akan mampu untuk menampilkan gambar lightbox dan menavigasi melalui thumbnail.Harap dicatat bahwa ini hanya akan bekerja dengan browser yang mendukung: target pseudo class.
Markup
Kami ingin menunjukkan satu set thumbnail, masing-masing memiliki judul yang akan muncul saat di hover (sentuh mouse). Ketika mengklik thumbnail, kami ingin menunjukkan versi besar gambar dalamoverlay content
yang akan membuat background sedikit lebih buram. Jadi, mari kita menggunakan unordered list
di mana setiap item daftar akan berisi thumbnail dan overlay dengan versi besar pada setiap gambar:<ul class="lb-album">Anchor untuk thumbnail akan menunjuk ke elemen dengan id gambar-1 yang merupakan tag div dengan class lb-overlay. Untuk menavigasi melalui gambar, kita akan menambahkan dua elemen link yang mengarah ke gambar sebelumnya dan berikutnya (besar).
<li>
<a href="#image-1">
<img src="images/thumbs/1.jpg" alt="image01">
<span>Pointe</span>
</a>
<div class="lb-overlay" id="image-1">
<img src="images/full/1.jpg" alt="image01" />
<div>
<h3>pointe <span>/point/</h3>
<p>Dance performed on the tips of the toes</p>
<a href="#image-10" class="lb-prev">Prev</a>
<a href="#image-2" class="lb-next">Next</a>
</div>
<a href="#page" class="lb-close">x Close</a>
</div>
</li>
<li>
<!-- ... -->
</li>
</ul>
Untuk "menutup" lightbox, kita akan klik pada link dengan tag div class lb-close yang menunjuk ke elemen dengan ID halaman yang tag <body>.
CSS
.lb-album{Judul untuk setiap thumbnail akan terlihat dan kita akan menambahkan transisi untuk opacity yang akan berubah menjadi 1. Kita akan menggunakan radial gradient sebagai background::
width: 900px;
margin: 0 auto;
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
}
.lb-album li{
float: left;
margin: 5px;
position: relative;
}
.lb-album li > a,
.lb-album li > a img{
display: block;
}
.lb-album li > a{
width: 150px;
height: 150px;
position: relative;
padding: 10px;
background: #f1d2c2;
box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
border-radius: 4px;
}
.lb-album li > a span{Overlay akan memiliki gradien radial yang sama dan kita akan mengatur posisinya untuk tetap
position: absolute;
width: 150px;
height: 150px;
top: 10px;
left: 10px;
text-align: center;
line-height: 150px;
color: rgba(27,54,81,0.8);
text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
font-size: 24px;
opacity: 0;
background:
radial-gradient(
center,
ellipse cover,
rgba(255,255,255,0.56) 0%,
rgba(241,210,194,1) 100%
);
transition: opacity 0.3s linear;
}
.lb-album li > a:hover span{
opacity: 1;
}
{position:fixed;}
, dengan tinggi dan lebar nol:.lb-overlay{Setelah kita mengklik thumbnail, kami akan menutupi seluruh layar dengan overlay, tapi pertama-tama, mari kita lihat tag div untuk judul utama dan deskripsi:
width: 0px;
height: 0px;
position: fixed;
overflow: hidden;
left: 0px;
top: 0px;
padding: 0px;
z-index: 99;
text-align: center;
background:
radial-gradient(
center,
ellipse cover,
rgba(255,255,255,0.56) 0%,
rgba(241,210,194,1) 100%
);
}
.lb-overlay > div{Kita akan memposisikan elemen link untuk menutup lightbox yang benar-benar di atas gambar:
position: relative;
color: rgba(27,54,81,0.8);
width: 550px;
height: 80px;
margin: 40px auto 0px auto;
text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
}
.lb-overlay div h3,
.lb-overlay div p{
padding: 0px 20px;
width: 200px;
height: 60px;
}
.lb-overlay div h3{
font-size: 36px;
float: left;
text-align: right;
border-right: 1px solid rgba(27,54,81,0.4);
}
.lb-overlay div h3 span,
.lb-overlay div p{
font-size: 16px;
font-family: Constantia, Palatino, serif;
font-style: italic;
}
.lb-overlay div h3 span{
display: block;
line-height: 6px;
}
.lb-overlay div p{
font-size: 14px;
text-align: left;
float: left;
width: 260px;
}
.lb-overlay a.lb-close{Gambar akan memiliki ketinggian maksimum 100%. Itu salah satu cara untuk membuat gambar agak reponsive. Kita juga akan menambahkan transisi untuk tingkat opacity. Setelah kita "membuka" gambar besar, opacity akan mendapatkan animasi. Kita akan lihat nanti bagaimana kita dapat menggunakan animasi untuk gambar.
background: rgba(27,54,81,0.8);
z-index: 1001;
color: #fff;
position: absolute;
top: 43px;
left: 50%;
font-size: 15px;
line-height: 26px;
text-align: center;
width: 50px;
height: 23px;
overflow: hidden;
margin-left: -25px;
opacity: 0;
box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
}
.lb-overlay img{Elemen navigasi:
max-height: 100%;
position: relative;
opacity: 0;
box-shadow: 0px 2px 7px rgba(0,0,0,0.2);
transition: opacity 0.5s linear;
}
.lb-prev, .lb-next{Ketika kita klik pada anchor thumbnail, maka akan terlihat versi besar setiap gambar degan tag div class lb-overlay. Jadi, untuk mengatasi elemen ini kita dapat menggunakan pseudo class :target. Kita akan menambahkan padding untuk overlay dan "stretch" atas seluruh viewport dengan menetapkan lebar dan tinggi auto dan mengatur kanan dan bawah 0px.
text-indent: -9000px;
position: absolute;
top: -32px;
width: 24px;
height: 25px;
left: 50%;
opacity: 0.8;
}
.lb-prev:hover, .lb-next:hover{
opacity: 1;
}
.lb-prev{
margin-left: -30px;
background: transparent url(../images/arrows.png) no-repeat top left;
}
.lb-next{
margin-left: 6px;
background: transparent url(../images/arrows.png) no-repeat top right;
}
.lb-overlay:target {Sekarang kita juga akan mengatur opacity gambar dan link penutu 1. Gambar akan kita beri efek
width: auto;
height: auto;
bottom: 0px;
right: 0px;
padding: 80px 100px 120px 100px;
}
" fade in"
, karena kita telah menentukan transisi:.lb-overlay:target img,Mari kita lihat alternatif 2 yang kita gunakan dalam demo 1 dan demo 2.
.lb-overlay:target a.lb-close{
opacity: 1;
}
.lb-overlay:target img {Dalam demo kedua kita akan menciptakan efek sebaliknya, yaitu skala gambar ke bawah:
animation: fadeInScale 1.2s ease-in-out;
}
@keyframes fadeInScale {
0% { transform: scale(0.6); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.lb-overlay:target img {
animation: scaleDown 1.2s ease-in-out;
}
@-webkit-keyframes scaleDown {
0% { transform: scale(10,10); opacity: 0; }
100% { transform: scale(1,1); opacity: 1; }
}
Mungkin cukup sekian tutorial mengenai CSS3 Lightbox! Saya harap Anda menikmati tutorial ini dan menemukan inspirasi!
0 comments:
Post a Comment