6 Kapsyen Imej Percuma dengan CSS3

CSS3 sangat kuat. Sudah tentu kita memerlukan imej atau sekumpulan kod JavaScript untuk membuat kesan peralihan mudah. Pada masa kini kita boleh melakukan perkara yang sama dengan hanya CSS3.

Dalam tutorial ini, kami akan menunjukkan kepada anda cara membuat kapsyen imej dengan pelbagai peralihan dengan menggunakan CSS3 sahaja.

Demo
Muat turun sumber

Sokongan Penyemak Imbas

Tajuk ini akan sangat bergantung pada sifat transformasi dan peralihan yang merupakan ciri yang agak baru, oleh itu, adalah bijak untuk mengambil perhatian terhadap sokongan penyemak imbas yang diperlukan untuk menjalankan kapsyen dengan lancar.

Berikut adalah penyemak imbas yang telah menyokong transform dan peralihan:

Internet Explorer 10+ (belum dikeluarkan lagi)
Firefox 6+
Chrome 13+
Safari 3.2+
Opera 11+

Sekarang, mari kita mulakan tutorial ini.

Struktur HTML

Kami mempunyai 6 imej; setiap imej dengan gaya kapsyen yang berbeza.

     Kapsyen Mudah
  
     Keterangan penuh
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed still nonmymy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  
     Pudar Caption
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed still nonmymy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  
     Tangkapan slaid
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed still nonmymy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  
      Ini adalah kapsyen berputar
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed still nonmymy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  
 
     Keterangan Gaya Percuma
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed still nonmymy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

CSS Asas

Sebelum menyusun sebarang unsur, ia sentiasa menjadi permulaan yang baik untuk menetapkan semula semua sifat menggunakan tetapan CSS ini dan memberi mereka nilai gaya lalai, jadi semua penyemak imbas akan menghasilkan hasil yang sama (kecuali mungkin, IE6).

Gaya akan dipisahkan dalam fail style.css, jadi fail HTML kami akan kelihatan kemas. Walau bagaimanapun, jangan lupa untuk menambah gaya pautan di dalam tag kepala untuk menggunakan peraturan gaya dalam fail.

OK, mari kita mulai menyusun elemen, bermula dari tag html dan id pembungkus utama:

 html background-color: #eaeaea;  #mainwrapper font: 10pt normal Arial, sans-serif; ketinggian: auto; margin: 80px auto 0 auto; teks-align: center; lebar: 660px;

Gaya Kotak Imej

Kami menggunakan beberapa gaya biasa di dalam kotak yang mengandungi imej. Kotak akan dipaparkan bersebelahan dengan menggunakan terapung kiri. Perhatikan bahawa kami juga menambah limpahan: harta tersembunyi; ini akan menjadikan semua objek di dalamnya melalui div untuk disembunyikan.

Kami juga mengisytiharkan harta peralihan pada setiap imej di dalam kotak, sekiranya kita memerlukan peralihan imej di kemudian hari.

 #mainwrapper .box border: 5px solid #fff; kursor: penunjuk; ketinggian: 182px; terapung: kiri; margin: 5px; kedudukan: relatif; limpahan: tersembunyi; lebar: 200px; -webkit-box-shadow: 1px 1px 1px 1px #ccc; -moz-box-shadow: 1px 1px 1px 1px #ccc; box-shadow: 1px 1px 1px 1px #ccc;  #mainwrapper .box img position: absolute; kiri: 0; -webkit-transisi: kesemua 300ms kemudahan; -moz-peralihan: semua 300ms kemudahan keluar; -o-transisi: kesemua 300ms kemudahan; -ms-peralihan: kesemua 300ms kemudahan; peralihan: semua kemudahan 300ms;

Gaya Biasa Keterangan

Tajuk ini akan mempunyai beberapa gaya biasa dan juga harta peralihan. Daripada menggunakan sifat opacity, kami menggunakan mod warna RGBA dengan 0.8 untuk saluran alpha untuk membuat tajuk kelihatan sedikit telus tanpa menjejaskan teks di dalam.

 #mainwrapper .box .caption background-color: rgba (0,0,0,0,8); kedudukan: mutlak; warna: #fff; z-index: 100; -webkit-transisi: kesemua 300ms kemudahan; -moz-peralihan: semua 300ms kemudahan keluar; -o-transisi: kesemua 300ms kemudahan; -ms-peralihan: kesemua 300ms kemudahan; peralihan: semua kemudahan 300ms; kiri: 0;

