วลาด เมอร์เซวิช

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

บล็อกไล่ระดับสี

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

จะทำให้เลเยอร์กึ่งโปร่งใสได้อย่างไร?

หากต้องการเปลี่ยนระดับความโปร่งใสขององค์ประกอบ ให้ใช้คุณสมบัติรูปแบบความทึบที่มีค่าตั้งแต่ 0 ถึง 1 โดยที่ 0 สอดคล้องกับความโปร่งใสทั้งหมด และ 1 ตรงกันข้ามกับความทึบของวัตถุ คุณสมบัตินี้ไม่ทำงานใน Internet Explorer ดังนั้นคุณต้องใช้ตัวกรองสำหรับคุณสมบัตินี้โดยเฉพาะ ซึ่งเป็นคุณสมบัติที่ไม่ได้เป็นส่วนหนึ่งของข้อกำหนด CSS ตัวอย่างที่ 1 แสดงวิธีการตั้งค่าความโปร่งใสของเลเยอร์สำหรับเบราว์เซอร์ทั้งหมด

พื้นหลังโปร่งแสง

วลาด เมอร์เซวิช

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

จะจัดตารางให้โปร่งแสงแต่บางเซลล์ไม่โปร่งแสงได้อย่างไร?

หากต้องการเปลี่ยนความโปร่งใสขององค์ประกอบ CSS3 จะจัดเตรียมคุณสมบัติความทึบ ค่าของมันอาจแตกต่างกันไปตั้งแต่ 0 ถึง 1 ศูนย์สอดคล้องกับความโปร่งใสทั้งหมดขององค์ประกอบ และค่าหนึ่งตรงกันข้ามคือความทึบ เบราว์เซอร์สมัยใหม่ทำงานค่อนข้างถูกต้องกับคุณสมบัตินี้ ยกเว้นเบราว์เซอร์ Internet Explorer ดังนั้นคุณต้องใช้คุณสมบัติตัวกรองพิเศษที่มีค่า อัลฟ่า(ความทึบ=X) โดยที่ X สามารถเปลี่ยนแปลงได้ตั้งแต่ 0 ถึง 100

หากต้องการสร้างเอฟเฟกต์โปร่งใสใน CSS ให้ใช้คุณสมบัติ ความทึบ.

IE8 และเวอร์ชันก่อนหน้ารองรับคุณสมบัติทางเลือก - filter:alpha(opacity=x) โดยที่ " x " สามารถอยู่ในช่วงตั้งแต่ 0 ถึง 100 ยิ่งค่าต่ำ องค์ประกอบก็จะยิ่งโปร่งใสมากขึ้น

เบราว์เซอร์อื่นๆ ทั้งหมดรองรับความทึบของคุณสมบัติ CSS มาตรฐาน ซึ่งสามารถรับตัวเลขตั้งแต่ 0.0 ถึง 1.0 เป็นค่า ยิ่งค่าต่ำ องค์ประกอบก็จะยิ่งโปร่งใสมากขึ้น:

พยายาม "

ความโปร่งใสเมื่อโฮเวอร์

หลอกคลาส:โฮเวอร์ช่วยให้คุณเปลี่ยนรูปลักษณ์ขององค์ประกอบเมื่อคุณวางเคอร์เซอร์ของเมาส์ไว้เหนือองค์ประกอบเหล่านั้น เราจะใช้คุณสมบัตินี้เพื่อทำให้รูปภาพสูญเสียความโปร่งใสเมื่อวางเมาส์เหนือ:

พยายาม "

ความโปร่งใสของพื้นหลัง

มีสองวิธีที่เป็นไปได้ในการทำให้องค์ประกอบโปร่งใส: คุณสมบัติความทึบที่อธิบายไว้ข้างต้น และการระบุสีพื้นหลังในรูปแบบ RGBA

คุณอาจคุ้นเคยกับโมเดลการแสดงสี RGB อยู่แล้ว RGB (แดง เขียว น้ำเงิน - แดง เขียว น้ำเงิน) เป็นระบบสีที่กำหนดเฉดสีโดยการผสมสีแดง เขียว และน้ำเงิน ตัวอย่างเช่น หากต้องการตั้งค่าสีข้อความเป็นสีเหลือง คุณสามารถใช้ประกาศต่อไปนี้:

สี: RGB (255,255,0); สี: RGB (100%,100%,0);

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

การประกาศสี RGBA มีไวยากรณ์คล้ายคลึงกับกฎ RGB มาตรฐาน อย่างไรก็ตาม เราจะต้องประกาศค่าเป็น RGBA (แทน RGB) และระบุค่าความโปร่งใสของทศนิยมเพิ่มเติมหลังค่าสีระหว่าง 0.0 (โปร่งใสเต็มที่) ถึง 1 (ทึบแสงเต็มที่)

