เคล็ดลับ CSS3 หลายประการที่คุณควรรู้

หลายๆ คนคงเคยได้ยินข่าวลือเกี่ยวกับ CSS3 มาบ้างแล้ว แต่ปัจจุบันมีเทคนิค CSS3 อะไรบ้างที่เราสามารถใช้ได้จริง? ในบทความนี้ ฉันจะแสดงให้คุณเห็นเทคนิค CSS3 ที่โดดเด่นซึ่งทำงานได้ดีในเบราว์เซอร์หลักๆ บางตัว (เช่น Firefox, Chrome, Safari, เบราว์เซอร์ Opera) เอฟเฟกต์เหล่านี้จะลดระดับการเรนเดอร์ในเบราว์เซอร์ที่ไม่รองรับ (เช่น Internet Explorer) สไตล์ CSS3 ที่นำเสนอหลายแบบสามารถใช้งานได้ทันทีโดยใช้การประกาศเฉพาะเบราว์เซอร์

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

* คำนำหน้าเบราว์เซอร์ Mozilla/Firefox/Gecko: -moz-
* คำนำหน้าเบราว์เซอร์ Webkit (Safari/Chrome): -webkit- (หมายเหตุ: คำนำหน้า Wbkit บางส่วนสามารถใช้ได้ภายใต้ Safari เท่านั้น และ Chrome ไม่รองรับ)

ดังที่คุณอาจทราบแล้ว ข้อเสียประการหนึ่งของการใช้การประกาศเหล่านี้ก็คือ หากเราต้องการรับเอฟเฟกต์ CSS3 ใน Firefox, Safari และ Chrome เราจำเป็นต้องใช้คำนำหน้าข้างต้นทั้งหมด ไม่น่าแปลกใจที่ Internet Explorer ไม่รองรับ CSS3 ดังนั้นจึงไม่มีการประกาศคำนำหน้าเฉพาะเหมือนกับเบราว์เซอร์หลักอื่นๆ

เอาล่ะ เพียงพอแล้ว มาลองดูกันทันที หมายเหตุ: การประกาศสไตล์โดยไม่มีคำนำหน้าเหล่านี้เป็นข้อเสนอข้อกำหนดที่แท้จริงของมาตรฐาน W3

คำอธิบายสาธิต (ตัวอย่าง) เกี่ยวกับหน้านี้

ตัวอย่างทั้งหมดนี้อยู่ในหน้านี้ หากคุณไม่สามารถดูเอฟเฟกต์ของตัวอย่างได้ตามปกติ (หรือสามารถดูได้เพียงบางส่วนเท่านั้น) แสดงว่าเบราว์เซอร์ที่คุณใช้ไม่รองรับเอฟเฟกต์ CSS3 เหล่านี้

เอฟเฟกต์เงา

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

กล่องเงา: #333 3px 3px 4px;
-moz-box-shadow: #333 3px 3px 4px;
-webkit-box-shadow: #333 3px 3px 4px;

การสาธิตเอฟเฟกต์เงา

ผลการไล่ระดับสี

สไตล์การไล่ระดับสี CSS3 อาจทำให้เกิดความสับสนในตอนแรก โดยเฉพาะความแตกต่างระหว่างการไล่ระดับสี -moz และ -webkit ใน -moz คุณต้องกำหนดทิศทางของการไล่ระดับสีก่อน จากนั้นจึงกำหนดสีเริ่มต้นและสีสิ้นสุด การไล่ระดับสีของ -webkit นั้นซับซ้อนกว่าเล็กน้อย ก่อนอื่นคุณต้องกำหนดประเภทของการไล่ระดับสี จากนั้นค่าสองค่าถัดไปจะกำหนดทิศทาง และสองค่าสุดท้ายจะกำหนดสีเริ่มต้นและสีสิ้นสุด ของการไล่ระดับสี

-moz-linear-gradient(-90deg,#1aa6de,#022147);
-webkit-gradient(เชิงเส้น, บนซ้าย, ล่างซ้าย, จาก(#1aa6de), ถึง(#022147));

การสาธิตเอฟเฟกต์การไล่ระดับสี

โหมดสี RGBA

คำจำกัดความของสีที่แท้จริงของ RGBA นั้นไม่ซับซ้อนอย่างที่คิด โดยยอมรับค่าพารามิเตอร์สี่ค่า: ค่าสีแดง ค่าสีเขียว ค่าสีน้ำเงิน และความโปร่งใส เราไม่ใช้ค่าสีฐานสิบหก (#) เราตั้งค่าสีในโหมด RGB โดยที่ความโปร่งใสสามารถกำหนดเอฟเฟกต์ความโปร่งใสของสีได้ ความโปร่งใสมีตั้งแต่ 0 ถึง 1 โดย 0 คือความทึบแสงโดยสมบูรณ์ และ 1 คือความโปร่งใสโดยสมบูรณ์ ความโปร่งใสของตัวอย่างสาธิตต่อไปนี้คือทั้งหมด 0.5 ความโปร่งใสขององค์ประกอบคือ 50% rgba ไม่ต้องการการประกาศคำนำหน้าเบราว์เซอร์เฉพาะใดๆ

สีพื้นหลัง: rgba (0, 54, 105, .5);

โหมดสี HSL (Hue H, Saturation S, Lightness L)

นอกจาก RGBA แล้ว CSS3 ยังรองรับโหมดสี HSL อีกด้วย สิ่งนี้ทำให้เรามีเวลาเหลือเฟือในการเลือกสีและโทนสี ในรูปแบบสี HSL นั้น H หมายถึงเฉดสี S หมายถึงโครเมียม และ L หมายถึงความสว่าง ฮิวคือค่ามุมบนวงล้อสี ในขณะที่ความอิ่มตัวและความสว่างคือค่าเปอร์เซ็นต์ของสี

สีพื้นหลัง: hsl(209,41.2%, 20.6%);

ตัวอย่างการสาธิต HSL

สีเส้นขอบ

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

เส้นขอบ: 8px ทึบ #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-สี: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-สี: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;

การสาธิตสีเส้นขอบ

การตั้งค่าสีการเลือกข้อความ

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

::selection {พื้นหลัง: #3C0; /* Safari */color: #90C;}::-moz-selection {พื้นหลัง: #3C0; /* Firefox */color: #90C;}

การสาธิตการเลือกสีข้อความ

การเสียรูป

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

-moz-transform: สเกล (1.15); -webkit-transform: สเกล (1.15);

การสาธิตผลการเปลี่ยนรูป

เค้าโครงหลายคอลัมน์

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

-moz-column-count:3;-moz-column-rule: ทึบ 1px สีดำ;-moz-column-gap: 20px;

สรุป

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