การแปล: เทคโนโลยีแอนิเมชั่น CSS3 ที่คุณต้องรู้
แปลจาก: สิ่งที่คุณต้องการรู้เกี่ยวกับ CSS เชิงพฤติกรรม
โปรดเคารพลิขสิทธิ์และระบุลิงก์ไปยังไซต์นี้เมื่อพิมพ์ซ้ำ!
คำนำการแปล: บทความนี้แปลจาก Smashingmagazine แต่เนื้อหาของข้อความต้นฉบับค่อนข้างตื้นและไม่สมบูรณ์มากนัก หากมีข้อบกพร่องกรุณาแก้ไขและเพิ่ม
เมื่อเว็บพัฒนาขึ้นและเบราว์เซอร์มีความสามารถในการเรนเดอร์โค้ดขั้นสูงมากขึ้น เราก็กำลังดำเนินการเพื่อบรรลุเป้าหมายในการขยายแพลตฟอร์มและเบราว์เซอร์ทั้งหมด เราไม่เพียงใช้เวลาน้อยลงในการตรวจสอบให้แน่ใจว่าโมเดลกล่องของเราดูเป็นปกติใน IE6 เท่านั้น แต่ยังสร้างบรรยากาศที่ส่งเสริมนวัตกรรม หลีกเลี่ยงการแฮ็ก และเน้นสคริปต์ส่วนหน้า
อินเทอร์เน็ตเป็นสภาพแวดล้อมที่ยอดเยี่ยมและเป็นชุมชนแห่งการทำงานร่วมกันที่มีความรู้มากมายที่จะแบ่งปัน เราต้องการ มุมโค้งมน และเราทำให้มันเกิดขึ้น เราต้องการ ภาพพื้นหลังหลายรูป และเราทำให้มันเกิดขึ้น เราต้องการ รูปภาพเส้นขอบ และเราก็ทำให้มันเกิดขึ้น ดังนั้นความต้องการจึงไม่ใช่ปัญหา ไม่เช่นนั้น เราอาจยังคงใช้ตารางเพื่อจัดวางหน้าและใช้โค้ดมากเกินไป เราทุกคนรู้ดีว่าอินเทอร์เน็ตสามารถทำอะไรก็ได้
เกิดมาเพื่ออินเทอร์เน็ต
คุณสมบัติ CSS 3 เช่น border-radius, box-shadow และ text-shadow กำลังเริ่มได้รับแรงผลักดันในเบราว์เซอร์ขั้นสูง เช่น webkit (Safari, Chrome ฯลฯ) และ Gecko (Firefox) พวกเขา (คุณสมบัติ CSS เหล่านี้) สร้างหน้าที่เบาลงและประสบการณ์ที่สมบูรณ์ยิ่งขึ้นสำหรับผู้ใช้แล้ว และพวกเขาก็ลดระดับลงอย่างสวยงาม อย่างไรก็ตาม นี่เป็นเพียงบางส่วนจากหลาย ๆ สิ่งที่ CSS 3 สามารถทำเพื่อเราได้
ในบทความนี้ เราจะไปอีกขั้นและดูเทคนิค CSS3 ขั้นสูงเพิ่มเติม เช่น การแปลง การเปลี่ยนภาพ และภาพเคลื่อนไหว เราจะพูดถึงโค้ด การสนับสนุนเบราว์เซอร์ และตัวอย่างบางส่วนที่แสดงให้เห็นอย่างเหมาะสมว่าคุณสมบัติใหม่เหล่านี้สามารถปรับปรุงทั้งการออกแบบและประสบการณ์ผู้ใช้โดยรวมได้อย่างไร
การแปลง CSS
การแปลง CSS เป็นร่าง W3C แต่มันไม่ได้ให้ความกระจ่างแก่ฉันเมื่อฉันนั่งลงเพื่ออ่านคุณสมบัติทั้งหมดเพื่อเรียนรู้บางสิ่งเป็นครั้งแรก ดังที่คุณสามารถจินตนาการได้ เอกสารนี้เขียนขึ้นในด้านเทคนิค และเน้นไปที่องค์ประกอบกราฟิกและเมทริกซ์ที่ผิดรูปแบบ (เช่น พล็อต) มากกว่า หลังจากที่เรียนแคลคูลัสเป็นปีแรกแล้ว ฉันไม่ได้สนใจเรื่องเมทริกซ์เลย ฉันต้องทำการทดสอบเบราว์เซอร์เก่าๆ ดีๆ มากมาย รวมถึงเดาและตรวจสอบบทนี้ด้วย
หลังจากอ่านบทช่วยสอนทุกบทและการทดสอบเบราว์เซอร์มากมาย ฉันก็ได้ข้อมูลที่เป็นประโยชน์เกี่ยวกับการแปลง CSS ที่ทุกคนจะได้รับประโยชน์
แปลงร่าง
คุณลักษณะการแปลงใช้ฟังก์ชันบางอย่างเดียวกันกับที่สามารถนำไปใช้กับ SVG ได้ สามารถใช้กับองค์ประกอบแบบอินไลน์และองค์ประกอบบล็อกได้ ช่วยให้เราสามารถหมุน ปรับขนาด และย้ายองค์ประกอบต่างๆ ได้โดยใช้โค้ด CSS เพียงบรรทัดเดียว
คำวิจารณ์ที่ใหญ่ที่สุดของการออกแบบแนวหน้าบางดีไซน์ก็คือไม่สามารถเลือกข้อความได้ (จะต้องทำได้โดยการตัดรูปภาพ) เมื่อคุณมีความเชี่ยวชาญในการใช้แอตทริบิวต์การแปลงเพื่อควบคุมข้อความแล้ว สิ่งนี้จะไม่ใช่ปัญหาอีกต่อไป เนื่องจากนี่เป็นวิธี CSS ล้วนๆ ดังนั้นข้อความภายในองค์ประกอบจึงยังคงเป็นทางเลือก นี่เป็นข้อได้เปรียบอย่างมากของ CSS เหนือการใช้รูปภาพ (หรือภาพพื้นหลัง)
คุณสมบัติ morphing ที่สนุกสนานและมีประโยชน์:
หมุน
การหมุนทำให้คุณสามารถหมุนวัตถุโดยการส่งค่าเป็นองศา
มาตราส่วน
สเกลเป็นฟังก์ชันสเกลที่สามารถทำให้องค์ประกอบใดๆ มีขนาดใหญ่ขึ้นได้ ใช้ตัวเลขบวกและลบรวมทั้งทศนิยมเป็นอาร์กิวเมนต์
แปล
แปลองค์ประกอบการเปลี่ยนตำแหน่งตามพิกัด X และ Y
ลาด
ตามชื่อที่แนะนำ การเอียงคือการเอียงวัตถุ และพารามิเตอร์คือระดับ
เมทริกซ์
การแปลงรองรับการแปลงเมทริกซ์ซึ่งก็คือการเปลี่ยนตำแหน่งองค์ประกอบตามพิกัด X และ Y
มาดูคุณสมบัติแต่ละอย่างให้ละเอียดยิ่งขึ้น
หมุน
คุณลักษณะการแปลงมีประโยชน์หลายอย่าง หนึ่งในนั้นคือการแปล (การหมุน) Translate จะหมุนวัตถุตามมุมและสามารถใช้กับองค์ประกอบแบบอินไลน์และองค์ประกอบระดับบล็อกได้
ต่อไปนี้เป็นเนื้อหาที่ยกมา: #นำทาง{ |
โปรดทราบว่าใน IE8 (โหมดที่ไม่ได้มาตรฐาน) คุณจะต้องเขียน "-ms-filter" แทน "filter"
รองรับเบราว์เซอร์
การสนับสนุนเบราว์เซอร์สำหรับการแปลนั้นกว้างอย่างน่าประหลาดใจ ในตัวอย่าง CSS ด้านบน เราเพียงเพิ่มคำนำหน้า -webkit- และ -moz- แล้วหมุนองค์ประกอบ #nav -90 องศา
ค่อนข้างง่ายใช่มั้ย? ปัญหาเดียวคือสำหรับองค์ประกอบการออกแบบที่ค่อนข้างสำคัญ หาก IE ไม่รองรับ นักออกแบบจำนวนมากก็จะลังเลที่จะใช้องค์ประกอบดังกล่าว
โชคดีที่ IE มีตัวกรองสำหรับสิ่งนี้: ตัวกรองการหมุนกราฟิก สามารถมีค่าการหมุนได้ 4 ค่า: 0, 1, 2 และ 3 คุณจะไม่ได้รับการควบคุมแบบละเอียดเหมือนกับ Webkit และ Gecko แต่อย่างน้อยก็ค่อนข้างจะสอดคล้องกัน (แม้จะใช้ IE6 ก็ตาม) แม้ว่าตัวกรองนี้จะรองรับเพียง 4 ค่าซึ่งดูเหมือนไร้ประโยชน์เล็กน้อย แต่สำหรับ IE ก็ดีกว่าไม่มีอะไรเลย
มาตราส่วน
มาตราส่วนไม่ทำงานอย่างที่คุณคิด เพียงย่อและขยายองค์ประกอบเท่านั้น ฟังก์ชันซูมใช้ทั้งค่าความกว้างและความสูง ซึ่งอาจเป็นบวก ลบ หรือทศนิยม
ค่าบวกจะขยายองค์ประกอบตามที่คุณคาดหวังโดยพิจารณาจากความกว้างและความสูงที่ระบุ
ค่าลบจะไม่ย่อขนาดองค์ประกอบ แต่กลับด้าน (เช่น ข้อความกลับด้าน) และปรับขนาดตามนั้น อย่างไรก็ตาม คุณสามารถย่อหรือย่อองค์ประกอบโดยใช้เลขฐานสิบที่น้อยกว่า 1 (เช่น .5)
ต่อไปนี้เป็นเนื้อหาที่ยกมา: #นำทาง { |
รองรับเบราว์เซอร์
ขณะนี้แอตทริบิวต์มาตราส่วนได้รับการสนับสนุนโดย Firefox, Safari และ Chrome เท่านั้น และจนถึงขณะนี้ยังไม่มีเวอร์ชัน IE ที่รองรับ การปรับขนาดวัตถุเป็นทางเลือกการออกแบบที่ค่อนข้างมีความหมาย สามารถใช้ผ่านการเพิ่มประสิทธิภาพแบบโปรเกรสซีฟ:โฮเวอร์ ซึ่งสามารถเพิ่มความสนใจให้กับการนำทางของคุณได้เล็กน้อย
ต่อไปนี้เป็นเนื้อหาที่ยกมา: #nav li a:โฮเวอร์{ |