วิธีใช้ Box Shadows เป็นพื้นหลังแบบปัดบน Hover

เผยแพร่แล้ว: 2019-01-30

ทุกสัปดาห์ เรามอบชุดเค้าโครง Divi ใหม่และฟรีให้คุณ ซึ่งคุณสามารถใช้สำหรับโครงการต่อไปของคุณได้ สำหรับชุดเลย์เอาต์ชุดใดชุดหนึ่ง เรายังแชร์กรณีการใช้งานที่จะช่วยให้คุณยกระดับเว็บไซต์ของคุณไปอีกระดับ

ในสัปดาห์นี้ โดยเป็นส่วนหนึ่งของการริเริ่มการออกแบบ Divi ที่กำลังดำเนินอยู่ เราจะแสดงให้คุณเห็นถึงวิธีใช้เงากล่องเป็นพื้นหลังแบบเลื่อนเมื่อวางเมาส์เหนือ เราจะจัดการกับตัวอย่างที่แตกต่างกันสามตัวอย่างที่ดูน่าทึ่งในหน้าแรกของ Personal Stylist Layout Pack แต่ความเป็นไปได้ที่คุณมีนั้นไม่มีที่สิ้นสุดอย่างแท้จริง เราจะสร้างพื้นหลังการปัดขึ้นใหม่ทีละขั้นตอนโดยใช้ตัวเลือกในตัวของ Divi เท่านั้น

ไปกันเถอะ!

ดูตัวอย่าง

ก่อนที่เราจะดำดิ่งลงไปในบทช่วยสอนและตัวอย่างต่างๆ ของมัน มาดูผลลัพธ์กันเสียก่อน

ตัวอย่าง #1

ปัดพื้นหลัง

ตัวอย่าง #2

ปัดพื้นหลัง

ตัวอย่าง #3

ปัดพื้นหลัง

อัปโหลดหน้าแรกของ Stylist Layout Pack ไปยังหน้าใหม่

เริ่มต้นด้วยการเพิ่มหน้าใหม่ในเว็บไซต์ของคุณและอัปโหลดเค้าโครงหน้าแรกของ Personal Stylist แม้ว่าเราจะใช้เลย์เอาต์นี้เพื่อบรรลุทั้งสามตัวอย่างที่แสดงด้านบน แต่คุณสามารถใช้วิธีนี้สำหรับเลย์เอาต์หรือเว็บไซต์ประเภทใดก็ได้ที่คุณกำลังทำงานอยู่

ปัดพื้นหลัง

สร้างตัวอย่างใหม่ #1

ปัดพื้นหลัง

สีเงาของกล่องปุ่ม

มาเริ่มสร้างตัวอย่างแรกกันเลย! ตัวอย่างนี้ช่วยให้คุณเน้นส่วนฮีโร่ สิ่งแรกที่คุณต้องทำคือเปิดโมดูลปุ่ม ซึ่งคุณจะพบได้ในคอลัมน์แรกและเปลี่ยนสีเงาของกล่อง เรากำลังดำเนินการนี้เพื่อให้แน่ใจว่าสีจะเข้ากันได้ดีกับเงากล่องสีชมพูที่เราจะเพิ่มเมื่อวางเมาส์ไว้

ปัดพื้นหลัง

การตั้งค่ามาตรา

สีพื้นหลังเริ่มต้น

ดำเนินการต่อโดยเปิดการตั้งค่าส่วน ตรวจสอบให้แน่ใจว่าสีพื้นหลังเริ่มต้นยังคงเหมือนเดิม

สีพื้นหลัง: #2a2a2a

ปัดพื้นหลัง

โฮเวอร์สีพื้นหลัง

เปลี่ยนโฮเวอร์พื้นหลัง

สีพื้นหลัง: #ffffff

ปัดพื้นหลัง

ค่าเริ่มต้นกล่องเงา

ดำเนินการต่อโดยเพิ่ม Box Shadow เริ่มต้นในส่วน

กล่องเงาตำแหน่งแนวนอน: 0px
ตำแหน่งแนวตั้งเงาของกล่อง: 0px
เงาสี: rgba(255,137,159,0.82)
ตำแหน่งเงาของกล่อง: เงาภายใน

ปัดพื้นหลัง

เงากล่องเลื่อน

เปลี่ยนตำแหน่งแนวนอนของเงากล่อง เพิ่มมูลค่าของทางเลือกใด ๆ

ตำแหน่งแนวนอนของกล่องเงา: 800px

ปัดพื้นหลัง

หากคุณต้องการให้เอฟเฟกต์การปัดปรากฏขึ้นจากบนลงล่าง คุณสามารถเปลี่ยนตำแหน่งแนวตั้งของเงากล่องแทนได้

ตำแหน่งแนวตั้งเงาของกล่อง: 650px

ปัดพื้นหลัง

การเปลี่ยนผ่าน

สุดท้ายแต่ไม่ท้ายสุด ให้ลดระยะเวลาการเปลี่ยนภาพในแท็บขั้นสูงเพื่อสร้างการเปลี่ยนสีพื้นหลังอย่างรวดเร็วระหว่างสีพื้นหลังและพื้นหลังการปัดเงาของกล่อง

ระยะเวลาการเปลี่ยนภาพ: 200ms
เส้นโค้งความเร็วในการเปลี่ยน: Ease

ปัดพื้นหลัง

สร้างตัวอย่างใหม่ #2

ปัดพื้นหลัง

แก้ไขโมดูลข้อความแรก

เลื่อนการตั้งค่าข้อความ

สู่ตัวอย่างต่อไป! เปิดโมดูลข้อความที่คุณจะพบในคอลัมน์แรกและเปลี่ยนสีข้อความเมื่อวางเมาส์ไว้

สีข้อความ: เบา

ปัดพื้นหลัง

โฮเวอร์ชายแดน

ดำเนินการต่อโดยเปลี่ยนสีเส้นขอบเมื่อวางเมาส์เหนือในแท็บออกแบบ

เส้นขอบสี: rgba(255,137,159,0.82)

ปัดพื้นหลัง