Transisi CSS3 di Dreamweaver CS6

• April 24, 2024

Dengan penambahan HTML5 dan CSS3, situs web interaktif menjadi yang diharapkan. Sekarang, dengan Dreamweaver^R CS6 dan panel Transisi CSS baru, Anda dapat membuat efek interaktif Anda sendiri tanpa perlu menulis kode apa pun. Output dari proses ini hanya CSS3, tanpa JavaScript. Karenanya, Anda tidak perlu khawatir jika pemirsa telah mengaktifkan JavaScript. Transisi yang dibuat oleh Dreamweaver dapat diputar di peramban web modern apa pun.

Mari kita lihat betapa mudahnya membuat transisi interaktif kita sendiri. Transisi dapat diterapkan ke elemen kelas, ID atau CSS apa pun. Yang perlu kita lakukan adalah mengatur nilai-nilai di panel Transisi CSS.

1. Langkah pertama kami adalah memilih elemen yang ingin kami terapkan transisi. Dalam contoh kita ini akan menjadi tautan menu.
   
   
2. Klik Jendela - Transisi CSS untuk membuka panel.
   
   
3. Di panel Transisi CSS, klik tanda Plus untuk menambahkan transisi.
   
   
4. Di kotak dialog Transisi Baru, kita dapat menggunakan menu Aturan Target untuk memilih dari preset atau mengetikkan nama kita sendiri untuk transisi. Mari kita ketik nama .morph.
   
   
5. Selanjutnya kita perlu memilih tindakan yang akan memicu transisi. Dari menu Transition On, pilih Arahkan kursor sehingga transisi akan terpicu ketika kita menempatkan mouse kita di atas tautan. Pilihan lain termasuk: aktif, dicentang, dinonaktifkan, diaktifkan, fokus, arahkan, tak tentu dan target.
   
   
6. Untuk Opsi Menu, kami memiliki dua pilihan. Ayo pilih yang pertama.
   
   Gunakan transisi yang sama untuk semua properti
   Gunakan transisi yang berbeda untuk setiap properti
   
   
7. Untuk Durasi dan Penundaan transisi, kita dapat menggunakan Detik atau Milidetik. Mari atur Durasi menjadi 1 detik dan Delay menjadi .05 detik.
   
   
8. Untuk Fungsi Pengaturan Waktu, kami memiliki beberapa pilihan pelonggaran. Mari kita pilih Ease Out.
   
   
9. Untuk menambahkan Properti CSS, klik tanda Plus dan pilih satu dari daftar pop-up. Mari kita pilih Background-Color.
   
   
10. Setelah kami memilih Properti, kami dapat menetapkan Nilai Akhir untuk transisi. Bergantung pada Properti yang telah kita pilih, menu Nilai Akhir akan memberi kita menu yang sesuai untuk Properti itu. Untuk Background-Color kita mendapatkan Color Picker. Jika kita menambahkan properti Font-Weight, kita mendapatkan menu bobot yang telah ditetapkan.
    
    
11. Akhirnya kita harus memilih Tempat Membuat Transisi. Pilihan kami adalah hanya dokumen ini atau File Lembar Gaya Baru. Mari kita gunakan dulu.
    
    

Setelah kita klik tombol Create Transition, kita dapat melihat bahwa transisi telah terdaftar di panel Transisi CSS, menunjukkan bahwa transisi morph akan dipicu oleh tindakan hover dan diterapkan pada target a.morph.

Jika kami memeriksa tampilan kode, kami melihat kelas morph telah ditambahkan ke tautan.

Saat kami melewati tetikus kami di atas tautan dalam Live view, warna latar akan berubah.

Tetapi bagaimana jika kita perlu mengedit transisi? Kita dapat melakukan ini melalui panel Transisi CSS.

1. Pilih transisi a.morph dan ikon Edit akan menjadi aktif (ikon pensil).
   
   
2. Klik ikon Edit untuk membuka kotak dialog Edit Transisi. Di sini kita dapat mengubah nilai sesuai kebutuhan atau menambah Properti dan Nilai Akhir baru.
   
   

Sekarang kami memiliki transisi morf yang dibuat, kami dapat dengan mudah menerapkannya ke elemen lain karena sekarang tersedia dari menu Aturan Target.

* Adobe memberikan salinan perangkat lunak ini kepada saya untuk tujuan ulasan.

Hak Cipta 2018 Adobe Systems Incorporated. Seluruh hak cipta. Tangkapan layar produk Adobe dicetak ulang dengan izin dari Adobe Systems Incorporated. Adobe, Photoshop, Album Photoshop, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Kembang Api, Berkontribusi, Memikat, Flash Catalyst dan Flash Paper adalah [adalah] merek dagang terdaftar [s] atau merek dagang [s] dari Adobe Systems Incorporated di Amerika Serikat dan / atau negara lain.

Petunjuk Video: Membuat Image Slider Dengan HTML5 & CSS3 | MNA36 Web Design (April 2024).