Cara Menggunakan Bayangan Kotak sebagai Latar Belakang Gesek saat Melayang
Diterbitkan: 2019-01-30Setiap minggu, kami memberi Anda paket tata letak Divi baru dan gratis yang dapat Anda gunakan untuk proyek Anda berikutnya. Untuk salah satu paket tata letak, kami juga membagikan kasus penggunaan yang akan membantu Anda membawa situs web Anda ke tingkat berikutnya.
Minggu ini, sebagai bagian dari inisiatif desain Divi kami yang sedang berlangsung, kami akan menunjukkan kepada Anda cara menggunakan bayangan kotak sebagai latar belakang gesek saat mengarahkan kursor. Kami akan menangani tiga contoh berbeda yang terlihat memukau di beranda Personal Stylist Layout Pack tetapi kemungkinan yang Anda miliki benar-benar tidak terbatas. Kami akan membuat ulang masing-masing latar belakang gesek langkah demi langkah menggunakan opsi bawaan Divi saja.
Mari kita lakukan!
Pratinjau
Sebelum kita masuk ke tutorial, dan contoh yang berbeda, mari kita lihat hasilnya.
Contoh 1
Contoh #2
Contoh #3
Unggah Beranda Paket Tata Letak Penata Gaya Pribadi ke Halaman Baru
Mulailah dengan menambahkan halaman baru ke situs web Anda dan unggah tata letak beranda Personal Stylist. Meskipun kami akan menggunakan tata letak ini untuk menyelesaikan ketiga contoh yang ditunjukkan di atas, Anda dapat menggunakan pendekatan ini untuk segala jenis tata letak atau situs web yang sedang Anda kerjakan.
Buat Ulang Contoh #1
Warna Bayangan Kotak Tombol
Mari kita mulai membuat ulang contoh pertama! Contoh ini membantu Anda menyorot bagian pahlawan. Hal pertama yang harus Anda lakukan adalah membuka Modul Tombol yang dapat Anda temukan di kolom pertama dan mengubah warna bayangan kotak. Kami melakukan ini untuk memastikan warnanya cocok dengan bayangan kotak merah muda yang akan kami tambahkan di hover.
Pengaturan Bagian
Warna Latar Default
Lanjutkan dengan membuka pengaturan bagian. Pastikan warna latar belakang default tetap sama.
- Warna Latar Belakang: #2a2a2a
Arahkan Warna Latar Belakang
Ubah kursor latar belakang.
- Warna Latar Belakang: #ffffff
Bayangan Kotak Default
Lanjutkan dengan menambahkan Box Shadow default ke bagian tersebut.
- Posisi Horizontal Bayangan Kotak: 0px
- Posisi Vertikal Bayangan Kotak: 0px
- Warna Bayangan: rgba (255.137.159,0.82)
- Posisi Bayangan Kotak: Bayangan Dalam
Arahkan Bayangan Kotak
Ubah posisi horizontal bayangan kotak. Tambahkan nilai pilihan apa pun.
- Posisi Horizontal Bayangan Kotak: 800px
Jika Anda ingin efek gesek muncul dari atas ke bawah, Anda dapat mengubah di sekitar posisi vertikal bayangan kotak.
- Posisi Vertikal Bayangan Kotak: 650px
Transisi
Last but not least, kurangi durasi transisi di tab lanjutan untuk membuat transisi cepat antara warna latar belakang dan latar belakang sapuan bayangan kotak.
- Durasi Transisi: 200ms
- Kurva Kecepatan Transisi: Kemudahan
Buat Ulang Contoh #2
Ubah Modul Teks Pertama
Arahkan Pengaturan Teks
Lanjut ke contoh berikutnya! Buka Modul Teks yang dapat Anda temukan di kolom pertama dan ubah warna teks saat mengarahkan kursor.
- Warna Teks: Cahaya
Arahkan Perbatasan
Lanjutkan dengan mengubah warna batas saat mengarahkan kursor ke tab desain.
- Warna Perbatasan: rgba (255.137.159,0.82)
Bayangan Kotak Default
Kemudian, buka pengaturan bayangan kotak dan tambahkan bayangan kotak default.
- Posisi Horizontal Bayangan Kotak: 0px
- Posisi Vertikal Bayangan Kotak: 0px
- Warna Bayangan: rgba (255.137.159,0.82)
- Posisi Bayangan Kotak: Bayangan Dalam
Arahkan Bayangan Kotak
Ubah posisi horizontal saat melayang.
- Posisi Horizontal Bayangan Kotak: 520px
Transisi
Last but not least, tingkatkan durasi transisi di tab lanjutan untuk membuat transisi yang mulus.
- Durasi Transisi: 700ms
- Kurva Kecepatan Transisi: Kemudahan
Salin & Tempel Gaya Modul ke Modul Teks Ketiga
Kami juga menggunakan gaya modul yang sama untuk Modul Teks ketiga. Untuk menghemat waktu, kita hanya akan menyalin gaya modul dari Modul Teks pertama dan menempelkannya ke Modul Teks ketiga.
Ubah Modul Teks Kedua
Pengaturan Teks
Modul Teks kedua, bagaimanapun, sedikit berbeda. Buka modul dan pergi ke pengaturan teks. Satu-satunya hal yang perlu Anda lakukan di sana adalah mengubah warna teks saat mengarahkan kursor.
- Warna Teks: Cahaya
Arahkan Perbatasan
Lanjutkan dengan masuk ke pengaturan perbatasan dan mengubah warna perbatasan saat mengarahkan kursor.
- Warna Perbatasan: rgba (255.137.159,0.82)
Bayangan Kotak Default
Saatnya menambahkan latar belakang gesek! Mulailah dengan menambahkan bayangan kotak default menggunakan pengaturan berikut:
- Posisi Horizontal Bayangan Kotak: 0px
- Posisi Vertikal Bayangan Kotak: 0px
- Warna Bayangan: rgba (255.137.159,0.82)
- Posisi Bayangan Kotak: Bayangan Dalam
Arahkan Bayangan Kotak
Ubah posisi vertikal bayangan kotak saat melayang.
- Posisi Vertikal Bayangan Kotak: 500px
Transisi
Last but not least, tingkatkan durasi transisi Modul Teks ini juga.
- Durasi Transisi: 700ms
- Kurva Kecepatan Transisi: Kemudahan
Buat Ulang Contoh #3
Ubah Pengaturan Baris
Perekat
Ke contoh berikutnya dan terakhir! Mulailah dengan membuka pengaturan baris dan buat beberapa perubahan pada pengaturan ukuran.
- Jadikan Baris Ini Lebar Penuh: Ya
- Gunakan Lebar Talang Kustom: Ya
- Lebar Talang: 2
Jarak
Lanjutkan dengan menambahkan beberapa padding khusus ke baris juga.
- Padding Kiri: 10vw
- Padding Kanan: 10vw
- Kolom 2 Padding Kiri: 15vw (Desktop), 0vw (Tablet & Ponsel)
Bayangan Kotak Default
Kemudian, tambahkan bayangan kotak default ke baris.
- Posisi Horizontal Bayangan Kotak: 0px
- Posisi Vertikal Bayangan Kotak: 0px
- Warna Bayangan: #ff899f
- Posisi Bayangan Kotak: Bayangan Dalam
Arahkan Bayangan Kotak
Ubah posisi horizontal saat melayang.
- Posisi Horizontal Bayangan Kotak: 50px
Transisi
Kami juga mengubah durasi transisi dan penundaan transisi di tab lanjutan.
- Durasi Transisi: 1000ms
- Penundaan Transisi: 700ms
- Kurva Kecepatan Transisi: Kemudahan
Ubah Pengaturan Bagian
Hapus Ukuran
Setelah Anda selesai mengubah pengaturan baris, lanjutkan dan buka pengaturan bagian. Pindah ke tab desain dan setel ulang lebarnya dengan mengklik kanan dan mengklik reset.
Hapus Perbatasan
Lakukan hal yang sama untuk lebar perbatasan juga.
Bayangan Kotak Default
Lanjutkan dengan menambahkan bayangan kotak default.
- Posisi Horizontal Bayangan Kotak: 0px
- Posisi Vertikal Bayangan Kotak: 0px
- Warna Bayangan: #2a2a2a
- Posisi Bayangan Kotak: Bayangan Dalam
Arahkan Bayangan Kotak
Ubah posisi horizontal bayangan kotak saat melayang.
- Posisi Horizontal Bayangan Kotak: 60px
Transisi
Dan untuk menyelesaikan desain, tingkatkan durasi transisi di tab lanjutan.
- Durasi Transisi: 1000ms
Pratinjau
Sekarang setelah kita melalui semua langkah, mari kita lihat terakhir pada tiga contoh berbeda yang telah kita buat ulang langkah demi langkah.
Contoh 1
Contoh #2
Contoh #3
Pikiran Akhir
Dalam posting ini, kami telah menunjukkan kepada Anda cara menggunakan bayangan kotak sebagai latar belakang geser dengan opsi bawaan Divi saja. Tutorial ini adalah bagian dari inisiatif desain Divi kami yang sedang berlangsung di mana kami mencoba memasukkan sesuatu yang ekstra ke dalam kotak peralatan Anda setiap minggu. Kami harap tutorial ini menginspirasi Anda untuk menggunakan bayangan kotak dengan cara yang unik dan kreatif. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!