เนื้อหา
- 01. จับคู่รูปภาพให้เข้ากับโทนสีของไซต์
- 02. แบ่งปันพื้นที่ในแถวสุดท้ายของตารางอย่างเท่าเทียมกัน
- 03. สร้างภาพเคลื่อนไหวของอนุภาคด้วยกล่องเงา
- 04. รูปทรงหลายเหลี่ยมเคลื่อนไหวด้วยการแปลง
- 05. Master 'calc ()' สำหรับการกำหนดตำแหน่ง
- 06. สร้างโมเดลกล่องที่มีเหตุผลด้วย 'box-sizing'
- 07. ศูนย์กลางในแนวตั้งด้วย CSS
- 08. กำหนดเป้าหมายธนาคารของวัตถุที่เกี่ยวข้อง
- 09. ควบคุมยัติภังค์
- 10. ใช้ประโยชน์จากโหมดการเขียน
- 11. ใช้การไล่ระดับสีในรูปแบบที่ผิดปกติ
- 12. ใช้การจับคู่สตริงกับลิงก์
- 13. ทำให้ FOUT ทำงานให้คุณ
- 14. สำรวจ SVG สำหรับพื้นหลัง
- 15. เน้นผู้ใช้ด้วยการเปลี่ยนภาพ 3 มิติ
- 16. สร้างเมนูวงกลมด้วย CSS และคณิตศาสตร์
- 17. ทำให้ลิงก์เคลื่อนไหวเมื่อวางเมาส์เหนือ
- 18. สร้างภาพเคลื่อนไหวแบบคีย์เฟรมง่ายๆ
- 19. สร้างเอฟเฟกต์ 3D แบบลอยตัวพร้อมเงา
- 20. อัปเดตองค์ประกอบของหน้าโดยใช้ ": target"
- 21. ให้ข้อเสนอแนะด้วยภาพเคลื่อนไหวที่ละเอียดอ่อน
- 22. เตรียมพร้อมสำหรับ "จะ - อนิเมชั่น"
- 23. ช่องป้อนข้อมูลที่มีมนุษยธรรม
- 24. หยุดชั่วคราวและเล่นภาพเคลื่อนไหว CSS
- 25. อย่าใช้ตัวแปร CSS
ในบางครั้งเมื่อใช้เทคโนโลยีใด ๆ ก็มีความรู้สึกว่าทำได้เกือบทั้งหมดแล้ว เมื่อบางสิ่งบางอย่างไม่เหมือนใหม่และเป็นประกายอีกต่อไปความสนใจและความสนใจจะถูกดึงดูดไปสู่สิ่งที่ยิ่งใหญ่ถัดไป กรณีนี้มักเกิดขึ้นในอุตสาหกรรมเว็บซึ่งมีแนวโน้มที่จะได้รับความตื่นเต้นอย่างมากจากเทคโนโลยีบางอย่างก่อนไม่ช้าก็เร็วจะผลักไสมันสู่โลกีย์
เมื่อ CSS ปรากฏครั้งแรกมันเป็นการปฏิวัติและเมื่อเวลาผ่านไปก็ได้มีการพัฒนาเพื่อให้นักออกแบบสามารถสร้างเค้าโครงหน้าเว็บที่ยืดหยุ่นสร้างขึ้นอย่างแน่นหนาและสวยงาม อย่างไรก็ตามในช่วงปลายเดือนมีข้อเสนอแนะจากหลายไตรมาสว่า CSS นั้นเหนื่อยและอาจถึงเวลาที่ดวงอาทิตย์ตกไปแล้ว
ฉันต้องการแสดงให้เห็นว่าโลกของ CSS ยังคงมีความตื่นเต้นและมีชีวิตชีวาไม่ว่าจะเป็นคุณสมบัติล้ำสมัยที่คุณอาจยังไม่เคยสำรวจหรือผ่านการใช้ CSS ในลักษณะที่คุณไม่เคยพิจารณามาก่อน
นี่คือเคล็ดลับบางส่วนจากผู้เชี่ยวชาญด้าน CSS ระดับแนวหน้าของอุตสาหกรรม
(หมายเหตุ: เทคนิคบางอย่างในคุณลักษณะนี้มีความล้ำสมัยและอาจไม่ได้รับการสนับสนุนอย่างเต็มที่ในทุกเบราว์เซอร์ทดสอบอย่างละเอียดและตรวจสอบให้แน่ใจว่ามีทางเลือกสำรองก่อนที่จะเผยแพร่งานใด ๆ
01. จับคู่รูปภาพให้เข้ากับโทนสีของไซต์
Christopher Schmitt ผู้จัดการประชุม
การประชุมมีรูปแบบสีของตัวเองและด้วยลำโพงจำนวนมากขั้นตอนการทำงานสำหรับการจัดการภาพบุคคลอาจมีความซับซ้อน การใช้ฟิลเตอร์ด้วยตนเองไม่ได้ปรับขนาดและขึ้นอยู่กับว่าคุณสามารถเข้าถึงแอ็คชั่นเฉพาะของ Photoshop ได้ ตอนนี้ฉันใช้ PNG สีเทาความละเอียดสูงและเพิ่มโทนโดยใช้ฟิลเตอร์ CSS สิ่งนี้ทำให้ฉันสามารถจับคู่ภาพบุคคลใดก็ได้กับรูปแบบของกิจกรรมและยังสามารถใช้รูปภาพซ้ำในหลาย ๆ ธีมได้อีกด้วย ฉันต้องการกฎ CSS ใหม่สำหรับแต่ละกฎ ดูการสาธิต
02. แบ่งปันพื้นที่ในแถวสุดท้ายของตารางอย่างเท่าเทียมกัน
Stephen Hay นักออกแบบและนักเขียน
หากคุณมีรายการที่ไม่ทราบจำนวนที่จะแสดงในตารางคุณสามารถใช้ Flexbox เพื่อแบ่งแถวสุดท้ายเท่า ๆ กัน ดังนั้นหากมีเพียงรายการเดียวก็จะใช้ทั้งแถว หากมีสองรายการแถวจะถูกแบ่งครึ่งและอื่น ๆ ดูการสาธิต
03. สร้างภาพเคลื่อนไหวของอนุภาคด้วยกล่องเงา
Ana Tudor นักเขียนโค้ดและนักคณิตศาสตร์คลั่งไคล้
โดยการผสม กล่องเงา ด้วยคณิตศาสตร์และ Sass คุณสามารถสร้างกราฟเส้นโค้ง 2 มิติจำลองการเคลื่อนไหว 3 มิติและสร้างภาพเคลื่อนไหวของอนุภาคที่บ้าคลั่งที่ทุกคนจะเข้าใจผิดว่าเป็นภาพแคนวาส! ดูการสาธิตและอื่น ๆ
04. รูปทรงหลายเหลี่ยมเคลื่อนไหวด้วยการแปลง
Ana Tudor นักเขียนโค้ดและนักคณิตศาสตร์คลั่งไคล้
คุณอาจเคยเห็นรูปหลายเหลี่ยม CSS ที่สร้างขึ้นโดยมีเส้นขอบ แต่เรามีเครื่องมือที่ทรงพลังกว่านี้มากใน แปลง ทรัพย์สิน. การเชื่อมโยงและการใช้การแปลงกับองค์ประกอบที่ซ้อนกันทำให้เราสามารถสร้างรูปหลายเหลี่ยมที่ซับซ้อนโดยมีพื้นหลังหรือเส้นขอบของภาพและการตกแต่งภายในที่โปร่งใส ด้วยการใช้การแปลง 3 มิติเราสามารถรวมรูปทรง 2 มิติเหล่านี้เป็นรูปทรงหลายเหลี่ยมและทำให้ของแข็งผสานคลี่ระเบิดหรือรวมตัวกันใหม่ในลักษณะที่เข้าใจผิดว่าเป็น WebGL ได้อย่างง่ายดาย ดูการสาธิต
05. Master 'calc ()' สำหรับการกำหนดตำแหน่ง
Ana Tudor นักเขียนโค้ดและนักคณิตศาสตร์คลั่งไคล้
ฉันรัก ขจัดตะกรัน () ตั้งแต่วินาทีที่ฉันค้นพบ มีประโยชน์สำหรับการทำให้เชื่องระยะขอบช่องว่างภายในหรือขนาดและสามารถช่วยชีวิตได้เมื่อใช้สำหรับการวางตำแหน่งหรือปรับขนาดพื้นหลังการไล่ระดับสีหรือการแปลงร่างและไม่เพียง แต่รวมกับหน่วยเก่าเดียวกันเท่านั้น แต่ยังรวมถึงวิวพอร์ตใหม่ที่ยอดเยี่ยมอีกด้วย
06. สร้างโมเดลกล่องที่มีเหตุผลด้วย 'box-sizing'
Sawyer Hollenshead ผู้พัฒนา Oak Studios และนักออกแบบ
ใช้ ขนาดกล่อง เพื่อรักษาสติของคุณ หากไม่มีองค์ประกอบที่มีความกว้าง 250px และ 25px ของช่องว่างภายในจะรวมกันเป็นความกว้าง 300px ทำให้การผสมพิกเซลและเปอร์เซ็นต์ยาก ด้วย ขนาดกล่อง:เส้นขอบกล่อง เส้นขอบและช่องว่างภายในจะถูกวางไว้ในความกว้างที่กำหนดไว้แทน
07. ศูนย์กลางในแนวตั้งด้วย CSS
Trent Walton ผู้ก่อตั้ง Paravel
ในอดีตเป็นเรื่องยากที่จะจัดกึ่งกลางบางสิ่งในแนวตั้งด้วย CSS เช่นหากคุณมีรูปภาพที่มีข้อความที่อยู่ติดกันที่คุณต้องการจัดแนวในแนวตั้ง แทนที่จะเหยียบและสาปแช่งให้ใช้ Flexbox เพื่อจัดการกับปัญหาการจัดตำแหน่ง ดูการสาธิต
08. กำหนดเป้าหมายธนาคารของวัตถุที่เกี่ยวข้อง
Jonathan Smiley หุ้นส่วน Zurb และหัวหน้าฝ่ายออกแบบ
ลดน้ำหนักเส้น CSS โดยใช้ตัวเลือกแอตทริบิวต์โดยประมาณกับชื่อคลาสเพื่อกำหนดเป้าหมายกลุ่มใหญ่ของออบเจ็กต์ที่เกี่ยวข้องแทนที่จะแนบแอตทริบิวต์ทั่วไปกับทุกคลาส ตัวอย่างเช่น ... [class * = "- block-grid-"] {} ... จะกำหนดเป้าหมายการชอบของ: .small-block-grid-3 .large-block-grid-5
09. ควบคุมยัติภังค์
Savid Storey ผู้สนับสนุนเว็บแบบเปิด
ใช้ยัติภังค์ในการพิมพ์และนักพัฒนาบางรายใช้เครื่องหมาย ยัติภังค์ พร็อพเพอร์ตี้ออนไลน์ แต่มีเพียงไม่กี่รายที่ทราบถึงคุณสมบัติอื่น ๆ ที่ให้การควบคุมละเอียด หากคุณไม่ระวังคุณจะเห็นบันไดยัติภังค์ซึ่งใช้ยัติภังค์ในหลายบรรทัด หลักการทั่วไปคือไม่เกินสองแถวติดต่อกันซึ่งคุณสามารถควบคุมได้โดยใช้ ยัติภังค์ขีด จำกัด บรรทัด. นอกจากนี้ ยัติภังค์ขีด จำกัด ตัวอักษร ช่วยให้คุณสามารถระบุความยาวขั้นต่ำของคำที่จะใส่ยัติภังค์พร้อมกับจำนวนอักขระขั้นต่ำก่อนและหลังขีดกั้นยัติภังค์
10. ใช้ประโยชน์จากโหมดการเขียน
David Storey ผู้สนับสนุนเว็บแบบเปิด
โหมดการเขียนช่วยให้คุณกำหนดทิศทางที่ข้อความจะไหลได้ ข้อความในเอเชียตะวันออกบางส่วนเขียนในแนวตั้งโดยมีบรรทัดจากขวาไปซ้ายระบุด้วย โหมดการเขียน: แนวตั้ง -Rl (tb-rl ใน IE) ข้อความแนวตั้งไม่ได้ถูกใช้อย่างแท้จริงในระบบการเขียนของยุโรป แต่อาจเป็นประโยชน์สำหรับหัวตารางเมื่อคุณมีพื้นที่ในแนวนอน จำกัด
11. ใช้การไล่ระดับสีในรูปแบบที่ผิดปกติ
Ruth John นักออกแบบ
การไล่ระดับสีพื้นหลังจะดูดีเมื่อใช้กับเส้นขอบและสัญลักษณ์แสดงหัวข้อย่อย ฉันใช้ทั้งในบล็อกและกับตัวประมวลผลล่วงหน้าสามารถเรียกมิกซ์อินด้วยรหัสที่ใช้ซ้ำเพื่อไม่ให้ทำซ้ำด้วยตนเอง อย่าตื่นเต้นมากเพราะการไล่ระดับสีอาจทำให้โปรเซสเซอร์หนัก SCSS mixin สำหรับรายการสัญลักษณ์แสดงหัวข้อย่อย:
@mixin gradedBullet ($ color) {background-image: linear-gradient (ซ้าย, lighten ($ color, 15%) 10px, $ color 11px, $ color 20px, darken ($ color, 15%) 21px, darken ($ color , 15%) 30px, โปร่งใส 31px); }
12. ใช้การจับคู่สตริงกับลิงก์
Ruth John นักออกแบบ
ในบล็อกของฉันฉันใช้ตัวเลือกแอตทริบิวต์ CSS ที่มีการจับคู่สตริงกับไอคอนโซเชียลสไตล์ สิ่งเหล่านี้ปรากฏในบล็อกของฉันบางครั้งอาจเป็นข้อความและบางครั้งก็ไม่มี แต่จะมีไอคอนเสมอ ในการจัดรูปแบบลิงก์ที่ถูกต้องด้วยไอคอนโซเชียลที่ถูกต้องฉันใช้การจับคู่สตริงกับไฟล์ href แอตทริบิวต์ขององค์ประกอบจุดยึด ฉันใช้ *= ดังนั้น href บนองค์ประกอบจุดยึดต้องมีสตริงที่ฉันระบุเท่านั้น
/ * สำหรับลิงก์โซเชียลทั้งหมด * / .social a: before {display: inline-block; ช่องว่างด้านขวา: 30px; font-family: 'FontAwesome';} / * แต่ละลิงก์เฉพาะ * / .social a [href * = "twitter"]: ก่อน {เนื้อหา: " f099"; color: # 52ae9f;} .social a [href * = "github"]: ก่อน {เนื้อหา: " f09b"; color: # 5f2e44;} .social a [href * = "feed"]: before {content: " f09e"; สี: # b47742;}
13. ทำให้ FOUT ทำงานให้คุณ
Jason Pamental อาจารย์ใหญ่ของการออกแบบ H + W
เว็บสร้างขึ้นจากหลักฐานที่ควรนำเสนอเนื้อหาแม้ว่าเบราว์เซอร์จะไม่สามารถแสดงผลได้ก็ตาม แบบอักษรของเว็บที่โหลดช้าอาจทำให้หงุดหงิด FOUT (Flash Of Unstyled Text) สั่นเป็นการนำทางและการแสดงข้อความใหม่ในขณะที่ดาวน์โหลดแบบอักษร Google และ Typekit ให้คำตอบ: ตัวโหลดแบบอักษรบนเว็บ ด้วยการฉีดคลาสในเพจตามสถานะการโหลดฟอนต์คุณสามารถจัดรูปแบบทางเลือกให้กับคลาสเหล่านั้นเพื่อให้การแสดงซ้ำน้อยที่สุดและยังกำจัดดาวน์ซินโดรม 'เนื้อหาที่มองไม่เห็น' ของ WebKit ดูการสาธิต
14. สำรวจ SVG สำหรับพื้นหลัง
Emil Björklundนักพัฒนาเว็บ inUse
เบราว์เซอร์เดียวที่ไม่มีการรองรับ SVG คือ IE8 และต่ำกว่าและ Android 2 WebKit ดังนั้นการใช้ SVG สำหรับพื้นหลังใน CSS จึงเป็นไปได้โดยเฉพาะอย่างยิ่งเมื่อใช้ร่วมกับโซลูชันทางเลือก PNG เช่น Grunticon SVG สามารถกำหนดสไตล์โดย CSS และมีคุณสมบัติ CSS (ตัวกรอง!) ที่น่าสนใจซึ่งเราสามารถเล่นได้เมื่อใช้กับ HTML
15. เน้นผู้ใช้ด้วยการเปลี่ยนภาพ 3 มิติ
Emil Björklundนักพัฒนาเว็บ inUse
การใช้การแปลง 3D และการใช้ประโยชน์จากไฟล์ z- มิติ ในอินเทอร์เฟซผู้ใช้จะมีประโยชน์มากโดยเฉพาะอย่างยิ่งสำหรับการซ่อน / แสดงหรือยุบ / ขยายเนื้อหา นอกจากนี้ยังค่อนข้างง่ายที่จะเปลี่ยนกลับไปใช้การเปลี่ยนแบบ 2 มิติหรือไม่มีการเปลี่ยนแปลงใด ๆ เลยในสถานการณ์เหล่านั้น เป็นพื้นที่ที่การเพิ่มประสิทธิภาพแบบก้าวหน้าเพียงเล็กน้อยสามารถไปได้ไกล
16. สร้างเมนูวงกลมด้วย CSS และคณิตศาสตร์
Sara Soueidan ผู้พัฒนาส่วนหน้า
เมนูวงกลมเป็นที่นิยมในแอปบนอุปกรณ์เคลื่อนที่และคุณสามารถใช้การแปลงและการเปลี่ยน CSS เพื่อสร้างเมนูวงกลมง่ายๆ เมนูนี้สามารถแก้ไขและปรับแต่งเพื่อสร้างเมนูเปิดขึ้นหรือลงได้เช่นกัน ไม่มีวิธีโดยตรงใน CSS ในการแปลรายการตามแนวทแยงมุม แต่คุณสามารถใช้ค่าของรัศมีของวงกลมที่คุณต้องการวางตำแหน่งรายการและใช้กฎทางคณิตศาสตร์ง่ายๆในการคำนวณค่าการแปลในแนวนอนและแนวตั้งเพื่อส่งผ่านไปยัง แปล X () และ แปล Y () ฟังก์ชั่น. ด้วยวิธีนี้คุณจะได้ไฟล์ เส้นทแยงมุม การแปลเพื่อย้ายรายการเมนูไปยังตำแหน่งที่ถูกต้องบนวงกลม เหตุการณ์การคลิกที่ปิด / เปิดเมนูสามารถจัดการได้โดยใช้ JavaScript หรือคุณสามารถก้าวไปอีกขั้นและมีเมนูเฉพาะ CSS โดยใช้การแฮ็กช่องทำเครื่องหมาย CSS ในการสาธิตของฉันฉันใช้ JavaScript และ HTML5 classList API ซึ่งไม่ได้รับการสนับสนุนในทุกเบราว์เซอร์ดังนั้นคุณจะต้องดูการสาธิตในเบราว์เซอร์ที่ทันสมัยเพื่อให้ใช้งานได้หรือยกเลิกการใส่ข้อคิดเห็นโค้ด jQuery แทนการใช้ classList API รหัส.
ดูการสาธิตและบทช่วยสอนแบบเต็ม ตัวอย่างการแฮ็กช่องทำเครื่องหมาย CSS
17. ทำให้ลิงก์เคลื่อนไหวเมื่อวางเมาส์เหนือ
Paul Lloyd นักออกแบบปฏิสัมพันธ์ของ The Guardian
ไม่ควรใช้สถานะโฮเวอร์เพื่อให้การดำเนินการทำงานหรือให้ข้อมูลที่สำคัญ แต่คุณยังสามารถปรับปรุงอินเทอร์เฟซสำหรับผู้ใช้ที่ใช้เมาส์ได้ ใน 24ways.org เราเปิดเผยชื่อบทความเมื่อคุณวางเมาส์เหนือลิงก์ในการนำทางก่อนหน้า / ถัดไป สิ่งนี้ทำได้โดยการสร้างไฟล์ ::หลังจาก องค์ประกอบหลอกที่มีเนื้อหาที่สร้างขึ้นซึ่งมาจากค่าของไฟล์ ข้อมูล- แอตทริบิวต์โดยใช้การเปลี่ยน CSS เพื่อให้เลื่อนเข้าสู่มุมมองเมื่อวางเมาส์เหนือ ดูการสาธิต
18. สร้างภาพเคลื่อนไหวแบบคีย์เฟรมง่ายๆ
Paul Lloyd นักออกแบบปฏิสัมพันธ์ของ The Guardian
ใน 24ways.org เราได้เพิ่มฝาปิดมุมแบบเคลื่อนไหวลงในบทสรุปซึ่งเปิดขึ้นเมื่อวางเมาส์เหนือ สิ่งนี้ทำได้โดยการรวมไฟล์ @keyframes กฎด้วยคุณสมบัติภาพเคลื่อนไหวเปลี่ยนตำแหน่งของภาพพื้นหลังเพื่อให้ได้ภาพเคลื่อนไหวแบบสไปรต์ เคล็ดลับคือการประกาศจำนวนเฟรมที่คุณมีในสไปรท์แอนิเมชั่นของคุณด้วยไฟล์ ขั้นตอน () มูลค่า. ดูการสาธิต
19. สร้างเอฟเฟกต์ 3D แบบลอยตัวพร้อมเงา
Catherine Farman ผู้พัฒนา Happy Cog
โปรเจ็กต์ล่าสุดต้องการภาพถ่ายผลิตภัณฑ์แบบลอยตัวพร้อมเงากลมด้านล่างสร้างเอฟเฟกต์ 3 มิติจากการโผล่ออกมาจากหน้าจอ เงาใช้คุณสมบัติ CSS3 หลายประการ: เส้นขอบรัศมี ความโปร่งใสอัลฟาและ กล่องเงา. ใช้งานได้ดีกับกริดผลิตภัณฑ์แสดงภาพในฮีโร่หน้าแรกหรือการออกแบบแปลก ๆ ที่มีลักษณะโค้งงอ ดูการสาธิต
20. อัปเดตองค์ประกอบของหน้าโดยใช้ ": target"
Simon Madine ผู้พัฒนาเว็บอาวุโสของ HeRe
CSS ไม่ใช่ภาษาโปรแกรมตามปกติ แต่คุณยังสามารถทำสิ่งที่ชาญฉลาดได้โดยไม่ต้องถอยกลับไปใช้ JavaScript ตัวอย่างเช่นไฟล์ : เป้าหมาย pseudo-class ถูกนำไปใช้กับองค์ประกอบที่เป็นเป้าหมายของลิงก์ที่คลิก
คุณสามารถใช้สิ่งนี้เพื่อกำหนดสถานะของเพจกำหนดเป้าหมายพาเรนต์ที่มีองค์ประกอบจำนวนมากและลิงก์ของคุณจะกลายเป็นเครื่องมือในการควบคุมรูปลักษณ์และเลย์เอาต์ของเด็กทั้งหมดด้วยการคลิกเพียงครั้งเดียว ดูการสาธิต
21. ให้ข้อเสนอแนะด้วยภาพเคลื่อนไหวที่ละเอียดอ่อน
Neil Renicker นักออกแบบและพัฒนา
CSS หลอกองค์ประกอบ ::ก่อน และ ::หลังจาก พร้อมกับการเปลี่ยน CSS สามารถเปิดใช้งานแอนิเมชั่นที่น่าประทับใจซึ่งให้ข้อเสนอแนะที่ละเอียดอ่อนแก่ผู้ใช้เมาส์ ตัวอย่างเช่นสร้างลูกศร CSS ภายในองค์ประกอบหลอกใช้การเปลี่ยนไปใช้องค์ประกอบหลอก (การเปลี่ยนแปลง: ทั้งหมดเข้า - ออก. 15s;) จากนั้นเพิ่มการเปลี่ยนแปลงเค้าโครงอย่างง่ายลงในไฟล์ : เลื่อน pseudo-class (เช่นแก้ไข ขอบด้านบน). ดูการสาธิต
22. เตรียมพร้อมสำหรับ "จะ - อนิเมชั่น"
Paul Lewis สมาชิกทีมนักพัฒนาซอฟต์แวร์สัมพันธ์ coder และ Chrome
หากคุณเคยใช้ -webkit-transform: translateZ (0) เพื่อทำให้หน้าของคุณเร็วขึ้นอย่างน่าอัศจรรย์การแฮ็กซึ่งในเบราว์เซอร์จำนวนมากเพียงแค่สร้างเลเยอร์องค์ประกอบใหม่ขึ้นมาจะถูกแทนที่ด้วย จะเคลื่อนไหว. ในไม่ช้าคุณจะสามารถบอกเบราว์เซอร์ว่าคุณวางแผนจะเปลี่ยนแปลงอะไรเกี่ยวกับองค์ประกอบ (ตำแหน่งขนาดเนื้อหาหรือตำแหน่งการเลื่อน) และเบราว์เซอร์จะใช้การเพิ่มประสิทธิภาพที่เหมาะสมภายใต้ประทุน ข้อมูลมากกว่านี้.
23. ช่องป้อนข้อมูลที่มีมนุษยธรรม
Yaron Schoen ผู้ก่อตั้ง Made For Humans
การเพิ่มภาพเคลื่อนไหวอย่างรวดเร็วให้กับองค์ประกอบที่ผู้ใช้โต้ตอบจะทำให้อินเทอร์เฟซใช้คอมพิวเตอร์น้อยลง ด้วยช่องป้อนข้อมูลให้ลองใส่ไฟล์ การโทรเปลี่ยน ภายในดังนั้นเมื่อใดก็ตามที่คุณโฟกัสหรือไม่โฟกัสจะมีการเปลี่ยนแปลงที่ราบรื่น
input, textarea {-moz-transition: 0.2s all easy-out; -o-transition: 0.2s ทั้งหมดออกง่าย; -webkit-transition: 0.2s ทั้งหมดออกอย่างง่ายดาย; -ms-transition: 0.2s ทั้งหมดออกอย่างง่ายดาย; การเปลี่ยนแปลง: 0.2 วินาทีทั้งหมดออกอย่างง่ายดาย
24. หยุดชั่วคราวและเล่นภาพเคลื่อนไหว CSS
Val Head นักออกแบบและที่ปรึกษา
คุณสามารถ "หยุดชั่วคราว" และ "เล่น" ภาพเคลื่อนไหว CSS ได้โดยเปลี่ยน ภาพเคลื่อนไหวเล่นสถานะ ทรัพย์สิน. การตั้งค่าเป็น "หยุดชั่วคราว" จะหยุดภาพเคลื่อนไหวของคุณจนกว่าคุณจะเปลี่ยน ภาพเคลื่อนไหวเล่นสถานะ ถึง วิ่งตัวอย่างเช่นเมื่อวางเมาส์เหนือ
.animating_thing {แอนิเมชั่น: Spin 10s linear infinite; นิเมชั่นเล่นสถานะ: หยุดชั่วคราว; }. animating_thing: โฮเวอร์ {animation-play-state: running; }
25. อย่าใช้ตัวแปร CSS
Dave Shea นักออกแบบและนักเขียน
ในที่สุดเราก็ได้รับตัวแปร CSS เช่นเขียนค่าฐานสิบหกของสีหนึ่งครั้งและอ้างอิงผ่านสไตล์ชีต แต่ข้อมูลจำเพาะอย่างเป็นทางการนั้นเป็นแบบละเอียดเพิ่มความซับซ้อนทางวากยสัมพันธ์มีฟังก์ชันการทำงานที่ไม่เพียงพอและเบราว์เซอร์ส่วนใหญ่ไม่ได้รับการสนับสนุนโดยส่วนใหญ่ ในยุคที่ Sass ได้รับความนิยมอย่างกว้างขวางและก้าวไปไกลกว่าตัวแปรที่มีตรรกะการเขียนโปรแกรมที่ทรงพลังเช่นฟังก์ชันที่กำหนดเองและคำสั่ง if / else ข้อมูลจำเพาะอย่างเป็นทางการนั้นสั้นมาก
หวังว่าเคล็ดลับยอดนิยมเหล่านี้จะช่วยต่ออายุมุมมองของ CSS และความเป็นไปได้ในการพัฒนาและออกแบบเว็บ อย่าลืมทดสอบเทคนิคเหล่านี้อย่างละเอียดเพื่อตรวจสอบการรองรับเบราว์เซอร์ก่อนเผยแพร่งานใด ๆ
คำ: Craig Grannell ภาพประกอบ: ไมค์ชิปเปอร์ฟิลด์
บทความนี้เคยปรากฏในนิตยสาร net ฉบับที่ 253
