บทความทั้งหมด - หน้า 1687

บทความนี้เป็นส่วนหนึ่งของเรา "ชุดบทแนะนำ HTML5 / CSS3" - ทุ่มเทเพื่อช่วยให้คุณเป็นนักออกแบบและ / หรือนักพัฒนาที่ดีขึ้น. คลิกที่นี่ เพื่อดูบทความเพิ่มเติมจากซีรี่ส์เดียวกัน. ตัวเลือกคุณสมบัติ เป็นคุณสมบัติที่มีประโยชน์จริงๆในการเลือกองค์ประกอบโดยไม่ต้องเพิ่มฟุ่มเฟือย รหัส หรือ ชั้นเรียน. ตราบใดที่องค์ประกอบเป้าหมายมีคุณสมบัติเช่นนั้น href, src และ ชนิด เราไม่ต้องทำเช่นนั้น. ตัวเลือกคุณลักษณะนั้นมีอยู่จริง ตั้งแต่ CSS 2.1, และตอนนี้เมื่อมีตัวเลือกแอททริบิวต์เพิ่มอีกสองสามชนิดในสเปค CSS3 เราสามารถกำหนดเป้าหมายคุณลักษณะขององค์ประกอบได้โดยเฉพาะยิ่งขึ้น. และในโพสต์นี้เราจะใช้หนึ่งในไวยากรณ์เพื่อเลือก...

คุณรู้หรือเปล่าว่า การแปลงเชิงเรขาคณิต เพิ่มลงในองค์ประกอบ HTML ด้วย แปลงคุณสมบัติ CSS เช่นสเกล, เอียงและหมุนสามารถเคลื่อนไหวได้? พวกเขาสามารถเป็นภาพเคลื่อนไหวโดยใช้ การเปลี่ยนแปลง คุณสมบัติและ @keyframes แอนิเมชั่น แต่สิ่งที่น่าสนใจยิ่งกว่าคือการแปลงภาพเคลื่อนไหวสามารถเพิ่มระดับด้วยการเพิ่มเล็กน้อย ผลการตีกลับ, ใช้ ลูกบาศก์ Bezier () ฟังก์ชั่นจับเวลา. โดยสังเขป, ลูกบาศก์ Bezier () (ใน CSS) คือ ฟังก์ชั่นจับเวลาสำหรับการเปลี่ยน. มันระบุความเร็วของการเปลี่ยนแปลงและเหนือสิ่งอื่นใดก็สามารถใช้...

นักพัฒนาส่วนหน้าต้องการทรัพยากรที่ดีที่สุดเท่าที่จะทำได้ โดยปกติหมายถึง ทำงานบนกรอบ เช่น Bootstrap เพราะมันเต็มไปด้วยทุกสิ่งโดยทั่วไป. อย่างไรก็ตามมีทางเลือกมากมายและ Shoelace.css เป็นตัวอย่างหนึ่งที่คุณควรคุ้นเคย. นี้ ชุด CSS ฟรี ไม่ใช่กรอบที่สมบูรณ์จริงๆ แทนที่จะเป็นเช่นนั้น ชุดเริ่มต้นสำหรับนักพัฒนา ผู้ที่ไม่ต้องการสร้างสไตล์ CSS ที่กำหนดเองนับตั้งแต่เริ่มต้น. คุณสามารถใช้การรีเซ็ต CSS ได้ตลอดเวลา แต่เพียงฟอร์แมตเบราว์เซอร์แต่ละตัวเท่ากัน การรีเซ็ตคือ ไม่ใช่ใบปะหน้าสำหรับการจัดการงานที่ซับซ้อนมากขึ้น, และนั่นคือประเด็นของ Shoelace. มันมาเป็น แพ็กเกจที่มี CLI...

ชวเลขและลองแฮนด์ - อันใดอันหนึ่งรัดกุมและอีกอันแม่นยำ หนึ่งเกิดขึ้นจากความต้องการความกะทัดรัดในขณะที่อีกคนยืนหยัดเพื่อรักษาความชัดเจน ไม่ว่าจะด้วยวิธีใดพวกเขามีจุดประสงค์ข้อดีและข้อเสียดังนั้นต้องพูด. โพสต์นี้จะส่องแสงทั้งบนชวเลข CSS และข้อความสั้น ๆ ในขณะที่การสรุปที่ดีที่สุดที่จะใช้สำหรับสถานการณ์ใด. ชวเลขคุณสมบัติคืออะไร? คุณสมบัติชวเลข เป็นคุณสมบัติที่ใช้ค่าสำหรับชุดคุณสมบัติ CSS อื่น ๆ ตัวอย่างเช่นเราสามารถกำหนดค่าสำหรับ ชายแดนที่มีความกว้าง, ชายแดนสไตล์ และ ชายแดนสี ใช้ ชายแดน สถานที่ให้บริการเพียงอย่างเดียว. เป็นพื้น, เส้นขอบ: 1px สีน้ำเงินเข้ม เหมือนกับ: ความกว้างชายแดน:...

