นักออกแบบเว็บต้องการการควบคุมหน้าเว็บที่สร้างขึ้นมาเป็นเวลานานเมื่อ CSS3 เกิดขึ้น รูปแบบใหม่ที่นำมาใช้ใน CSS3 ทำให้นักพัฒนาเว็บมีความสามารถในการเพิ่มผลกระทบของ Photoshop ในหน้าเว็บของตน คุณสมบัตินี้รวมถึงเงาแบบหล่นลงและเรืองแสงมุมโค้งมนและอื่น ๆ นอกจากนี้ CSS3 ยังได้นำเสนอผลงานที่เหมือนภาพเคลื่อนไหวซึ่งสามารถนำมาใช้เพื่อสร้างการโต้ตอบที่ดีในไซต์
หนึ่งผลภาพที่ดีมากที่คุณสามารถเพิ่มองค์ประกอบในเว็บไซต์ของคุณโดยใช้ CSS3 คือทำให้พวกเขาจางหายไปทั้งภายในและภายนอกโดยใช้การรวมกันของคุณสมบัติสำหรับความทึบและการเปลี่ยนแปลง นี่เป็นวิธีที่ง่ายและได้รับการสนับสนุนอย่างมากในการทำให้หน้าเว็บของคุณมีการโต้ตอบกันมากขึ้นโดยการสร้างพื้นที่จาง ๆ ที่มุ่งเน้นเมื่อผู้เข้าชมไซต์ทำอะไรบางอย่างเช่นโฉบองค์ประกอบนั้น
ลองมาดูวิธีการที่ง่ายในการเพิ่มเอฟเฟ็กต์ภาพที่มีปฏิสัมพันธ์กับองค์ประกอบต่างๆบนหน้าเว็บของคุณ
เปลี่ยนความทึบบน Hover
เราจะเริ่มด้วยการดูวิธีเปลี่ยนความทึบของภาพเมื่อลูกค้ากำลังโฉบเหนือองค์ประกอบนั้น สำหรับตัวอย่างนี้ (HTML จะแสดงด้านล่าง) เราใช้รูปภาพที่มีแอตทริบิวต์ class ของ
greydout
เพื่อให้เป็นสีเทาเราจะเพิ่มกฎสไตล์ต่อไปนี้ในสไตล์ชีต CSS ของเรา: .greydout {ความทึบของเว็บแคม: 0.25;-moz-opacity: 0.25;ความทึบ: 0.25;}
ค่าความโปร่งใสที่แปลเป็น 25% ซึ่งหมายความว่าภาพจะแสดงเป็น 1/4 ของความโปร่งใสตามปกติ ความทึบแสงไม่มีความโปร่งใสจะเป็น 100% ในขณะที่ 0% จะโปร่งใสโดยสิ้นเชิง ถัดไปเพื่อทำให้ภาพมีความชัดเจน (หรือถูกต้องมากขึ้นเพื่อให้กลายเป็นสีขาวขุ่น) เมื่อเมาส์เลื่อนไปมาคุณจะเพิ่ม : เลื่อนpseudo-class: .greydout: hover {ความโปร่งใสของเว็บแคม: 1;-moz-opacity: 1;ความทึบ: 1;}
คุณจะสังเกตเห็นว่าสำหรับตัวอย่างเหล่านี้เราใช้กฎเวอร์ชันที่ผู้ผลิตกำหนดไว้เพื่อให้มั่นใจว่ามีการทำงานร่วมกันย้อนกลับสำหรับเบราว์เซอร์รุ่นเก่า ๆ เหล่านี้ แม้ว่านี่คือแนวทางปฏิบัติที่ดี แต่ความเป็นจริงคือกฎความทึบได้รับการสนับสนุนโดยเบราว์เซอร์และปลอดภัยในการวางสายการผลิตที่ผู้ขายเหล่านั้นนำเสนอ อย่างไรก็ตามยังไม่มีเหตุผลที่จะไม่ใส่คำนำหน้าเหล่านี้หากคุณต้องการให้การสนับสนุนเวอร์ชันเบราว์เซอร์ที่เก่ากว่า เพียงแค่ต้องปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดที่ได้รับการยอมรับในการสิ้นสุดการประกาศโดยใช้รูปแบบปกติที่ยกเลิกการตั้งเป้าหมายไว้ หากคุณใช้งานนี้ในไซต์คุณจะเห็นว่าการปรับความทึบนี้เป็นการเปลี่ยนแปลงที่ฉับพลันมาก ประการแรกมันเป็นสีเทาและก็ไม่ได้โดยไม่มีรัฐชั่วคราวระหว่างทั้งสอง มันเหมือนกับสวิตช์ไฟ - หรือปิด นี่อาจเป็นสิ่งที่คุณต้องการ แต่คุณอาจต้องการทดสอบกับการเปลี่ยนแปลงทีละน้อย ๆ เมื่อต้องการเพิ่มเอฟเฟ็กต์ที่ยอดเยี่ยมและทำให้ภาพซีดจางหายไปนี้คุณต้องการเพิ่ม การเปลี่ยนแปลง
ทรัพย์สิน .greydoutclass: .greydout {ความทึบของเว็บแคม: 0.25;-moz-opacity: 0.25;ความทึบ: 0.25;- webkit เปลี่ยน: ทั้งหมด 3s ง่าย;-moz- เปลี่ยน: 3s ทั้งหมดง่าย;-ms- เปลี่ยน: ทุก 3s ง่าย;-o- การเปลี่ยนแปลง: ความสะดวกสบายทั้งหมด 3s;การเปลี่ยนแปลง: ความสะดวกสบายทั้งหมด 3s;}
