6 Keterangan Gambar Keren dengan CSS3
CSS3 sangat kuat. Dulu kita membutuhkan gambar atau sekelompok kode JavaScript untuk membuat efek transisi yang sederhana. Saat ini kita dapat melakukan hal yang sama hanya dengan CSS3.
Dalam tutorial ini, kami akan menunjukkan kepada Anda cara membuat teks gambar dengan berbagai transisi hanya menggunakan CSS3.
- Demo
- Sumber unduhan
Dukungan Browser
Teks ini akan sangat tergantung pada properti transformasi dan transisi yang merupakan fitur yang relatif baru, jadi, akan lebih bijaksana untuk mencatat dukungan browser yang diperlukan untuk menjalankan teks dengan lancar.
Berikut ini adalah browser yang sudah mendukung transformasi dan transisi:
- Internet Explorer 10+ (belum dirilis)
- Firefox 6+
- Chrome 13+
- Safari 3.2+
- Opera 11+
Sekarang, mari kita mulai tutorialnya.
Struktur HTML
Kami memiliki 6 gambar; setiap gambar dengan gaya teks yang berbeda.
Keterangan Sederhana
Keterangan Lengkap
Anda dapat memilih dari berbagai macam warna, tergantung pada kualitas, dan tidak memiliki nilai tambah untuk waktu yang lama untuk menikmati dolore magna aliquam erat volutpat.
Keterangan Fade
Anda dapat memilih dari berbagai macam warna, tergantung pada kualitas, dan tidak memiliki nilai tambah untuk waktu yang lama untuk menikmati dolore magna aliquam erat volutpat.
Keterangan Slide
Anda dapat memilih dari berbagai macam warna, tergantung pada kualitas, dan tidak memiliki nilai tambah untuk waktu yang lama untuk menikmati dolore magna aliquam erat volutpat.
Ini adalah teks rotate
Anda dapat memilih dari berbagai macam warna, tergantung pada kualitas, dan tidak memiliki nilai tambah untuk waktu yang lama untuk menikmati dolore magna aliquam erat volutpat.
Keterangan Gaya Gratis
Anda dapat memilih dari berbagai macam warna, tergantung pada kualitas, dan tidak memiliki nilai tambah untuk waktu yang lama untuk menikmati dolore magna aliquam erat volutpat.
CSS dasar
Sebelum menata elemen apa pun, selalu merupakan awal yang baik untuk mengatur ulang semua properti menggunakan reset CSS ini dan memberi mereka nilai gaya standarnya, sehingga semua browser akan memberikan hasil yang sama (kecuali mungkin, IE6).
Gaya akan dipisahkan dalam file style.css, sehingga file HTML kami akan terlihat rapi. Namun, jangan lupa untuk menambahkan gaya tautan di dalam tag kepala untuk menerapkan aturan gaya dalam file.
OK, mari kita mulai menata elemen, mulai dari tag html dan id pembungkus utama:
html background-color: #eaeaea; #mainwrapper font: 10pt Arial normal, sans-serif; tinggi: otomatis; margin: 80px otomatis 0 otomatis; perataan teks: tengah; lebar: 660px;
Gaya Kotak Gambar
Kami menerapkan beberapa gaya umum dalam kotak yang berisi gambar. Kotak-kotak akan ditampilkan berdampingan menggunakan float left. Perhatikan bahwa kami juga menambahkan overflow: properti tersembunyi; ini akan membuat semua objek di dalam yang melewati div disembunyikan.
Kami juga mendeklarasikan properti transisi pada setiap gambar di dalam kotak, jika kami membutuhkan transisi gambar nanti.
#mainwrapper .box border: 5px solid #fff; kursor: pointer; tinggi: 182px; mengapung: kiri; margin: 5px; posisi: relatif; overflow: disembunyikan; lebar: 200px; -webkit-box-shadow: 1px 1px 1px 1px #ccc; -moz-box-shadow: 1px 1px 1px 1px #ccc; bayangan kotak: 1px 1px 1px 1px #ccc; #mainwrapper .box img position: absolute; kiri: 0; -webkit-transisi: semua kemudahan 300 ms; -moz-transisi: semua kemudahan 300 ms; -o-transisi: semua kemudahan 300ms; -ms-transisi: semua kemudahan 300ms; transisi: semua kemudahan 300 ms;
Keterangan Umum Gaya
Keterangan akan memiliki beberapa gaya umum dan juga properti transisi. Alih-alih menggunakan properti opacity, kami menggunakan mode warna RGBA dengan 0,8 untuk saluran alpha untuk membuat keterangan tampak agak transparan tanpa mempengaruhi teks di dalamnya.
#mainwrapper .box .caption background-color: rgba (0,0,0,0,8); posisi: absolut; warna: #fff; z-index: 100; -webkit-transisi: semua kemudahan 300 ms; -moz-transisi: semua kemudahan 300 ms; -o-transisi: semua kemudahan 300ms; -ms-transisi: semua kemudahan 300ms; transisi: semua kemudahan 300 ms; kiri: 0;
Keterangan 1
Teks pertama akan memiliki efek transisi sederhana yang biasanya digunakan untuk teks. Keterangan akan muncul dari bawah ketika kita mengarahkan kursor ke gambar. Untuk mengatasinya, caption akan memiliki ketinggian tetap 30px dan kami menerapkan posisi dasarnya -30px untuk menyembunyikannya di bawah gambar.
#mainwrapper .box .simple-caption height: 30px; lebar: 200px; display: blok; bawah: -30px; garis-tinggi: 25pt; perataan teks: tengah;
Keterangan 2
Tipe kedua memiliki lebar penuh dan tinggi dimensi gambar / kotak (200x200px) dan transisi akan seperti efek pintu geser hanya yang akan meluncur dari atas ke bawah..
#mainwrapper .box .full-caption width: 170px; tinggi: 170px; atas: -200px; perataan teks: kiri; padding: 15px;
Keterangan 3
Keterangan ketiga akan memiliki efek memudar. Jadi, kami menambahkan opacity: 0 untuk kondisi awalnya.
#mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption opacity: 0; lebar: 170px; tinggi: 170px; perataan teks: kiri; padding: 15px;
Keterangan 4
Teks keempat akan bergeser dari kiri ke kanan, jadi kami memperbaiki 200px ke kiri (kiri: 200px) sebagai posisi awalnya.
** Keterangan 4: Geser ** / #mainwrapper .box .slide-caption width: 170px; tinggi: 170px; perataan teks: kiri; padding: 15px; kiri: 200px;
Keterangan 5
Keterangan kelima akan memiliki efek rotasi. Bukan hanya keterangan yang akan diputar, tetapi juga gambar. Ini lebih seperti perubahan posisi dengan memutar.
Jadi, kami menambahkan properti transform dengan rotasi -180 derajat, kecuali jika Anda lebih suka memutar monitor untuk membaca keterangan.
#mainwrapper # box-5.box .rotate-caption width: 170px; tinggi: 170px; perataan teks: kiri; padding: 15px; atas: 200px; -moz-transform: rotate (-180deg); -o-transform: rotate (-180deg); -webkit-transform: rotate (-180deg); transform: rotate (-180deg); #mainwrapper .box .rotate width: 200px; tinggi: 400px; -webkit-transisi: semua kemudahan 300 ms; -moz-transisi: semua kemudahan 300 ms; -o-transisi: semua kemudahan 300ms; -ms-transisi: semua kemudahan 300ms; transisi: semua kemudahan 300 ms;
Keterangan 6
Keterangan terakhir akan memiliki transformasi skala. Namun, dalam teks sebelumnya, teks di dalamnya akan benar-benar ditampilkan bersama dengan transisi transisi. Di bagian ini kita akan membuatnya sedikit berbeda.
Teks akan muncul setelah pergeseran transisi selesai. Jadi, kami menambahkan penundaan transisi pada teks, dalam hal ini tag h3 dan p.
#mainwrapper .box .scale-caption h3, #mainwrapper .box .scale-caption p position: relative; kiri: -200px; lebar: 170px; -webkit-transisi: semua kemudahan 300 ms; -moz-transisi: semua kemudahan 300 ms; -o-transisi: semua kemudahan 300ms; -ms-transisi: semua kemudahan 300ms; transisi: semua kemudahan 300 ms; #mainwrapper .box .scale-caption h3 -webkit-transition-delay: 300ms; -moz-transisi-delay: 300 ms; -o-transisi-delay: 300 ms; -ms-transition-delay: 300ms; transisi-delay: 300 ms; #mainwrapper .box .scale-caption p -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; -o-transisi-delay: 500 ms; -ms-transition-delay: 500ms; transisi-delay: 500 ms;
Mari Buat Mereka Bergerak
Di bagian berikut, kami akan menentukan perilaku keterangan ketika kami mengarahkan kursor ke gambar atau kotak.
Keterangan Perilaku 1: Muncul.
Untuk keterangan pertama, kami ingin itu muncul (dari bawah) ketika kami mengarahkan kursor ke atas kotak. Untuk mengatasi langkah ini, kami menggunakan properti transformasi dan kode CSS di bawah ini memberi judul untuk memindahkan 100% bobotnya ke atas.
#mainwrapper .box: hover .simple-caption -moz-transform: translateY (-100%); -o-transform: translateY (-100%); -webkit-transform: translateY (-100%); transform: translateY (-100%);
Jika Anda tidak mendapatkan nilai negatif untuk terjemahan, Anda mungkin ingin membaca tutorial ini terlebih dahulu untuk mendapatkan lebih banyak wawasan.
Keterangan Perilaku 2: Pindahkan ke bawah.
Sebaliknya, teks kedua akan bergerak turun dari atas. Jadi, kami akan memiliki nilai positif untuk terjemahan.
#mainwrapper .box: hover .full-caption -moz-transform: translateY (100%); -o-transform: translateY (100%); -webkit-transform: translateY (100%); transform: translateY (100%);
Keterangan Perilaku 3: Fade in.
Keterangan ketiga sebenarnya adalah yang paling mudah. Ketika kotak menyala, opacity teks akan berubah menjadi 1 sehingga terlihat, dan karena kami telah menambahkan properti transisi di kelas teks, transisi harus berjalan dengan lancar.
#mainwrapper .box: hover .fade-caption opacity: 1;
Keterangan Perilaku 4: Geser ke kiri.
Seperti yang kami sebutkan sebelumnya, teks ini akan bergeser dari kiri, namun, gambar juga akan bergeser ke kanan. Jadi, di sini kita memiliki 2 deklarasi CSS.
Kode CSS di bawah ini menunjukkan bahwa ketika kita mengarahkan kursor ke kotak teks akan meluncur 100% dari lebarnya ke kiri. Perhatikan bahwa kami sekarang menggunakan translateX, karena kami ingin slide bergerak secara horizontal dari kanan ke kiri.
#mainwrapper .box: hover .slide-caption background-color: rgba (0,0,0,1)! important; -moz-transform: translateX (-100%); -o-transform: translateX (-100%); -webkit-transform: translateX (-100%); opacity: 1; transform: translateX (-100%);
Saat kita mengarahkan kursor ke atas kotak gambar akan meluncur ke kiri.
#mainwrapper .box: hover img # image-4 -moz-transform: translateX (-100%); -o-transform: translateX (-100%); -webkit-transform: translateX (-100%); transform: translateX (-100%);
Keterangan Perilaku 5: Putar itu.
Keterangan ini berbeda dari yang lain, karena tidak akan bergerak dari kanan atau kiri, tetapi akan berputar. Saat kotak menyala, div yang berisi gambar dan takarir akan berputar -180 berlawanan arah jarum jam menyembunyikan gambar dan menampilkan takarir.
/ ** Rotate Caption: hover Behavior ** / #mainwrapper .box: hover .rotate background-color: rgba (0,0,0,1)! Important; -moz-transform: rotate (-180deg); -o-transform: rotate (-180deg); -webkit-transform: rotate (-180deg); transform: rotate (-180deg);
Keterangan Perilaku 6: Tingkatkan itu.
Keterangan ini akan menggabungkan beberapa efek transformasi. Saat kotak menyala, gambar akan naik 140% (1,4) dari dimensi awal.
#mainwrapper .box: hover # image-6 -moz-transform: scale (1.4); -o-transform: skala (1,4); -webkit-transform: scale (1.4); transform: scale (1.4);
Dan jika Anda melihat CSS di atas di bawah Keterangan 6 menuju, kami telah menyembunyikan teks ke kiri sebanyak 200px. Kode CSS di bawah ini memberi tahu teks untuk pindah ke posisi awal mereka. Jadi, teks akan meluncur dari kiri ke kanan secara bersamaan.
#mainwrapper .box: hover .scale-caption h3, #mainwrapper .box: hover .scale-caption p -moz-transform: translateX (200px); -o-transform: translateX (200px); -webkit-transform: translateX (200px); transform: translateX (200px);
- Demo
- Sumber unduhan
Ringkasan
Meskipun fitur-fitur CSS ini keren, tetapi belum dapat diterapkan secara luas, karena keterbatasan dukungan browser yang telah kami sebutkan sebelumnya. Namun, terus bereksperimen dengan fitur-fitur baru ini, karena ini adalah cara kami akan membentuk halaman web di masa depan.
Kredit
Thumbnail gambar dalam tutorial diambil dari situs web berikut (tangkapan layar):
- Selain Buku
- Archiduchesse
- Vlog
- Hongkiat
- Peternakan Salam
- Mark Ecko
