15 เทคนิค CSS ที่มีประโยชน์ที่คุณอาจมองข้ามไป

หากคุณเป็นผู้พัฒนาเว็บส่วนหน้ามาระยะหนึ่งแล้วมีโอกาสสูงที่คุณจะมีช่วงเวลาที่คุณพยายามหาวิธีเขียนโค้ดบางอย่างและรับรู้หลังจากผ่านการทำ Google เล็กน้อย “มี CSS สำหรับสิ่งนั้น”. ถ้าคุณไม่มีคุณก็กำลังจะทำ.

โพสต์นี้เป็นคอลเลกชันของรหัส CSS ที่สามารถให้คุณสมบัติเช่นเปลี่ยนองค์ประกอบที่เหนียวให้เส้นประที่ขีดเส้นใต้ขีดความสามารถในการไหลข้อความของหน้าของคุณในรูปแบบพิเศษหรือบรรลุผล Parallax บางส่วนได้รับการสนับสนุนอย่างกว้างขวางขณะที่เบราว์เซอร์ทั้งหมดกำลังสนับสนุนอย่างเต็มที่.

1. การกำหนดหมายเลขส่วนหัวและหัวเรื่องย่อย

   สมมติว่าคุณมีชุดหัวเรื่องและหัวเรื่องย่อยในเอกสารของคุณและคุณกำหนดหมายเลขด้วยตนเองหรือผ่านสคริปต์ คุณสามารถใช้ตัวนับ CSS เพื่อทำสิ่งนี้แทน มีโพสต์เชิงลึกอยู่ที่นี่แล้ว และเนื่องจากมันมาจากสเปค CSS2 คุณจึงสามารถเดิมพันได้ว่ามันรองรับเบราว์เซอร์ทั้งหมดยกเว้น IE 6.

2. Spice Up Underlines ธรรมดา

   บางครั้งเราต้องการขีดเส้นใต้ด้วยเส้นประหรือเส้นประที่ดีแทนที่จะเป็นเส้นทึบ เนื่องจากไม่มีตัวเลือกสำหรับสิ่งนั้นเราจึงเลือก ขอบล่าง. แต่ ขอบล่าง ไม่ใช่คำตอบที่ดีถ้าข้อความที่คุณขีดเส้นใต้ถูกตัดคำ.

   CSS3 ระบุคุณสมบัติใหม่สามอย่างสำหรับตกแต่งข้อความ ตกแต่งข้อความสี, ตกแต่งข้อความบรรทัด, และ ตกแต่งข้อความสไตล์ ซึ่งสามารถจดชวเลขลงในความดีอันเก่า ตกแต่งข้อความ.

   คุณสามารถใช้สไตล์เหล่านั้นเพื่อขีดเส้นใต้, ขีดเส้นใต้, แม้แต่ทำให้ข้อความกะพริบและอื่น ๆ ตั้งแต่เดือนเมษายน 2558 Firefox จะรองรับคุณสมบัตินี้ แต่คุณสามารถเปิดใช้งานได้ “คุณสมบัติแพลตฟอร์มเว็บทดลอง” เพื่อใช้งานบน Chrome.

3. อ้างข้อความ

   ประการแรกไม่จำเป็นต้องกังวลกับการพิมพ์เครื่องหมายคำพูดหยิกที่ถูกต้องสำหรับการอ้างอิงสั้น ๆ เพราะมี HTML สำหรับสิ่งนั้น: แท็กที่ระบุใบเสนอราคาแบบอินไลน์.

   แท็กยังดูแลการอ้างอิงราคาภายในด้วยอัญประกาศเดี่ยว ดังนั้นอยู่ที่ไหน “มี 'CSS' สำหรับสิ่งนั้น” ขณะนี้?

   ให้บอกว่าคุณไม่ต้องการอัญประกาศเริ่มต้นหรือคุณมีเครื่องหมายคำพูดซ้อนกันมากกว่าหนึ่งระดับคุณสามารถกำหนดการตั้งค่าคำพูดของคุณสำหรับองค์ประกอบคำพูดด้วย CSS โดยใช้ CSS2 คำพูด คุณสมบัติ.

4. การจัดการตารางเกเร

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

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

5. ทำให้มันเหนียว

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

   พวกเขาทำหน้าที่เหมือนองค์ประกอบที่ถูกโพสต์ก่อนที่จะเลื่อนใด ๆ และในภายหลังเช่นองค์ประกอบคงที่เมื่อถึงเกณฑ์การเลื่อน สำหรับตอนนี้, Firefox เท่านั้น รองรับมัน.

6. รับข้อความของคุณในรูป

   คุณต้องการให้ข้อความบนหน้าเว็บของคุณโค้งไปตามภาพที่คุณแสดงข้างๆหรือไม่? คุณสามารถลอง รูปร่าง CSS. ในการใช้รูปร่าง CSS เราสามารถใช้สามคุณสมบัติได้ รูปร่างภายนอก, รูปร่างที่มีอัตรากำไร และ รูปร่างภาพเกณฑ์. ตั้งแต่เดือนเมษายน 2558 CSS Shapes ได้รับการสนับสนุน เว็บเบราว์เซอร์.

