8 คุณสมบัติ CSS ที่ล้ำสมัย (และวิธีการใช้งาน)

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

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

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

01. คุณสมบัติที่กำหนดเอง

หากคุณใช้ตัวประมวลผลล่วงหน้าเช่น SASS หรือภาษาการเขียนโปรแกรมเช่น Javascript คุณจะไม่ต้องสงสัยเลยว่ามีความคุ้นเคยกับแนวคิดของตัวแปร - ค่าที่กำหนดไว้สำหรับการใช้ซ้ำตลอดรหัสของคุณ คุณสมบัติที่กำหนดเองช่วยให้เราสามารถทำสิ่งนี้ใน CSS ของเราโดยไม่จำเป็นต้องมีตัวประมวลผลล่วงหน้า ตัวแปรสามารถตั้งค่าได้ที่ระดับรูท (สร้างตัวแปรทั่วโลก) หรือกำหนดขอบเขตภายในตัวเลือก พวกเขาสามารถเรียกได้โดยใช้ไวยากรณ์ var (-> - myvariablename) ตัวอย่างเช่นเราอาจตั้งค่าตัวแปรที่เรียกว่า --PrimaryColor แบบนี้:

 / * บนองค์ประกอบราก (ทั่วโลก
ตัวแปร) * /
: ราก {
- -PrimaryColor: # F45942;
}
/ * scopeed เป็นตัวเลือก * /
.my-component {
- -PrimaryColor: # 4171f4;
} 

ตอนนี้เราสามารถใช้ตัวแปรนั้นเป็นค่าคุณสมบัติ:

 H1 {
สี: Var (- -PrimaryColor);
} 

