CSS3 Transitions สร้างเอฟเฟ็กต์ Nice Fade
นักออกแบบเว็บต้องการการควบคุมหน้าเว็บที่สร้างขึ้นมาเป็นเวลานานเมื่อ CSS3 เกิดขึ้น รูปแบบใหม่ที่นำมาใช้ใน CSS3 ทำให้นักพัฒนาเว็บมีความสามารถในการเพิ่มผลกระทบของ Photoshop ในหน้าเว็บของตน คุณสมบัตินี้รวมถึง เงาแบบหล่นลงและเรืองแสง มุมโค้งมนและอื่น ๆ นอกจากนี้ CSS3 ยังได้นำเสนอผลงานที่เหมือนภาพเคลื่อนไหวซึ่งสามารถนำมาใช้เพื่อสร้างการโต้ตอบที่ดีในไซต์
หนึ่งผลภาพที่ดีมากที่คุณสามารถเพิ่มองค์ประกอบในเว็บไซต์ของคุณโดยใช้ CSS3 คือทำให้พวกเขาจางหายไปทั้งภายในและภายนอกโดยใช้การรวมกันของคุณสมบัติสำหรับ ความทึบ และการเปลี่ยนแปลง นี่เป็นวิธีที่ง่ายและได้รับการสนับสนุนเป็นอย่างดีในการทำให้หน้าเว็บของคุณมีการโต้ตอบกันมากยิ่งขึ้นโดยการสร้างพื้นที่จาง ๆ ที่เข้ามาโฟกัสเมื่อผู้เข้าชมไซต์ทำอะไรบางอย่างเช่นวางเมาส์เหนือองค์ประกอบนั้น
ลองมาดูวิธีที่ง่ายก็คือการเพิ่มผลกระทบภาพนี้โต้ตอบกับองค์ประกอบต่างๆบนหน้าเว็บของคุณ ..
เปลี่ยนความทึบบน Hover
เราจะเริ่มด้วยการดูวิธีเปลี่ยนความทึบของภาพเมื่อลูกค้ากำลังโฉบเหนือองค์ประกอบนั้น สำหรับตัวอย่างนี้ (HTML จะแสดงด้านล่าง) ฉันใช้ภาพที่มีแอตทริบิวต์ class ของ greydout
เพื่อให้เป็นสีเทาเราจะเพิ่มกฎสไตล์ต่อไปนี้ในสไตล์ชีต CSS ของเรา:
.greydout {
ความทึบของเว็บแคม: 0.25;
-moz-opacity: 0.25;
ความทึบ: 0.25;
}
ค่าความโปร่งใสที่แปลเป็น 25% ซึ่งหมายความว่าภาพจะแสดงเป็น 1/4 ของความโปร่งใสตามปกติ ความทึบแสงไม่มีความโปร่งใสจะเป็น 100% ในขณะที่ 0% จะโปร่งใสโดยสิ้นเชิง
ถัดไปเพื่อให้ภาพมีความชัดเจน (หรือแม่นยำมากขึ้นเพื่อให้กลายเป็นสีทึบเต็มที่) เมื่อวางเมาส์ไว้เหนือภาพคุณจะต้องเพิ่ม: hover pseudo-class:
.greydout: hover {
ความโปร่งใสของเว็บแคม: 1;
-moz-opacity: 1;
ความทึบ: 1;
}
คุณจะสังเกตเห็นว่าสำหรับตัวอย่างเหล่านี้ฉันใช้กฎเวอร์ชันก่อนหน้าของผู้ขายเพื่อให้มั่นใจว่าความเข้ากันได้ย้อนหลังสำหรับเบราว์เซอร์รุ่นเก่า ๆ แม้ว่านี่คือแนวทางปฏิบัติที่ดี แต่ความเป็นจริงคือกฎความทึบได้รับการสนับสนุนโดยเบราว์เซอร์และปลอดภัยในการวางสายการผลิตที่ผู้ขายเหล่านั้นนำเสนอ อย่างไรก็ตามยังไม่มีเหตุผลที่จะไม่ใส่คำนำหน้าเหล่านี้หากคุณต้องการให้การสนับสนุนเวอร์ชันเบราว์เซอร์ที่เก่ากว่า เพียงแค่ต้องปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดที่ได้รับการยอมรับในการสิ้นสุดการประกาศโดยใช้รูปแบบปกติที่ยกเลิกการตั้งเป้าหมายไว้
หากคุณใช้งานนี้ในไซต์คุณจะเห็นว่าการปรับความทึบนี้เป็นการเปลี่ยนแปลงที่ฉับพลันมาก แรกมันเป็นสีเทาและแล้วก็ไม่ได้โดยไม่มีรัฐชั่วคราวระหว่างทั้งสอง มันเหมือนกับสวิตช์ไฟ - หรือปิด นี่อาจเป็นสิ่งที่คุณต้องการ แต่คุณอาจต้องการทดสอบกับการเปลี่ยนแปลงทีละน้อย ๆ
เมื่อต้องการเพิ่มเอฟเฟ็กต์ที่ดีมากและทำให้ค่อยๆจางลงนี้คุณต้องการเพิ่มคุณสมบัติการเปลี่ยนไปใช้คลาส. greydout:
.greydout {
ความทึบของเว็บแคม: 0.25;
-moz-opacity: 0.25;
ความทึบ: 0.25;
- webkit เปลี่ยน: ทั้งหมด 3s ง่าย;
-moz- เปลี่ยน: 3s ทั้งหมดง่าย;
-ms- เปลี่ยน: ทุก 3s ง่าย;
-o- การเปลี่ยนแปลง: ความสะดวกสบายทั้งหมด 3s;
การเปลี่ยนแปลง: ความสะดวกสบายทั้งหมด 3s;
}
ด้วยรหัสนี้การเปลี่ยนแปลงจะเปลี่ยนไปเรื่อย ๆ ไม่ใช่แค่เปลี่ยนทันที
อีกครั้งเราใช้กฎคำนำหน้าของผู้ขายจำนวนมากที่นี่ การเปลี่ยนผ่านไม่ได้รับการสนับสนุนเป็นความทึบดังนั้นคำนำหน้าเหล่านี้จึงมีความหมาย
สิ่งหนึ่งที่ควรจดจำขณะที่คุณวางแผนที่จะมีปฏิสัมพันธ์เหล่านี้คืออุปกรณ์หน้าจอสัมผัสไม่มีสถานะ "เลื่อน" ดังนั้นผลเหล่านี้มักสูญหายกับทุกคนที่ใช้อุปกรณ์หน้าจอสัมผัสเช่นเดียวกับโทรศัพท์มือถือ การเปลี่ยนแปลงมักเกิดขึ้น แต่เกิดขึ้นอย่างรวดเร็วจนไม่สามารถมองเห็นได้ นั่นเป็นวิธีที่ดีถ้าคุณเพิ่มโบนัสนี้เป็นโบนัสพิเศษ แต่หลีกเลี่ยงการเปลี่ยนแปลงใด ๆ ที่จำเป็นสำหรับเนื้อหาที่ต้องเข้าใจ
Fading Out เป็นไปได้ด้วย
คุณไม่จำเป็นต้องเริ่มต้นด้วยภาพจาง ๆ คุณสามารถใช้ช่วงการเปลี่ยนภาพและความทึบที่จางหายไปจากภาพที่เต็มไปด้วยแสง ใช้ภาพเดียวกันเท่านั้นกับชั้นของ withfadeout:
class = "withfadeout">
เช่นเดียวกับก่อนหน้านี้คุณเปลี่ยนความทึบโดยใช้ตัวเลือก: ตัวเลื่อนแบบเลื่อนลอย:
พร้อมด้วย {
- webkit เปลี่ยน: ทุก 2s ความสะดวกในการออก;
-moz- transition: ทั้ง 2s สะดวกในการออก;
-ms- เปลี่ยน: 2s ทุกความสะดวกในการออก;
-o การเปลี่ยนแปลง: ทั้ง 2s สะดวกในการออก;
การเปลี่ยนแปลง: ทุก 2s สะดวกในการออก;
}
.withfadeout: hover {
ความทึบของเว็บแคม: 0.25;
-moz-opacity: 0.25;
ความทึบ: 0.25;
}
ในตัวอย่างนี้ภาพจะเปลี่ยนจากทึบแสงไปเป็นภาพที่ค่อนข้างโปร่งใสซึ่งเป็นภาพย้อนกลับของตัวอย่างแรกของเรา
ไปไกลเกินกว่าภาพ
เป็นการดีที่คุณสามารถใช้การเปลี่ยนภาพเหล่านี้และจางหายไปกับภาพ แต่คุณไม่ จำกัด เฉพาะการใช้ภาพที่มีเอฟเฟ็กต์ CSS เหล่านี้ คุณสามารถทำปุ่ม CSS ที่จางหายไปเมื่อคลิกและจัดไว้ คุณเพียงแค่กำหนดความทึบโดยใช้: active pseudo class และใส่การเปลี่ยนแปลงในคลาสที่กำหนดปุ่ม คลิกปุ่มนี้ค้างไว้เพื่อดูว่าจะเกิดอะไรขึ้น
เป็นไปได้ที่จะทำให้องค์ประกอบภาพใด ๆ จางหายไปเมื่อวางเมาส์เหนือหรือคลิกบน ในตัวอย่างนี้ผมเปลี่ยนความทึบของ div และสีของข้อความเมื่อเมาส์อยู่เหนือมัน นี่คือ CSS:
#myDiv {
ความกว้าง: 280px;
พื้นหลังสี: # 557A47;
สี: #dfdfdf;
padding: 10px;
- webkit เปลี่ยน: ทั้งหมด 4s ความสะดวกออก 0s;
-moz- transition: ทั้งหมด 4s ง่าย -out 0s;
-ms- เปลี่ยน: ทั้งหมด 4s ง่าย -out 0s;
-o การเปลี่ยนแปลง: ทั้งหมด 4s ง่าย -out 0s;
การเปลี่ยนแปลง: ทั้งหมด 4s ความสะดวกออก 0s;
}
#myDiv: hover {
ความทึบของเว็บแคม: 0.25;
-moz-opacity: 0.25;
ความทึบ: 0.25;
สี: # 000;
}
เมนูนำร่องสามารถใช้สีพื้นหลังซีดจางได้
ในเมนูนำทางแบบธรรมดานี้สีพื้นหลังจางหายไปอย่างช้าๆขณะที่ฉันเลื่อนเมาส์ไปที่รายการในเมนู นี่คือ HTML:
- บ้าน
- บทเรียน CSS3
- คุณสมบัติ CSS3
และนี่คือ CSS:
ul # sampleNav {list-style: none; }
ul # sampleNav li {
display: inline;
ลอย: ซ้าย;
padding: 5px 15px;
margin: 0 5px;
- webkit เปลี่ยน: ทั้งหมด 2s เชิงเส้น;
-moz- transition: ทั้งหมด 2s linear;
-ms- เปลี่ยน: ทั้งหมด 2s เชิงเส้น;
-o การเปลี่ยนแปลง: ทั้งหมด 2s เชิงเส้น;
การเปลี่ยนแปลง: ทั้ง 2s เชิงเส้น;
}
ul # sampleNav li a {text-decoration: none; }
ul # sampleNav li: hover {
สีพื้นหลัง: # DAF197;
}
การสนับสนุนเบราว์เซอร์
ตามที่ฉันได้สัมผัสมาหลายครั้งแล้วรูปแบบเหล่านี้มีการสนับสนุนเบราว์เซอร์ที่ดีมากดังนั้นคุณควรจะรู้สึกอิสระที่จะใช้พวกเขาโดยไม่ต้องกังวลใจใด ๆ ยกเว้นกรณีนี้คือ Internet Explorer ที่เก่ากว่า แต่เมื่อเร็ว ๆ นี้การตัดสินใจล่าสุดของ Microsoft เพื่อยุติการสนับสนุน IE ทุกเวอร์ชันต่ำกว่า 11 เบราว์เซอร์รุ่นเก่าเหล่านี้จะกลายเป็นปัญหาที่น้อยลงและเบาบางลงหากเบราว์เซอร์รุ่นเก่าไม่ทำงาน ดูการเปลี่ยนแปลงที่จางหายไปนี้ไม่ควรเป็นปัญหาใหญ่ ตราบเท่าที่คุณ จำกัด ผลกระทบเหล่านี้ไว้กับการโต้ตอบที่สนุกสนานและไม่ต้องพึ่งพาการขับขี่หรือเปิดเผยเนื้อหาที่สำคัญเบราว์เซอร์รุ่นเก่าที่ไม่สนับสนุนผลกระทบจะได้รับประสบการณ์ที่สนุกสนานน้อยลง แต่ผู้ใช้เบราว์เซอร์เหล่านั้นจะไม่ได้ รู้ความแตกต่างโดยเฉพาะอย่างยิ่งหากพวกเขาสามารถใช้เว็บไซต์ได้ตามปกติและได้รับข้อมูลที่ต้องการ
สนุกเพิ่มสลับรูปภาพสองรูป
นี่คือตัวอย่างของวิธีการจางหายภาพหนึ่งไปยังอีกภาพหนึ่ง ใช้ HTML:
และ CSS ที่ทำให้หนึ่งโปร่งใสอย่างเต็มรูปแบบในขณะที่อื่น ๆ เป็นทึบแสงอย่างสมบูรณ์และจากนั้นการแลกเปลี่ยนการเปลี่ยนแปลงทั้งสอง:
.swapMe img {-webkit-transition: ทั้งหมด 1s ง่ายในการออก; -moz- transition: ทั้งหมด 1s สะดวกในการออก; -ms- เปลี่ยน: ทั้งหมด 1s ความสะดวกในการออก; -o การเปลี่ยนแปลง: ทั้งหมด 1s ความสะดวกในการออก; การเปลี่ยนแปลง: ทั้งหมด 1s สะดวกในการออก; } .swap1, .swapMe: เลื่อนเมาส์ไปมา. swap2 {--webkit-opacity: 1; -moz-opacity: 1; ความทึบ: 1; } .swapMe: เลื่อนเมาส์. swap1, .swap2 {-webkit-opacity: 0; -moz-opacity: 0; ความทึบ: 0; }