นี่คือเว็บไซต์ที่สวยงาม: มันเป็นตัวอย่างสำหรับครอบครัวประเภทที่น่ารักมากของ Mass-Driver นพ. นิโครม. มีแอนิเมชั่นและกราฟิกเจ๋งๆ มากมายที่อธิบายคุณสมบัติทั้งหมดภายใน...
หากคุณสงสัยว่าแอนิเมชั่นเหล่านั้นทำงานอย่างไร แท้จริงแล้วมันคือสไตล์ <video>
องค์ประกอบ
มีการออกแบบกราฟิกที่ยอดเยี่ยมมากมายเช่นกัน เช่น การที่ตัวอักษรด้านล่างเลือนหายไป...
CSS เล็กน้อยนั้นเรียบร้อย มันทำให้มั่นใจได้ว่าแต่ละ <h1>
อยู่บนบรรทัดเดียวกับ white-space
จากนั้นตั้งค่าโอเวอร์โฟลว์ที่ซ่อนอยู่เพื่อให้เส้นทางมุ่งหน้าออกไป การเฟดเป็นมารยาทของการไล่ระดับสีเชิงเส้นที่รวมเอาความโปร่งใส ที่จริงแล้วการไล่ระดับสีคือ a mask-image
ในกรณีนี้. นั่นเป็นเครื่องเตือนใจที่ดีว่าการไล่ระดับสี CSS เป็นรูปภาพที่สร้างโดยเบราว์เซอร์
h1 { white-space: nowrap; overflow: hidden; -webkit-mask-image: linear-gradient(to right, black 75%, transparent);
}
ในภาพด้านบน คุณยังสามารถดูว่า Mass-Driver โฆษณาคุณลักษณะ OpenType ของแบบอักษรอย่างไร นั่นคือเศษส่วนหรือตัวอักษรทางเลือกที่ทำให้ข้อความของคุณมีพลังพิเศษ โดยค่าเริ่มต้น ส่วนเหล่านี้แสดงว่าคุณลักษณะนี้คืออะไร แต่เมื่อคุณวางเมาส์เหนือส่วนเหล่านี้ ให้ทำดังต่อไปนี้:
.element { font-feature-setting: unset;
}
ไม่คิดว่าเคยใช้ unset
ก่อนหน้านี้ แต่นี่เป็นสถานที่ที่ดีในการใช้งาน โดยแสดงให้เห็นว่าคุณลักษณะนี้มีลักษณะอย่างไรเมื่ออยู่ด้านหน้า จากนั้นเมื่อคุณวางเมาส์เหนือแสดงว่าค่าเริ่มต้นคืออะไร ของฉลาด.
แต่ส่วนที่ดึงดูดสายตาของฉัน—นอกเหนือจากการพิมพ์ตัวพิมพ์ใหญ่—คือพื้นหลัง ประกอบด้วยสองส่วน: แอนิเมชั่นแวววาวที่ทำให้หน้าดูเหมือนกระดาษ และการไล่ระดับสีที่วางซ้อนกันอยู่ด้านบน และหลังจากสำรวจไปรอบๆ ใน DevTools ฉันก็พบว่าเอฟเฟกต์ที่ส่องแสงเป็นภาพ PNG ที่ background-position
คุณสมบัติย้ายรูปภาพไปรอบๆ เล็กน้อยเพื่อให้เคลื่อนไหวได้เหมือน GIF มองเห็นได้ยากในภาพ ดังนั้นนี่คือตัวอย่างเลียนแบบที่ฉันทำโดยปิดความทึบเพื่อให้มองเห็นได้ง่ายขึ้น:
เห็นความคลุมเครือที่น่ารักนั่นไหม? มันทำให้พื้นหลังมี... พื้นผิว… ที่ฉันไม่ได้เห็นมาเป็นเวลานาน บางทีตั้งแต่ราวๆ ปี 2008 ที่ทุกคนพยายามทำให้ปุ่มดูเหมือนปุ่มอะนาล็อกจริงบนเว็บ เจฟฟ์ครอบคลุมเทคนิคแบบเดียวกัน ย้อนกลับไปสักครู่ซึ่งคุณสามารถเจาะลึกถึงวิธีการทำงาน
อีกส่วนหนึ่งของการออกแบบเว็บไซต์นี้คือการไล่ระดับสีในพื้นหลัง เนียนขนาดนี้ได้ยังไง? Rutherford Craze นักออกแบบที่อยู่เบื้องหลังการออกแบบเว็บอันชาญฉลาดนี้ ทำด้าย อธิบายว่าเขาทำให้เอฟเฟกต์นี้ทำงานในเบราว์เซอร์ได้อย่างไร พระองค์ทรงสร้าง เครื่องมือไล่ระดับ ที่ให้คุณสร้างเอฟเฟกต์ที่คล้ายกันได้:
รัทเธอร์ฟอร์ด พิมพ์ว่า:
การไล่ระดับสี CSS แบบธรรมดาจะวาดเส้นตรงผ่านปริภูมิสี โดยสอดแทรกจากสีเริ่มต้นถึงสีสุดท้ายโดยตรง เครื่องมือนี้ใช้หลักการของเส้นโค้งเบซิเยร์ ซึ่งเป็นพื้นฐานของฟอนต์ดิจิทัล กับการดำเนินการนี้
ด้วยการแนะนำ 'จุดควบคุม' ตามแนวการไล่ระดับสี คุณสามารถควบคุมการแก้ไขได้ละเอียดยิ่งขึ้นและให้ผลลัพธ์ที่ราบรื่นยิ่งขึ้น จากนั้นเครื่องมือจะสุ่มตัวอย่าง 'การไล่ระดับสีเบซิเยร์' เพื่อสร้างการไล่ระดับสีเชิงเส้นที่คุณสามารถใช้ได้ใน CSS
สิ่งที่รัทเทอร์ฟอร์ดอธิบายไว้ข้างต้นคือสิ่งที่เรียกว่า “เกรย์เดดโซน” ของการไล่ระดับสี ซึ่งบ่อยครั้งในการไล่ระดับสีแบบเส้นตรง จะมีสีเทาอยู่ตรงกลาง
รายละเอียดเล็กๆ อีกอย่างที่เกือบจับไม่ได้คือ การนำทางเหนียว: เมื่อคุณโหลดเว็บไซต์เป็นครั้งแรก คุณเพียงแค่เห็นโลโก้ที่ไม่มีส่วนอื่น แต่เมื่อคุณเลื่อนดู คุณจะเห็นการนำทางและล็อคเข้าที่:
สังเกตว่ามีการใช้การวางตำแหน่งแบบปักหมุดในภายหลังเพื่อสาธิตร่ายมนตร์ของฟอนต์อย่างไร
CSS ทำให้สิ่งนี้เป็นเรื่องง่าย ประกาศตำแหน่งติดหนึบบนองค์ประกอบ จากนั้นชดเชยความหนึบหากองค์ประกอบควรเริ่มติดที่จุดใดจุดหนึ่ง
.sticky-thing { position: sticky; top: 75px;
}
เนื่องจากพวกเขาต้องการให้คุณจดจ่อกับตัวอักษรก่อน และไม่ใช่ส่วนอื่นของ UI ทั้งหมด จึงเหมาะสมอย่างยิ่งที่จะปิดการนำทางไปด้านใดด้านหนึ่ง เฉพาะเมื่อคุณต้องการเท่านั้น และนี่ทำให้การออกแบบโดยรวมรู้สึกจดจ่อและตรงไปตรงมาอย่างไม่น่าเชื่อ บางทีแทบจะไม่คุ้มค่าที่จะแสดงความคิดเห็นเลย แต่เมื่อเว็บไซต์ส่วนใหญ่เต็มไปด้วยสิ่งรบกวน ฉันคิดว่าควรค่าแก่การฉลองเว็บไซต์ที่เงียบสงบเช่นนี้
- การโฆษณา
- ทั้งหมด
- ภาพเคลื่อนไหว
- รอบ
- บิต
- Black
- เบราว์เซอร์
- จับ
- จับ
- ตาย
- ออกแบบ
- นักออกแบบ
- รายละเอียด
- ดิจิตอล
- ครอบครัว
- ลักษณะ
- คุณสมบัติ
- ชื่อจริง
- โฟกัส
- เต็ม
- GIF
- ดี
- สีเทา
- ยิ่งใหญ่
- สรุป ความน่าเชื่อถือของ Olymp Trade?
- HTTPS
- ภาพ
- รวม
- IT
- Line
- โหลด
- ล็อค
- โลโก้
- นาน
- ย้าย
- การเดินเรือ
- เรียบร้อย
- ชดเชย
- อื่นๆ
- กระดาษ
- ภาพ
- คุณสมบัติ
- REST
- ความรู้สึก
- เล็ก
- สมาร์ท
- So
- ช่องว่าง
- จุด
- เริ่มต้น
- เวลา
- ต้น
- ด้านบน
- ความโปร่งใส
- ui
- เว็บ
- Website
- เว็บไซต์
- งาน
- โรงงาน
- คุ้มค่า