คุณสมบัติที่กำหนดเองได้รับการสืบทอดซึ่งมีผลกระทบที่มีประโยชน์มาก หนึ่งในนั้นคือพวกธรณี ใช้ตัวอย่างข้างต้น: เราสามารถกำหนดตัวแปรทั่วโลก (# F45942 - สีแดงส้มสดใส) สำหรับ --PrimaryColor ที่ระดับรากดังนั้นทุกอินสแตนซ์ที่เราใช้ตัวแปรนี้ค่าจะเป็นสีแดง แต่เรายังกำหนดตัวแปรเดียวกันในตัวเลือกด้วยค่าที่แตกต่างกัน (# 4171f4 - สีน้ำเงินขนาดกลาง) ดังนั้นสำหรับทุกอินสแตนซ์ที่เราใช้ --PrimaryColor ตัวแปรภายในตัวเลือกนั้นค่าที่คำนวณจะเป็นสีน้ำเงิน

การตั้งค่าเริ่มต้น

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

 H1 {
สี: var (- -PrimaryColor, Blue);
} 

คุณสมบัติที่กำหนดเองแตกต่างจากตัวแปร preprocessor หรือไม่

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

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

02. แบบสอบถามคุณสมบัติ

แบบสอบถามคุณสมบัติเป็นวิธีการทดสอบว่าเบราว์เซอร์รองรับการรวมค่าคุณสมบัติคุณสมบัติ CSS เฉพาะในไฟล์ CSS ของคุณหรือไม่ พวกเขาต้องลบความต้องการห้องสมุดการตรวจจับคุณลักษณะเช่น Modernizr ไวยากรณ์คล้ายกับแบบสอบถามสื่อ: คุณใช้ at-rule @ เสริมports ตามด้วยคู่ค่าทรัพย์สินของคุณการห่อรหัสที่จะดำเนินการหากเบราว์เซอร์ตรงตามเงื่อนไขที่ระบุ

ข้อความค้นหาคุณสมบัติได้รับการสนับสนุนอย่างดีในเบราว์เซอร์ที่ทันสมัย ​​แต่พวกเขาค่อนข้างใหม่และ "Gotcha" หนึ่งรายการคือเบราว์เซอร์บางตัวที่คุณอาจต้องการทดสอบการสนับสนุนอาจไม่รองรับการสืบค้นคุณลักษณะของตัวเอง บ่อยครั้งที่วิธีที่ดีที่สุดในการจัดการกับสิ่งนี้คือการให้สไตล์ที่เสียก่อน (นอกของแบบสอบถามคุณสมบัติ) จากนั้นห่อการปรับปรุงของคุณเพื่อรองรับเบราว์เซอร์ภายใน @ เสริมports กฎ.

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

วิธีใช้แบบสอบถามคุณสมบัติ

ในการทดสอบการสนับสนุนค่าทรัพย์สินเพียงอย่างเดียวเราสามารถให้หลังได้ก่อน ในตัวอย่างนี้เราให้ Flexbox Fallback สำหรับเบราว์เซอร์ที่ไม่รองรับเค้าโครงกริด

 .my-component {
จอแสดงผล: กริด;
}
@ สนับสนุน (จอแสดงผล: ตาราง) {
.my-component {
จอแสดงผล: Flex;
}
} 

03. การสืบค้นสื่อ

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

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

 .my-element {
แอนิเมชัน: เขย่า 500ms ease-out 5;
}
@Media (ต้องการลดการเคลื่อนไหว: ลด) {
.my-element {
แอนิเมชัน: ไม่มี;
}
} 

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

 / * แบบสอบถามสื่อ 02 * /
ร่างกาย {
พื้นหลัง: การไล่ระดับสีเชิงเส้น (ถึง
ด้านล่าง, # B5FAff, # FFE2B4);
}
@Media (prefers-color-scheme: มืด) {
ร่างกาย {
สี: ขาว;
พื้นหลัง: การไล่ระดับสีเชิงเส้น (ถึง
ด้านล่าง, # 0C1338, # 3E3599);
}
} 

04. แบบอักษรตัวแปร

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

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

แกนแปรผัน

ไม่เพียงแค่นั้น แต่ด้วยแบบอักษรตัวแปรเราไม่ได้ จำกัด อยู่ที่น้ำหนักตัวอักษรขนาดเล็ก เมื่อทำงานกับแบบอักษรปกติน้ำหนักตัวอักษรที่มีอยู่จะได้รับในทวีคูณของ 100 โดยทั่วไป 400 อาจเป็นน้ำหนักปกติ 300 น้ำหนักเบาและ 700 น้ำหนักตัวหนา - มีครอบครัวที่แตกต่างกันจัดหาน้ำหนักมากขึ้นหรือน้อยกว่า แบบอักษรตัวแปรมีแกนของการเปลี่ยนแปลงซึ่งทำให้เรามีช่วงของค่าสำหรับคุณสมบัติเช่นน้ำหนักตัวอักษร แบบอักษรอาจมีแกน 1-900 ซึ่งจะให้เราเข้าถึงน้ำหนัก 900 ที่แตกต่างกัน!

แกนของความแปรปรวนไม่ได้ จำกัด เพียงเล็กน้อยต่อน้ำหนัก แบบอักษรตัวแปรสามารถมีแกนที่แตกต่างกันสำหรับ x-height, เอียง, serif ความยาวและความคมชัด (เพื่อเลือกเพียงตัวอย่างเล็ก ๆ น้อย ๆ ) - หมายความว่าไฟล์แบบอักษรเดียวสามารถให้เราเข้าถึงหลายร้อยหรือแม้กระทั่งหลายพันรูปแบบ! เราสามารถเคลื่อนไหวคุณสมบัติเหล่านี้ทำให้เราสามารถบรรลุผลกระทบที่ยอดเยี่ยมจริงๆ Mandy Michael ( https://codepen.io/mandymichael ) มีการสาธิตความคิดสร้างสรรค์ทั้งหมดที่ทดสอบข้อ จำกัด

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

โปรดทราบหากคุณต้องการใช้แบบอักษรตัวแปรตอนนี้คุณต้องแน่ใจว่าคุณใช้ระบบปฏิบัติการที่ทันสมัย ​​- พวกเขาจะไม่ทำงานกับ OSS ที่มีอายุมากกว่า

การตั้งค่าแบบอักษรแบบอักษร

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

แกนที่ลงทะเบียน

มีห้าแกนที่จดทะเบียนแตกต่างกันซึ่งสอดคล้องกับคุณสมบัติ CSS ต่างๆ แต่ละสิ่งเหล่านี้มีสิ่งที่เรียกว่า "แท็กแกน" แกนที่ลงทะเบียนคือ: เวช (ตัวอักษร - น้ำหนัก), wdth (แบบอักษรยืด) slnt (แบบอักษรสไตล์: เฉียง / มุม), อิตาลี (แบบอักษรสไตล์: อิตาลี), opsz (แบบอักษร - การปรับขนาด) เราสามารถเข้าถึงแกนเหล่านี้ได้ทั้งในทรัพย์สิน CSS หรือด้วย การตั้งค่าแบบอักษรแบบอักษร .

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

แกนที่กำหนดเอง

แกนที่กำหนดเองเป็นแกน bespoke ที่รวมอยู่ในตัวอักษรออกแบบและอาจเป็นอะไรก็ได้เลย พวกเขาอาจรวมถึง (ตัวอย่างเช่น) ความยาว serif, x-height แม้แต่สิ่งที่สร้างสรรค์มากขึ้น (และการพิมพ์น้อยลง) เช่นการหมุน

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

05. ผลกราฟิก

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

ด้วยคุณสมบัติ CSS ผสมผสานโหมดผสม และ พื้นหลังการผสมผสานโหมด เราสามารถบรรลุเอฟเฟกต์ภาพที่คล้าย Photoshop ในเบราว์เซอร์ คุณสมบัติทั้งสองใช้ค่าเดียวกัน แต่ทำงานแตกต่างกันเล็กน้อย

พื้นหลังการผสมผสานโหมด

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

 .my-element {
พื้นหลัง: URL (#myurl),
เชิงเส้น - ไล่โทนสี (45deg, rgba (65, 68,
244, 1), RGBA (203, 66, 244, 0.5))
RGBA (244, 65, 106, 1);
ขนาดพื้นหลัง: ปก;
พื้นหลังการผสมผสานโหมด: หน้าจอ,
คูณ;
} 

ผสมผสานโหมดผสม

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

 .my-element {
พื้นหลัง: RGB (244, 65, 106);
Mix-Blend-Mode: ทวีคูณ;
} 

ตัวกรอง CSS

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

แปลงเป็นระดับสีเทา

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

ตัวกรอง SVG

ตัวกรอง CSS อยู่ในความเป็นจริงตัวกรอง SVG รุ่นที่ง่ายขึ้น css กรอง ทรัพย์สินยังใช้เวลา URL () ฟังก์ชั่นช่วยให้เราสามารถส่งผ่าน URL ไปยังตัวกรอง SVG ตัวกรอง SVG มีประสิทธิภาพมากและอนุญาตให้มีเอฟเฟกต์ภาพที่เหลือเชื่อ แต่พวกเขายังซับซ้อนกว่าฟังก์ชั่นตัวกรอง CSS! Sara Soueidan มีซีรี่ส์บทความที่ยอดเยี่ยมเกี่ยวกับ Codrops หากคุณสนใจที่จะดำน้ำในการเข้ารหัสตัวกรอง SVG ที่กำหนดเองของคุณเอง ตรวจสอบบทความที่ https://tympanus.net/codrops/2019/01/15/svg-filters-101/

การตัดและกาว: เหนือรูปสี่เหลี่ยมผืนผ้า

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

เส้นทาง

ที่ clip-path () คุณสมบัติช่วยให้เราสามารถ "ตัด" องค์ประกอบโดยการกำหนดพา ธ ต้องใช้ฟังก์ชั่นรูปร่างพื้นฐานจำนวนหนึ่ง สิ่งที่ใส่เข้าไป (), วงกลม (), วงรี (), หรือรูปหลายเหลี่ยม () ซึ่งช่วยให้เราสามารถสร้างรูปทรงที่ซับซ้อนได้มากขึ้นโดยใช้คู่ของ XY Co-ordinates เพื่อกำหนดเส้นทาง หรือนอกจากนี้เรายังสามารถส่งผ่านในเส้นทาง SVG โดยใช้ เส้นทาง() ฟังก์ชั่นหรือการใช้งาน URL () เพื่อให้ ID เส้นทาง SVG

ไม่อยู่ในเส้นทาง

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

ภาพหน้ากาก

ภาพหน้ากาก ช่วยให้เราสามารถแสดงและซ่อนส่วนต่าง ๆ ของภาพโดยใช้รูปภาพ (SVG หรือ PNG แบบโปร่งใส) หรือไล่ระดับสีเป็นหน้ากาก ไม่เหมือน เส้นทาง , เราสามารถเพิ่มพื้นผิวให้กับภาพของเราด้วยการปิดบังเนื่องจากแหล่งที่มาของหน้ากากไม่จำเป็นต้องเป็นเส้นทาง - ช่วยให้องศาของความโปร่งใส

06. รูปร่าง CSS

ข้อมูลจำเพาะของรูปร่าง CSS ช่วยให้เราสามารถห่อข้อความรอบรูปทรงเรขาคณิตที่ลอยได้สร้างเลย์เอาต์คล้ายนิตยสารที่น่าสนใจ สิ่งนี้เป็นไปได้โดยใช้ รูปร่างนอก คุณสมบัติ. คล้ายกับ เส้นทาง , เราสามารถให้คุณสมบัตินี้เป็นฟังก์ชั่นรูปร่างพื้นฐาน วงกลม (), วงรี (), intet (), รูปหลายเหลี่ยม () หรือ URL ไปยังเส้นทาง SVG และในความเป็นจริงทั้งสองทำงานในความสามัคคีได้ดีมาก! รูปร่างนอก จะห่อข้อความของเราอย่างมีประสิทธิภาพ แต่จะไม่ส่งผลกระทบต่อองค์ประกอบที่ลอยอยู่ หากเราต้องการให้ข้อความดูเหมือนว่ามันล้อมรอบภาพหรือวัตถุที่ลอยอยู่เราสามารถใช้ค่าเดียวกันสำหรับ เส้นทาง . ใช้ รูปร่าง เพื่อเพิ่มช่องว่างระหว่างเส้นทางรูปร่างและการห่อเนื้อหา ดู สิ่ง & amp; ไร้สาระ ไซต์เพื่อดูว่ารูปร่าง CSS ใช้เพื่อตัดข้อความรอบ ๆ ภาพกลาง

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

07. เลื่อนการหักหลัง

เว็บไซต์หลายแห่งใช้ประโยชน์จากไลบรารี JavaScript เพื่อให้ประสบการณ์การเลื่อนแบบแอปที่เรียบเนียนเป็นเนทีฟซึ่งเนื้อหา "Snaps" เพื่อชี้ไปที่ผู้ใช้เลื่อน ตอนนี้ด้วยสเปค Scroll Snap เราสามารถทำสิ่งนี้ได้ในไฟล์ CSS ของเรา - มีเพียงเล็กน้อยที่จะนำเข้าในโมดูลหนัก JS เพื่อเปิดหน้าของคุณ!

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

Scroll Snapping สามารถมีประสิทธิภาพมากยิ่งขึ้นเมื่อรวมกับค่าทรัพย์สิน CSS ใหม่อื่น - ตำแหน่ง: เหนียว . ค่าตำแหน่งนี้ "Sticks" องค์ประกอบไปยังตำแหน่งที่ระบุในขณะที่เลื่อนภายในคอนเทนเนอร์ - พฤติกรรมอื่นที่ก่อนหน้านี้เป็นไปได้ด้วย JavaScript เท่านั้น ตรวจสอบ Scroll Snap นี้พร้อมตำแหน่ง: ตัวอย่างเหนียวและ intersectionobserver .

08. กริด CSS และเค้าโครง

นักพัฒนา Front-end ได้แฮ็กเค้าโครงที่มีเครื่องมือใดก็ตามที่มีให้ใช้ในเวลานั้น - FlexBox ล่าสุดซึ่งมีระบบกริดที่ทันสมัยจำนวนมากใช้ แต่ FlexBox ไม่เคยถูกออกแบบมาสำหรับการสร้างกริดที่เข้มงวด - วัตถุประสงค์ของมันคือความยืดหยุ่น!

CSS Grid เป็นสเปคแรกที่ออกแบบมาสำหรับเค้าโครงสองมิติทำให้เราสามารถควบคุมการสร้างเค้าโครงและวางรายการทั้งสองแถวและแกนคอลัมน์ การสร้างเค้าโครงที่ตอบสนองด้วยกริดไม่จำเป็นต้องมีการคำนวณ () หรือแฮ็คด้วยระยะขอบเชิงลบ อาวุธลับคือหน่วย FR - หน่วยใหม่พิเศษสำหรับกริด หน่วย FR ขนาดแทร็กกริด (แถวและคอลัมน์) เป็นสัดส่วนของพื้นที่ว่าง มันคำนึงถึงแทร็กคงที่รางน้ำและเนื้อหาใด ๆ จากนั้นกระจายพื้นที่ที่เหลือตาม Jen Simmons ประกาศเกียรติคุณคำว่า "การออกแบบเว็บที่แท้จริง" เพื่ออธิบายยุคใหม่ของเค้าโครงเว็บที่กริด ushers เข้ามา

วิธีใช้กริด CSS

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

 .grid {
จอแสดงผล: กริด;
ตารางแม่แบบ - คอลัมน์: ทำซ้ำ (4, 1fr);
กริดเทมเพลต -ROWS: ทำซ้ำ (4, 200px);
ช่องว่าง: 20px;
} 

เรากำลังใช้ ทำซ้ำ () ฟังก์ชั่นเพื่อให้รหัสกระชับมากขึ้นเป็นทางเลือกให้กับ Longhand (เช่น Grid-Template-Columns: 1FR 1FR 1FR 1FR . ตัวอย่างนี้ยังใช้ชวเลข ช่องว่าง สำหรับ ช่องว่าง และ ช่องว่างคอลัมน์ .

รหัสด้านบนให้เส้นทางสี่แถวสูง 100px สูงและสี่คอลัมน์แทร็กที่แต่ละกรอกสัดส่วนที่เท่ากันของพื้นที่ว่างโดยใช้หน่วย FR

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

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

. item {
ตารางคอลัมน์: 1/4;
กริด - แถว: 2;
} 

กริดให้เรามีหลายวิธีในการวางรายการ: เราสามารถตั้งชื่อเส้นกริดของเราแทน:

 .grid {
จอแสดงผล: กริด;
คอลัมน์เทมเพลตกริด: [เริ่มต้นรูปภาพ] 1FR
 1FR 1FR [เริ่มต้นรูปภาพ] 1FR;
กริดเทมเพลตแถว: 200px [เริ่มต้นภาพ]
 200px 200px [Image-end] 200px;
ช่องว่าง: 20px;
} 

อีกทางหนึ่ง ตารางเทมเพลตกริด ทรัพย์สินช่วยให้เรา "วาด" เค้าโครงกริดด้วยข้อความ

 .grid {
จอแสดงผล: กริด;
ตารางแม่แบบ - คอลัมน์: ทำซ้ำ (4, 1fr);
กริดเทมเพลต -ROWS: ทำซ้ำ (4, 200px);
ช่องว่าง: 20px;
ตารางแม่แบบ - พื้นที่:
. . . .
'ภาพรูปภาพรูปภาพ'
'ภาพรูปภาพรูปภาพ'
. . . .;
} 

การใช้วิธีการใดวิธีหนึ่งเหล่านี้เราสามารถอ้างอิงพื้นที่กริดที่สอดคล้องกันเมื่อวางรายการกริด:

 .Image {
กริด - พื้นที่: ภาพ;
} 

บทความนี้ได้รับการตีพิมพ์ในนิตยสารออกแบบเว็บสร้างสรรค์ นักออกแบบเว็บไซต์ . ซื้อปัญหา 290 ตอนนี้

• 10 CSS Frameworks ที่ดีที่สุดในปี 2019
• วิธีการเพิ่มแอนิเมชั่นเป็น SVG ด้วย CSS
• 52 เครื่องมือออกแบบเว็บเพื่อช่วยให้คุณทำงานอย่างชาญฉลาดในปี 2562