ทำความเข้าใจองค์ประกอบหลอกก่อนและหลัง
Cascading Style Sheet (CSS) มีวัตถุประสงค์หลักสำหรับการใช้สไตล์กับมาร์กอัพ HTML แต่ในบางกรณีเมื่อเพิ่มมาร์กอัพพิเศษลงในเอกสารนั้นซ้ำซ้อนหรือไม่สามารถทำได้จริง ๆ แล้วมีฟีเจอร์ใน CSS ที่ช่วยให้เราสามารถเพิ่มมาร์กอัปพิเศษโดยไม่รบกวน เอกสารจริงคือ หลอกองค์ประกอบ.
คุณเคยได้ยินคำศัพท์นี้โดยเฉพาะเมื่อคุณติดตามบทเรียนของเรา.
จริงๆแล้วมีสมาชิกในครอบครัว CSS หลายคนที่ถูกจัดประเภทเป็น หลอกองค์ประกอบ เช่น :เส้นแรก, :จดหมายฉบับแรก, :: เลือก, :ก่อน และ :หลังจาก. แต่สำหรับบทความนี้เราจะ จำกัด ความคุ้มครองของเราไว้ที่เท่านั้น :ก่อน และ :หลังจาก, “หลอกองค์ประกอบ” ที่นี่จะอ้างอิงถึงทั้งคู่โดยเฉพาะ เราจะตรวจสอบเรื่องนี้โดยเฉพาะจากพื้นฐาน.
การสนับสนุนไวยากรณ์และเบราว์เซอร์
หลอกองค์ประกอบ ตั้งแต่นั้นมาจริง ๆ แล้ว CSS1, แต่ :ก่อน และ :หลังจาก ที่เรากำลังพูดถึงที่นี่ได้รับการปล่อยตัว CSS2.1. ที่จุดเริ่มต้น หลอกองค์ประกอบ ใช้โคลอนเดี่ยวสำหรับไวยากรณ์จากนั้นเมื่อเว็บมีวิวัฒนาการใน CSS3 และ หลอกองค์ประกอบ ถูกแก้ไขเพื่อใช้เครื่องหมายทวิภาค - กลายเป็น ::ก่อน & ::หลังจาก - เพื่อแยกแยะด้วย หลอกชั้นเรียน ( ได้แก่. : เลื่อน, :คล่องแคล่ว, และอื่น ๆ ).
อย่างไรก็ตามไม่ว่าคุณจะใช้รูปแบบโคลอนเดี่ยวหรือดับเบิลโคลอนเบราว์เซอร์จะยังคงจดจำเช่นกัน และเนื่องจาก Internet Explorer 8 รองรับรูปแบบโคลอนเดี่ยวจึงปลอดภัยกว่าที่จะใช้โคลอนเดี่ยวหากคุณต้องการความเข้ากันได้ของเบราว์เซอร์ที่กว้างขึ้น.
มันทำอะไร?
ในระยะสั้น หลอกองค์ประกอบ จะแทรกองค์ประกอบพิเศษ ก่อน หรือ หลังจาก องค์ประกอบของเนื้อหาดังนั้นเมื่อเราเพิ่มพวกเขาทั้งสองพวกเขามีความเท่าเทียมกันทางเทคนิคด้วยมาร์กอัปต่อไปนี้.
:ก่อน นี่คือเนื้อหาหลัก. :หลังจาก
แต่องค์ประกอบเหล่านั้นไม่ได้ถูกสร้างขึ้นจริงในเอกสาร พวกเขายังคงมองเห็นได้บนพื้นผิว แต่คุณจะไม่พบพวกเขาในแหล่งเอกสารดังนั้นพวกเขากำลังพูดจริง เทียม องค์ประกอบ.
การใช้องค์ประกอบปลอม
การใช้ หลอกองค์ประกอบ ค่อนข้างง่าย ไวยากรณ์ต่อไปนี้ เลือกก่อน จะเพิ่มองค์ประกอบ ก่อน ตัวเลือกของเนื้อหาในขณะที่ไวยากรณ์นี้ เลือก: หลังจาก จะเพิ่มหลังจากนั้นและเพื่อเพิ่มเนื้อหาภายในพวกเราสามารถใช้ เนื้อหา คุณสมบัติ.
ตัวอย่างเช่นตัวอย่างด้านล่างจะเพิ่มเครื่องหมายคำพูดก่อนและหลัง blockquote.
blockquote: ก่อนหน้า content: open-quote; blockquote: หลัง content: close-quote;
จัดแต่งทรงผมองค์ประกอบหลอก
แม้จะเป็นองค์ประกอบปลอม ๆ หลอกองค์ประกอบ ทำตัวเหมือนจริง “จริง” ธาตุ; เราสามารถเพิ่มรูปแบบการประกาศใด ๆ กับพวกเขาเช่นการเปลี่ยนสีเพิ่มพื้นหลังปรับขนาดตัวอักษรการจัดแนวข้อความภายในและอื่น ๆ.
blockquote: ก่อนหน้า content: open-quote; ขนาดตัวอักษร: 24 พอยต์; จัดข้อความ: ศูนย์; ความสูงของเส้น: 42px; สี: #fff; พื้นหลัง: #ddd; ลอย: ซ้าย; ตำแหน่ง: ญาติ; ด้านบน: 30px; blockquote: หลัง content: close-quote; ขนาดตัวอักษร: 24 พอยต์; จัดข้อความ: ศูนย์; ความสูงของเส้น: 42px; สี: #fff; พื้นหลัง: #ddd; ลอย: ขวา; ตำแหน่ง: ญาติ; ด้านล่าง: 40px;
การระบุมิติ
องค์ประกอบที่สร้างขึ้นโดยค่าเริ่มต้นเป็นองค์ประกอบระดับแบบอินไลน์ดังนั้นเมื่อเรากำลังจะระบุความสูงและความกว้างเราจะต้องกำหนดให้มันเป็นองค์ประกอบบล็อกโดยใช้ จอแสดงผล: บล็อก การประกาศ.
blockquote: ก่อนหน้า content: open-quote; ขนาดตัวอักษร: 24 พอยต์; จัดข้อความ: ศูนย์; ความสูงของเส้น: 42px; สี: #fff; พื้นหลัง: #ddd; ลอย: ซ้าย; ตำแหน่ง: ญาติ; ด้านบน: 30px; รัศมีเส้นขอบ: 25px; / ** กำหนดให้เป็นองค์ประกอบบล็อก ** / display: block; ความสูง: 25px; ความกว้าง: 25px; blockquote: หลัง content: close-quote; ขนาดตัวอักษร: 24 พอยต์; จัดข้อความ: ศูนย์; ความสูงของเส้น: 42px; สี: #fff; พื้นหลัง: #ddd; ลอย: ขวา; ตำแหน่ง: ญาติ; ด้านล่าง: 40px; รัศมีเส้นขอบ: 25px; / ** กำหนดให้เป็นองค์ประกอบบล็อก ** / display: block; ความสูง: 25px; ความกว้าง: 25px;
แนบภาพพื้นหลัง
นอกจากนี้เรายังสามารถแทนที่เนื้อหาด้วยรูปภาพแทนข้อความธรรมดาเท่านั้น แม้ว่า เนื้อหา คุณสมบัติให้ URL () สตริงที่จะแทรกภาพ แต่ในกรณีส่วนใหญ่ฉันชอบที่จะใช้ พื้นหลัง คุณสมบัติสำหรับควบคุมรูปภาพที่แนบมา.
blockquote: ก่อนหน้า content: ""; ขนาดตัวอักษร: 24 พอยต์; จัดข้อความ: ศูนย์; ความสูงของเส้น: 42px; สี: #fff; ลอย: ซ้าย; ตำแหน่ง: ญาติ; ด้านบน: 30px; รัศมีเส้นขอบ: 25px; พื้นหลัง: url (images / quotemark.png) -3px -3px #ddd; จอแสดงผล: บล็อก; ความสูง: 25px; ความกว้าง: 25px; blockquote: หลัง content: ""; ขนาดตัวอักษร: 24 พอยต์; จัดข้อความ: ศูนย์; ความสูงของเส้น: 42px; สี: #fff; ลอย: ขวา; ตำแหน่ง: ญาติ; ด้านล่าง: 40px; รัศมีเส้นขอบ: 25px; พื้นหลัง: url (images / quotemark.png) -1px -32px #ddd; จอแสดงผล: บล็อก; ความสูง: 25px; ความกว้าง: 25px;
อย่างไรก็ตามอย่างที่คุณเห็นได้จากตัวอย่างด้านบนเรายังคงประกาศ เนื้อหา property และคราวนี้มีสตริงว่าง เนื้อหา คุณสมบัติคือ ความต้องการ และควรนำไปใช้เสมอ มิฉะนั้น องค์ประกอบหลอก จะไม่ทำงาน ใด ๆ.
รวมกับคลาส pseudo
แม้ว่าพวกเขาจะเป็นประเภทที่แตกต่างกัน หลอก, เราสามารถใช้ หลอกชั้นเรียน พร้อมด้วย หลอกองค์ประกอบ เข้าด้วยกันในกฎ CSS เดียวตัวอย่างเช่นถ้าเราต้องการเปลี่ยน พื้นหลังเครื่องหมายคำพูด ค่อนข้างมืดเมื่อเราเลื่อนเมาส์ไป blockquote.
blockquote: hover: after, blockquote: hover: ก่อน background-color: # 555;
การเพิ่มผลการเปลี่ยนภาพ
และเรายังสามารถใช้ การเปลี่ยนแปลง เพื่อสร้างเอฟเฟกต์การเปลี่ยนสีที่สวยงาม.
การเปลี่ยนแปลง: ทั้งหมด 350ms -o-transition: ทั้งหมด 350ms; -moz-transition: ทั้งหมด 350ms; -webkit-transition: ทั้งหมด 350ms;
น่าเสียดายที่ดูเหมือนว่าการเปลี่ยนเอฟเฟกต์จะทำงานเฉพาะใน Firefox เวอร์ชันล่าสุดเท่านั้น หวังว่าเบราว์เซอร์จะมีมากขึ้นเพื่อให้สามารถใช้คุณสมบัติการเปลี่ยนแปลงได้ หลอกองค์ประกอบ ในอนาคต.
- การสาธิต
- แหล่งดาวน์โหลด
แรงบันดาลใจเพิ่มเติม
เพื่อสร้างแรงบันดาลใจให้คุณเราได้เลือกตัวอย่างที่ยอดเยี่ยมสามตัวอย่างที่สามารถให้แนวคิดสำหรับการออกแบบเว็บของคุณ.
เงาที่น่าสนใจ
ในบทช่วยสอนนี้ Paul Underwood อธิบายวิธีสร้างเอฟเฟกต์เงาที่สมจริงและน่าสนใจยิ่งขึ้นโดยใช้ :ก่อน และ :หลังจาก หลอกองค์ประกอบ. ทั้งสองอยู่ในตำแหน่งที่แน่นอนและวางไว้ด้านหลังด้วย เชิงลบ ดัชนี z ราคา.
เอฟเฟกต์ภาพซ้อน
ใช้ หลอกองค์ประกอบ สำหรับการสร้างเอฟเฟกต์ภาพซ้อนกันยุ่งเท่านั้นด้วยภาพเดียวในมาร์กอัปก็เป็นไปได้ หลอกองค์ประกอบ ใช้สำหรับสร้างภาพลวงตาของภาพซ้อนที่ด้านหลังของภาพจริงโดยใช้ค่าลบ ดัชนี z.
ข้อสรุป
Pseudo องค์ประกอบ เป็นเพียง “เย็น” และใช้งานได้ในที่สุดโดยทั่วไปเรามี สององค์ประกอบโบนัส สำหรับทุกองค์ประกอบที่เราเพิ่มโดยไม่รบกวนโครงสร้าง HTML จริงเลยจากนั้นเปลี่ยนเป็นเกือบทุกสิ่งที่เราสามารถจินตนาการได้.
จริงๆแล้วมีการปรับปรุงบางอย่างสำหรับ หลอกองค์ประกอบ ที่กำลังทำงานอยู่เช่น การซ้อนองค์ประกอบแบบหลอก div :: before :: before เนื้อหา: "; และ องค์ประกอบปลอมหลายรายการ div :: before (3) เนื้อหา: "; ซึ่งแน่นอนจะเปิดโอกาสให้มากขึ้นในการฝึกออกแบบเว็บไซต์ในอนาคต แม้ว่าจะมีการใช้งานในเบราว์เซอร์ปัจจุบัน แต่ก็ต้องรออย่างอดทน.