สี: RGB (255,255,0,0.5); สี: RGBA(100%,100%,0,0.5);

ความแตกต่างระหว่างคุณสมบัติความทึบและคุณสมบัติ RGBA ก็คือคุณสมบัติความทึบใช้ความโปร่งใสกับองค์ประกอบทั้งหมด ซึ่งหมายความว่าเนื้อหาทั้งหมดขององค์ประกอบจะโปร่งใส และ RGBA ช่วยให้คุณตั้งค่าความโปร่งใสให้กับแต่ละส่วนขององค์ประกอบได้ (เช่น เฉพาะข้อความหรือพื้นหลัง):

เนื้อความ ( พื้นหลังรูปภาพ: url(img.jpg); ) .prim1 ( กว้าง: 400px; ระยะขอบ: 30px 50px; สีพื้นหลัง: #ffffff; เส้นขอบ: 1px สีดำทึบ; น้ำหนักแบบอักษร: ตัวหนา; ความทึบ: 0.5; ตัวกรอง : alpha(opacity=70); /*สำหรับ IE8 และรุ่นก่อนหน้า*/ text-align: center; .prim2 ( width: 400px; margin: 30px 50px; background-color: rgba(255,255,255,0.5); border: 1px solid black ; แบบอักษร-น้ำหนัก: ตัวหนา; การจัดแนวข้อความ: กึ่งกลาง ) พยายาม "

หมายเหตุ: ไม่รองรับค่า RGBA ใน IE8 และรุ่นก่อนหน้า หากต้องการประกาศสีทางเลือกสำหรับเบราว์เซอร์รุ่นเก่าที่ไม่รองรับค่าสีอัลฟ่า คุณควรระบุสีนั้นก่อนค่า RGBA: background: rgb(255,255,0); พื้นหลัง: RGBA(255,255,0,0.5);

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

ค่าที่เป็นไปได้

ไวยากรณ์สำหรับคุณสมบัติความทึบใน CSS มีลักษณะดังนี้:

ตัวเลือก (ความทึบ: 1; ) ตัวเลือก (ความทึบ: 0; ) ตัวเลือก (ความทึบ: 0.4; )

อินพุตยอมรับค่าตัวเลขในช่วงตั้งแต่ 0 ถึง 1 พารามิเตอร์สามารถแสดงเศษส่วนของหนึ่งในขณะที่ใช้จุดเป็นตัวคั่นทศนิยมใน CSS

องค์ประกอบที่มีความโปร่งใสเป็นศูนย์จะมองไม่เห็น แต่ยังคงครอบครองตำแหน่งบนหน้าและยังคงรักษาความสามารถในการโต้ตอบกับผู้ใช้

หากค่าคุณสมบัติไม่เป็นศูนย์ ความโปร่งใสจริงจะถูกคำนวณเป็นเปอร์เซ็นต์ของขีดจำกัดบน ในสถานการณ์ปกติ ความทึบ: 1 จะกำหนดความทึบที่สมบูรณ์ขององค์ประกอบ

ความโปร่งใสของโหนดย่อย

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

ผู้ปกครอง (ความทึบ: 0.7; ) เด็ก (ความทึบ: 1; )

ในสถานการณ์นี้ องค์ประกอบลูกจะโปร่งใส 30% แม้ว่าค่าความทึบจะเป็นหนึ่งก็ตาม

ตัวอย่างการใช้งาน

ตัวอย่างที่ 1: ความโปร่งแสง จำเป็นต้องมองเห็นพื้นหลังหลักของบล็อกภายใต้องค์ประกอบเป้าหมาย

เป้าหมาย ( พื้นหลัง: สีดำ; ความทึบ: 0.5; )

ไม่เพียงแต่พื้นหลังของบล็อกเป้าหมายจะโปร่งแสง แต่ยังรวมถึงข้อความด้วย

ตัวอย่างที่ 2: การควบคุมความโปร่งใสแบบไดนามิก ค่าของคุณสมบัติความทึบ CSS ของบล็อกเป้าหมายจะเปลี่ยนไปเมื่อคุณวางเมาส์เหนือมัน

เป้าหมาย ( ความทึบ: 0.2; ) .target:hover ( ความทึบ: 1; )

ความโปร่งใสแบบไดนามิก

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

หากต้องการเข้าถึงความโปร่งใสจากสคริปต์ คุณจะต้องเข้าถึงออบเจ็กต์สไตล์ขององค์ประกอบเฉพาะ

// รับค่าความทึบปัจจุบัน var opacity = element.style.opacity; // ตั้งค่าใหม่ element.style.opacity = 0.4;

การหายไปของบล็อกอย่างราบรื่นสามารถทำได้โดยใช้คุณสมบัติการเปลี่ยน CSS:

องค์ประกอบ ( ความทึบ: 0.1; การเปลี่ยนแปลง: ความทึบ 1,000ms; ) องค์ประกอบ: โฮเวอร์ ( ความทึบ: 0.8; การเปลี่ยนแปลง: ความทึบ 2000ms; )

ตอนนี้โหนดองค์ประกอบเมื่อวางเมาส์ไว้จะเปลี่ยนความโปร่งใสจาก 10 เป็น 80% ภายในหนึ่งวินาที และเมื่อเคอร์เซอร์ออกไป โหนดจะหรี่ลงเป็นค่าดั้งเดิมภายในสองวินาที

คุณสมบัติความทึบของ CSS ร่วมกับกลไกการเปลี่ยนแปลงช่วยให้คุณสร้างเอฟเฟกต์ที่สวยงามได้

ช่องอัลฟ่าแทนความทึบ

รายละเอียดปลีกย่อยหลักของกลไกความทึบใน CSS:

• เอฟเฟกต์ไม่เพียงขยายไปถึงพื้นหลังของบล็อกเท่านั้น แต่ยังรวมถึงเนื้อหาข้อความด้วยซึ่งควรปล่อยให้ชัดเจน
• องค์ประกอบลูกต้องไม่โปร่งใสน้อยกว่าองค์ประกอบหลัก

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

pseudo-class:target เลือกองค์ประกอบในเอกสารที่ชี้ไปที่ส่วน URL ตัวอย่างเช่น ข้อความชิ้นนี้ถูกล้อมรอบด้วยองค์ประกอบ ด้วยไอดี #target-test . หากคุณไปตามลิงก์ องค์ประกอบนั้นจะกลายเป็นเป้าหมาย และสไตล์ pseudo-class:target จะมีผล

ปีที่แล้ว ฉันเขียนเกี่ยวกับ:target pseudo-class ในบทความ 5 Underused CSS Selectors (และวิธีใช้งาน) ตัวอย่างแรกคือการใช้ pseudo-class:target เพื่อเน้นส่วนของเพจที่ถูกนำทางไป เช่น การเพิ่มสีพื้นหลังหรือเส้นขอบ ดังตัวอย่างด้วย

แต่ฉันเพิ่งได้ข้อสรุปว่าเราสามารถใช้คลาสเทียม:target เพื่อประโยชน์ที่มากขึ้นโดยการสร้างองค์ประกอบแบบโต้ตอบบนเพจโดยไม่ต้องใช้ JavaScript

ตัวอย่าง #1: การซ่อนและการแสดงเนื้อหา

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

แสดงความคิดเห็น #comments:not(:target) ( display: none; ) #comments:target ( display: block; )

ตัวอย่าง #2: การนำทางแบบดึงออก

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

#nav ( ตำแหน่ง: คงที่; ด้านบน: 0; ความสูง: 100%; ความกว้าง: 80%; ความกว้างสูงสุด: 400px; ) #nav:not(:target) ( ขวา: -100%; การเปลี่ยนแปลง: ขวา 1.5s; ) #nav:target ( ขวา: 0; การเปลี่ยนแปลง: ขวา 1s; )

ตัวอย่าง #3: หน้าต่างโมดอลป๊อปอัป

หากนำแนวคิดนี้ไปใช้เพิ่มเติม เราสามารถสร้างหน้าต่างโมดอลที่เต็มทั้งหน้าได้

#modal-container ( ตำแหน่ง: คงที่; ด้านบน: 0; ซ้าย: 0; ความกว้าง: 100%; ความสูง: 100%; พื้นหลัง: rgba (0,0,0,0.8); จอแสดงผล: ดิ้น; ปรับเนื้อหา: กึ่งกลาง; align-items: center; ) .modal ( width: 70%; พื้นหลัง: #fff; padding: 20px; text-align: center; ) #modal-container:not(:target) ( ความทึบ: 0; การมองเห็น: ซ่อนอยู่; การเปลี่ยนแปลง: ความทึบ 1 วินาที การมองเห็น 1 วินาที; ) #modal-container:target ( ความทึบแสง: 1; การมองเห็น: มองเห็นได้; การเปลี่ยนแปลง: ความทึบ 1 วินาที การมองเห็น 1 วินาที; )

ตัวอย่าง #4: การเปลี่ยนสไตล์สากล

ตัวอย่างสุดท้ายไม่สามารถเรียกได้ว่าถูกต้องในแง่ของความหมาย มันคือการประยุกต์ใช้ pseudo-class:target กับองค์ประกอบ ตามด้วยการเปลี่ยนสไตล์หรือเค้าโครงหน้า

#body:not(:target) ( main ( width: 60%; ) กัน ( width: 30%; ) .show-sidebar-link ( display: none; ) ) #body:target ( main ( width: 100%; ) กัน ( จอแสดงผล: ไม่มี; ) .hide-sidebar-link ( จอแสดงผล: ไม่มี; ) )

แล้วความหมายและการเข้าถึงล่ะ?

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