Keterangan 1

Tajuk pertama akan mempunyai kesan peralihan mudah yang biasa digunakan untuk kapsyen. Tajuk itu akan muncul dari bawah apabila kita melayang di atas imej. Untuk mengatasinya, kapsyen akan mempunyai ketinggian tetap 30px dan kami menggunakan kedudukan bawahnya -30px untuk menyembunyikannya di bawah imej.

 #mainwrapper .box .simple-caption ketinggian: 30px; lebar: 200px; paparan: blok; bawah: -30px; garis ketinggian: 25pt; teks-align: center;

Kapsyen 2

Jenis kedua mempunyai lebar dan ketinggian penuh dimensi gambar / kotak (200x200px) dan peralihan akan menjadi seperti kesan pintu gelongsor sahaja bahawa ia akan slaid dari atas ke bawah.

 #mainwrapper .box. full-caption width: 170px; ketinggian: 170px; atas: -200px; teks-align: left; padding: 15px;

Keterangan 3

Keterangan ketiga akan mempunyai kesan pudar. Jadi, kami menambah kelegapan: 0 untuk keadaan permulaannya.

 #mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption opacity: 0; lebar: 170px; ketinggian: 170px; teks-align: left; padding: 15px;

Kapsyen 4

Kapsyen keempat akan slaid dari kiri ke kanan, jadi kami menetapkan 200px ke kiri (kiri: 200px) sebagai kedudukan awalnya.

 ** Keterangan 4: Slide ** / #mainwrapper .box .slide-caption width: 170px; ketinggian: 170px; teks-align: left; padding: 15px; kiri: 200px;

Keterangan 5

Kapsyen kelima akan mempunyai kesan berputar. Ia bukan hanya kapsyen yang akan berputar, tetapi juga imej. Ia lebih seperti perubahan kedudukan dengan berputar.

Jadi, kami menambah mengubah harta dengan putaran -180 darjah, melainkan anda lebih suka memutar monitor anda untuk membaca kapsyen.

 #mainwrapper # box-5.box .rotate-caption width: 170px; ketinggian: 170px; teks-align: left; padding: 15px; atas: 200px; -moz-transform: berputar (-180deg); -o-transform: berputar (-180deg); -webkit-transform: berputar (-180deg); mengubah: putar (-180deg);  #mainwrapper .box .rotate width: 200px; ketinggian: 400px; -webkit-transisi: kesemua 300ms kemudahan; -moz-peralihan: semua 300ms kemudahan keluar; -o-transisi: kesemua 300ms kemudahan; -ms-peralihan: kesemua 300ms kemudahan; peralihan: semua kemudahan 300ms;

Keterangan 6

Tajuk terakhir akan mempunyai perubahan skala. Walau bagaimanapun, dalam kapsyen sebelumnya, teks di dalamnya akan benar-benar dipaparkan bersama dengan peralihan peralihan. Dalam bahagian ini, kami akan membuatnya sedikit berbeza.

Teks akan muncul selepas peralihan peralihan selesai. Jadi, kami menambah kelewatan peralihan pada teks, dalam kes ini h3 dan p tag.

 #mainwrapper .box .scale-caption h3, #mainwrapper .box .scale-caption p position: relative; kiri: -200px; lebar: 170px; -webkit-transisi: kesemua 300ms kemudahan; -moz-peralihan: semua 300ms kemudahan keluar; -o-transisi: kesemua 300ms kemudahan; -ms-peralihan: kesemua 300ms kemudahan; peralihan: semua kemudahan 300ms;  #mainwrapper .box .scale-caption h3 -webkit-transition-delay: 300ms; -moz-transition-delay: 300ms; -o-transition-delay: 300ms; -ms-peralihan-kelewatan: 300ms; kelewatan peralihan: 300ms;  #mainwrapper .box .scale-caption p -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; -o-transition-delay: 500ms; -ms-peralihan-kelewatan: 500ms; kelewatan peralihan: 500ms;

Mari buat gerakan mereka

Dalam bahagian yang berikut, kita akan menentukan tingkah laku kapsyen apabila kita melayang di atas imej atau kotak.

Tingkah laku keterangan 1: Tunjukkan.