มี CSS Preprocessor จำนวนน้อย, LESS, Sass, Stylus และ Swith CSS มีเพียงไม่กี่ชื่อ. ตัวประมวลผลล่วงหน้า CSS, ดังที่เราได้กล่าวไว้บ่อยครั้งมีจุดประสงค์เพื่อให้การเขียน CSS เป็นแบบไดนามิกมีระเบียบและมีประสิทธิผลมากขึ้น แต่, คำถามคือคำถามใดที่ทำงานได้ดีที่สุด? แน่นอนว่าเราจะไม่ดูพวกเขาทุกคนแทนเราจะเปรียบเทียบเพียงสองคนที่เป็นที่นิยมมากขึ้น: Sass และน้อยลง. ในการตัดสินใจเราจะเปรียบเทียบสองในเจ็ดปัจจัย: ปัจจัยที่มีประสิทธิภาพดีกว่าจะได้หนึ่งจุด ในกรณีที่เสมอกันจะได้รับหนึ่งคะแนน. เอาล่ะ. การติดตั้ง เริ่มจากขั้นตอนพื้นฐานกันก่อน, การติดตั้ง. ทั้ง Sass...

การประมวลผลล่วงหน้าของ CSS เป็นแนวคิดที่นักพัฒนาเว็บส่วนใหญ่เรียนรู้หรืออ่านไปแล้ว เราได้ครอบคลุมการประมวลผลล่วงหน้าของ CSS ในรายละเอียดที่ยอดเยี่ยมเพื่อช่วยให้นักพัฒนาได้อย่างรวดเร็วในเทคโนโลยีที่แพร่หลายนี้ แต่สิ่งที่เกี่ยวกับ โพสต์โปรเซสเซอร์? เครื่องมือที่ค่อนข้างใหม่เหล่านี้มีความคล้ายคลึงกันในแง่ที่พวกเขา ส่งผลกระทบต่อเวิร์กโฟลว์การพัฒนาเว็บ, อย่างไรก็ตามพวกเขาทำงานบน อีกด้านหนึ่งของการพัฒนา CSS (“เสา” การพัฒนา). ในโพสต์นี้ฉันอยากจะแนะนำ พื้นฐานของการประมวลผลภายหลัง, มันทำงานอย่างไรทำไมคุณถึงใช้งานและแบ่งปันไลบรารี / เครื่องมือสองสามอย่างที่คุณสามารถใช้เพื่อเพิ่มเกม CSS ของคุณด้วยการโพสต์. โพสต์กับการประมวลผลล่วงหน้า การปฏิวัติการประมวลผลล่วงหน้า เกิดขึ้นเมื่อ Sass / LESS เข้าฉาก. เครื่องมือเหล่านี้ช่วยให้นักพัฒนาสามารถใช้ตัวแปรลูปฟังก์ชั่นและมิกซ์อินภายใน...

โมดูล CSS กริดเค้าโครง ใช้การออกแบบที่ตอบสนองต่อไปอีกระดับโดยการแนะนำ ชนิดใหม่ของความยืดหยุ่น ที่ไม่เคยเห็นมาก่อน ตอนนี้เราทำไม่ได้เท่านั้น กำหนดกริดที่กำหนดเอง เร็วอย่างเห็นได้ชัดด้วย CSS อย่างเดียว แต่ CSS Grid ก็มีเช่นกัน อัญมณีที่ซ่อนอยู่มากมาย ที่ช่วยให้เราสามารถปรับแต่งกริดและบรรลุเลย์เอาต์ที่ซับซ้อน. MinMax () ฟังก์ชัน เป็นหนึ่งในคุณสมบัติที่ไม่เป็นที่รู้จักกันอย่างแพร่หลาย ทำให้สามารถกำหนดขนาดของแทร็กกริดได้ เป็นช่วงต่ำสุดถึงสูงสุด เพื่อให้กริดสามารถปรับให้เข้ากับวิวพอร์ตของผู้ใช้แต่ละคนได้อย่างดีที่สุด. วากยสัมพันธ์ ไวยากรณ์ของ MinMax () ฟังก์ชั่นค่อนข้างง่ายใช้เวลา สองข้อโต้แย้ง:...

CSS "Floats" (อิลิเมนต์ลอย) นั้นใช้งานง่าย แต่เมื่อใช้แล้วเอฟเฟกต์ที่มีต่อองค์ประกอบรอบ ๆ บางครั้งอาจไม่สามารถคาดการณ์ได้ หากคุณเคยเจอปัญหาของการหายไปขององค์ประกอบใกล้เคียงหรือลอยที่โผล่ออกมาเหมือนนิ้วหัวแม่มือเจ็บไม่ต้องกังวลอีกต่อไป. โพสต์นี้ครอบคลุมคำถามพื้นฐานห้าข้อที่จะช่วยให้คุณเป็นผู้เชี่ยวชาญในองค์ประกอบแบบลอยตัว. องค์ประกอบใดไม่ลอย? เกิดอะไรขึ้นกับองค์ประกอบเมื่อมันลอย? เกิดอะไรขึ้นกับพี่น้องของ "โฟลต"? เกิดอะไรขึ้นกับผู้ปกครองของ "โฟลต"? คุณจะล้าง "Floats" ได้อย่างไร? สำหรับผู้อ่านที่เพิ่ม TL; dr เข้าใกล้ชีวิตมีบทสรุปใกล้ถึงจุดสิ้นสุด. 1. องค์ประกอบใดไม่ลอย? แน่นอน หรือ องค์ประกอบตำแหน่งคงที่ จะไม่ลอย ดังนั้นในครั้งต่อไปที่คุณพบลอยที่ไม่ทำงานให้ตรวจสอบว่ามันลอยอยู่ position:...