7. ฟิลด์บังคับ

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

8. พิถีพิถันด้วยสี

   หากคุณไม่ชอบสีใดสีหนึ่งเช่นสีน้ำเงินเราสามารถกำหนดสีพื้นที่ที่เลือกด้วยสีอื่นและ :: เลือก องค์ประกอบเทียมคือ CSS สำหรับสิ่งนั้น นี้ได้รับการสนับสนุนโดยเบราว์เซอร์ที่ทันสมัยทั้งหมด.

9. ฉันตรวจสอบไหม?

   ในสถานการณ์ที่มีการทำเครื่องหมายที่ช่องทำเครื่องหมายมันจะเป็นการดีถ้ามีเครื่องหมายอื่นนอกเหนือจากเครื่องหมายถูกเล็ก ๆ ภายในช่องทำเครื่องหมายเริ่มต้นเพื่อแสดงว่ามีการตรวจสอบรายการแล้ว.

   มี CSS สำหรับสิ่งที่ใช้ประโยชน์จากความสัมพันธ์ระหว่างพี่น้องทันทีสององค์ประกอบเคียงข้างกัน CSS มีตัวเลือกพี่น้องที่อยู่ติดกันแสดงโดยเครื่องหมายบวก + ลงชื่อและเราสามารถใช้มันเพื่อกำหนดเป้าหมายป้ายกำกับที่อยู่ข้างช่องทำเครื่องหมาย แต่สิ่งที่เกี่ยวกับการกำหนดเป้าหมายช่องทำเครื่องหมายที่เลือกไว้ก่อน นั่นคือ : การตรวจสอบ คลาสหลอกสำหรับสิ่งนั้น.

10. เหมือนหนังสือนิทาน

    ถ้างั้นก็คงไม่ดีแน่ “O” ใน “กาลครั้งหนึ่ง” ดูน่ารักเหรอ? เราสามารถทำให้ดูสวยหลังจากนั้นก็มี CSS สำหรับสิ่งนั้น ที่นี่อยู่ที่ไหน ::จดหมายฉบับแรก องค์ประกอบหลอกมาช่วย มันกำหนดเป้าหมายตัวอักษรตัวแรกของบรรทัดแรกขององค์ประกอบเป้าหมาย อ่านเพิ่มเติมได้ที่นี่.

11. คุณต้องการที่จะรู้มากขึ้น?

    องค์ประกอบอาจมีคลาส X หรือ data Y หรือค่าอื่น ๆ สำหรับแอตทริบิวต์ หากเราต้องการแสดงค่าคุณลักษณะดังกล่าวขององค์ประกอบที่อยู่ใกล้เคียงเราสามารถใช้ เนื้อหา: attr (X). มันดึงค่าของคุณลักษณะ X ขององค์ประกอบจากนั้นเราสามารถแสดงมันข้างองค์ประกอบ.

12. ไปทางซ้ายนิด ๆ หน่อย ๆ

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

13. เปิดเผยรูปแบบไฟล์ของลิงค์

    เคยเห็นภาพเล็ก ๆ ใกล้ลิงค์ซึ่งระบุว่าลิงค์นั้นคืออะไร? PDF หรือ DOC? ใช่มี CSS เพื่อให้บรรลุ เนื้อหา:: url () เป็นสิ่งที่เราจะใช้ในการแสดงภาพหลังลิงค์.

14. ทริกเกอร์ Parallax Effect

    เอฟเฟกต์พารัลแลกซ์เป็นเอฟเฟกต์ที่ใช้อธิบายการเคลื่อนไหวช้าของพื้นหลังที่สัมพันธ์กับเบื้องหน้า ผลกระทบนี้ได้รับความนิยมในเว็บไซต์ที่ใช้การเลื่อนแบบพารัลแลกซ์ มีวิธีการต่าง ๆ ที่จะนำไปใช้งานตัวอย่างด้านล่างใช้งานได้กับ Firefox พื้นหลังแนบ: แก้ไข;.

15. พลังของภาพเคลื่อนไหว CSS

    อาจจะไม่ใหญ่มาก “มี CSS สำหรับสิ่งนั้น” สักครู่เพราะคุณทุกคนคงตระหนักถึงภาพเคลื่อนไหว CSS เป็นส่วนใหญ่แล้ว แต่การเตือนความจำเล็กน้อยนั้นไม่เป็นอันตราย มีประโยชน์หลายอย่างสำหรับภาพเคลื่อนไหว CSS แต่นี่เป็นแบบฝึกหัดการระบายสีแบบง่าย.

ตอนนี้อ่านแล้ว: 50 ตัวอย่างโค้ด CSS ที่มีประโยชน์ที่นักออกแบบทุกคนควรมี