Untuk kapsyen pertama, kami ingin muncul (dari bahagian bawah) apabila kami melayang di atas kotak. Untuk menangani langkah ini, kami menggunakan transform property dan kod CSS di bawah menceritakan kapsyen untuk memindahkan 100% beratnya ke atas.

 #mainwrapper .box: hover .simple-caption -moz-transform: translateY (-100%); -o-transform: translateY (-100%); -webkit-transform: translateY (-100%); ubah: translateY (-100%);

Jika anda tidak mendapat nilai negatif untuk terjemahan, anda mungkin mahu membaca tutorial ini terlebih dahulu untuk mendapatkan lebih banyak pandangan.

Tingkah laku keterangan 2: Pindah ke bawah.

Sebaliknya, kapsyen kedua akan bergerak dari bahagian atas. Jadi, kami akan mempunyai nilai positif untuk menerjemahkan.

 #mainwrapper .box: hover. full-caption -moz-transform: translateY (100%); -o-transform: translateY (100%); -webkit-transform: translateY (100%); ubah: translateY (100%);

Tingkah laku keterangan 3: lenyap dalam.

Keterangan ketiga sebenarnya adalah yang paling mudah. Apabila kotak berada di hover ketik huruf akan berubah menjadi 1 menjadikannya kelihatan, dan sejak kami telah menambahkan harta peralihan dalam kelas kapsyen, peralihan harus berjalan lancar.

 #mainwrapper .box: hover .fade-caption opacity: 1;

Tingkah laku keterangan 4: Luncurkan ke kiri.

Seperti yang kita nyatakan sebelum ini, kapsyen ini akan meleret bentuk kiri, bagaimanapun, imej itu juga akan meluncur ke kanan. Jadi, di sini kita mempunyai 2 pengisytiharan CSS.

Kod CSS di bawah menunjukkan bahawa apabila kami melayang di atas kotak kapsyen akan meluncurkan 100% dari lebarnya ke kiri. Perhatikan bahawa kita kini menggunakan translateX, kerana kita mahu slaid bergerak secara mendatar 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%); kelegapan: 1; mengubah: translateX (-100%);

Apabila kita melayang di atas kotak imej akan meluncur keluar ke kiri.

 #mainwrapper .box: hover img # image-4 -moz-transform: translateX (-100%); -o-transform: translateX (-100%); -webkit-transform: translateX (-100%); mengubah: translateX (-100%);

Tingkah laku keterangan 5: Putarnya.

Kapsyen ini berbeza dari yang lain, kerana ia tidak akan bergerak dari kanan atau kiri, tetapi akan berputar. Apabila kotak berada di atas hover, div yang mengandungi imej dan kapsyen akan berputar -180 berlawanan arah jarum jam menyembunyikan imej dan menunjukkan kapsyen.

 / ** Rotate Caption: Hover Behavior ** / #mainwrapper .box: hover .rotate background-color: rgba (0,0,0,1)! Important; -moz-transform: berputar (-180deg); -o-transform: berputar (-180deg); -webkit-transform: berputar (-180deg); mengubah: putar (-180deg);

Tingkah laku keterangan 6: Skala itu.

Kapsyen ini akan menggabungkan beberapa kesan transformasi. Apabila kotak di hover imej akan meningkat sebanyak 140% (1.4) dari dimensi awalnya.

 #mainwrapper .box: hover # image-6 -moz-transform: scale (1.4); -o-transform: skala (1.4); -webkit-transform: skala (1.4); mengubah: skala (1.4);

Dan jika anda melihat CSS di atas di bawah Keterangan 6 tajuk, kami telah menyembunyikan teks ke kiri oleh 200px. Kod CSS di bawah ini memberitahu teks untuk berpindah ke kedudukan awal mereka. Jadi, teks akan slaid dari kiri ke kanan secara serentak.

 #mainwrapper .box: hover .scale-caption h3, #mainwrapper .box: hover .scale-caption p -moz-transform: translateX (200px); -o-transform: translateX (200px); -webkit-transform: translateX (200px); mengubah: translateX (200px);

Demo
Muat turun sumber

Ringkasan

Walaupun ciri-ciri CSS ini adalah sejuk, tetapi ia tidak lagi digunakan secara meluas, disebabkan oleh had sokongan penyemak imbas yang telah disebutkan sebelumnya. Walau bagaimanapun, terus bereksperimen dengan ciri-ciri baru ini, kerana inilah cara kami akan membentuk laman web pada masa akan datang.

Kredit

Gambar kecil gambar dalam tutorial diambil dari laman web berikut (screenshot):

A Book Apart
Archiduchesse
Vlog
Hongkiat
Ladang Salam
Mark Ecko