การสร้างปุ่ม 3D อันมหัศจรรย์ (2023)

เมื่อเร็ว ๆ นี้ฉันได้ตระหนักดีว่า: ปุ่มคือ "คุณสมบัตินักฆ่า" ของเว็บ

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

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

ในบทช่วยสอนนี้ เราจะสร้างปุ่ม 3D แปลกๆ:

มีเคล็ดลับหลักอย่างหนึ่งที่เราจะใช้สองสามครั้งในบทช่วยสอนนี้เพื่อสร้างภาพลวงตาของปุ่ม 3D

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

(ลองเลื่อนแถบเลื่อน "เปิดเผย" แล้วโต้ตอบกับปุ่ม!)

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

นี่คือปุ่ม MVP ของเราในโค้ด:

<สไตล์>
 .ผลักดันได้ {
 พื้นหลัง: : hsl(340องศา 100% 32%);
 รัศมีชายแดน: : 12พิกเซล;
 ชายแดน: :ไม่มี;
 การขยายความ: : 0;
 เคอร์เซอร์: :ตัวชี้;
 โครงร่างชดเชย: : 4พิกเซล;
 }
 .ด้านหน้า {
 แสดง: :ปิดกั้น;
 การขยายความ: : 12พิกเซล 42พิกเซล;
 รัศมีชายแดน: : 12พิกเซล;
 ขนาดตัวอักษร: : 1.25อีกครั้ง;
 พื้นหลัง: : hsl(345องศา 100% 47%);
 สี: :สีขาว;
 แปลง: : แปลY(-6พิกเซล);
 }
 .ผลักดันได้:คล่องแคล่ว .ด้านหน้า {
 แปลง: : แปลY(-2พิกเซล);
 }
สไตล์>
<ปุ่ม ระดับ="ผลักดันได้">
 <ช่วง ระดับ="ด้านหน้า">
ผลักฉัน
 ช่วง>
ปุ่ม>

ของเราปุ่มองค์ประกอบให้สีพื้นหลังเบอร์กันดีที่จำลองขอบด้านล่างของปุ่มของเรา นอกจากนี้เรายังตัดเส้นขอบ/ช่องว่างภายในเริ่มต้นที่มาพร้อมกับออกด้วยปุ่มองค์ประกอบ

.ด้านหน้าคือชั้นหน้าของเรา โดยจะมีสีพื้นหลังสีชมพูแดงเข้มสดใส รวมถึงรูปแบบข้อความบางรูปแบบด้วย

เราจะเลื่อนเลเยอร์เบื้องหน้าไปรอบๆแปลงร่าง: แปล. นี่เป็นวิธีที่ดีที่สุดในการบรรลุเอฟเฟกต์นี้ เนื่องจากการแปลงสามารถเร่งด้วยฮาร์ดแวร์ได้

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

เราได้สร้างรากฐานที่มั่นคงแล้ว และตอนนี้ก็ถึงเวลาสร้างสิ่งดีๆ เหนือสิ่งอื่นใด!

เบราว์เซอร์ส่วนใหญ่จะเพิ่มโครงร่างให้กับปุ่มเมื่อมีการคลิก เพื่อระบุว่าองค์ประกอบนั้นได้จับโฟกัสแล้ว

นี่คือลักษณะที่ปรากฏตามค่าเริ่มต้นบน Chrome / MacOS:

ใน MVP ข้างต้น ฉันใช้เสรีภาพในการเพิ่มโครงร่างชดเชยประกาศ คุณสมบัตินี้ทำให้ปุ่มของเรามีบัฟเฟอร์เล็กน้อย:

ซีเอสเอส

นี่เป็นการปรับปรุงอย่างมาก แต่ก็ยังเป็นเรื่องที่ขัดตาอยู่เล็กน้อย นอกจากนี้ มันไม่ทำงานอย่างสม่ำเสมอ: บน Firefoxโครงร่างชดเชยใช้ไม่ได้กับโครงร่าง "โฟกัส" เริ่มต้น

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

โชคดีที่เราสามารถใช้คลาสหลอก CSS ที่หรูหราเพื่อช่วยเราได้::มองเห็นโฟกัสได้

<สไตล์>
 /* CSS ที่เราเห็นก่อนหน้านี้ยังคงอยู่
* กำลังนำไปใช้ มันซุกอยู่.
* แท็บ "CSS" ด้านบน
*/
 .ผลักดันได้:จุดสนใจ:ไม่(:มองเห็นโฟกัสได้) {
 โครงร่าง: :ไม่มี;
 }
สไตล์>
<ปุ่ม ระดับ="ผลักดันได้">
 <ช่วง ระดับ="ด้านหน้า">
ผลักฉัน
 ช่วง>
ปุ่ม>

นั่นเป็นตัวเลือกที่ยอดเยี่ยมมาก ดังนั้นมาแยกย่อยกัน

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

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

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

ดังนั้นในชีวิตจริง ปุ่มต่างๆ จะไม่ยกขึ้นมาให้แตะนิ้วของคุณก่อนที่คุณจะกด

แต่คงจะดีไม่น้อยหากพวกเขาทำอย่างนั้น?

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

<สไตล์>
 .ด้านหน้า {
 จะเปลี่ยน: :แปลง;
 การเปลี่ยนแปลง: :แปลง250นางสาว;
 }
 .ผลักดันได้:โฮเวอร์ .ด้านหน้า {
 แปลง: : แปลY(-6พิกเซล);
 }
 .ผลักดันได้:คล่องแคล่ว .ด้านหน้า {
 แปลง: : แปลY(-2พิกเซล);
 }
สไตล์>
<ปุ่ม ระดับ="ผลักดันได้">
 <ช่วง ระดับ="ด้านหน้า">
ผลักฉัน
 ช่วง>
ปุ่ม>

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

พร้อมผ้าห่มการเปลี่ยนแปลง: แปลง 250msเราได้ใส่แอนิเมชันให้กับปุ่มของเราแล้ว แต่ก็ยังไม่มีอะไรขัดขวางมากนัก

ลองพิจารณาการดำเนินการต่างๆ ที่สามารถทำได้บนปุ่มนี้:

• ก็กดได้

• ก็สามารถปล่อยได้

• มันสามารถโฮเวอร์ได้

• สามารถออกจาก (เมื่อผู้ใช้เมาส์ออกไป)

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

นี่คือสิ่งที่ดูเหมือน ลองโต้ตอบกับปุ่มเพื่อดูความแตกต่าง:

<สไตล์>
 .ด้านหน้า {
 การเปลี่ยนแปลง: :
แปลง
 600นางสาว
 ลูกบาศก์เบซิเยร์(.3, .7, .4, 1);
 }
 .ผลักดันได้:โฮเวอร์ .ด้านหน้า {
 แปลง: : แปลY(-6พิกเซล);
 การเปลี่ยนแปลง: :
แปลง
 250นางสาว
 ลูกบาศก์เบซิเยร์(.3, .7, .4, 1.5);
 }
 .ผลักดันได้:คล่องแคล่ว .ด้านหน้า {
 แปลง: : แปลY(-2พิกเซล);
 การเปลี่ยนแปลง: :แปลง34นางสาว;
 }
สไตล์>
<ปุ่ม ระดับ="ผลักดันได้">
 <ช่วง ระดับ="ด้านหน้า">
ผลักฉัน
 ช่วง>
ปุ่ม>

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

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

ฉันจะเขียนเพิ่มเติมเกี่ยวกับเส้นโค้งลูกบาศก์เบซิเยร์เร็วๆ นี้ โดยพื้นฐานแล้ว พวกเขาให้เราสร้างเส้นเวลาของเราเอง นี่คือเครื่องมือระดับล่างที่ให้เราตันของการควบคุม

ในกรณีของกราฟ "สมดุล" ของเรา กราฟนี้จะมีความก้าวร้าวมากกว่าคลายออก: :

เมื่อเรากดปุ่มลงไปเราจะสลับไปที่ของเรา:คล่องแคล่วการเปลี่ยนแปลง ฉันเลือกเวลาเปลี่ยนภาพที่รวดเร็วปานสายฟ้าที่ 34ms หรือประมาณ 2 เฟรมที่ 60fps ฉันอยากให้อันนี้รวดเร็วเพราะในชีวิตจริงคนมักจะกดปุ่มแบบนี้!

สุดท้ายของเรา:โฮเวอร์การเปลี่ยนแปลง สถานะนี้จะจัดการกับการดำเนินการสองประการที่แยกจากกัน:

• การเพิ่มขึ้นเมื่อเลื่อนเมาส์ไปเหนือปุ่ม

• การสแน็ปอินกลับหลังปล่อยปุ่ม

ตามหลักการแล้ว ฉันจะเลือกการเปลี่ยนภาพที่แตกต่างกันสำหรับแต่ละการกระทำเหล่านี้ แต่เป็นไปไม่ได้ใน CSS ล้วนๆ ถ้าฉันจริงหรืออยากจะไปให้ไกลกว่านี้ ฉันต้องเขียน JS บางส่วนเพื่อแยกแยะระหว่างรัฐเหล่านี้

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

ท้ายที่สุดแล้ว เส้นโค้งเบซิเยร์จะไม่มีทางมองเลยค่อนข้างเขียวชอุ่มราวกับฟิสิกส์สปริงแต่พวกมันสามารถเข้าใกล้ได้มากพอควร!

ถึงจริงหรือขายสิ่ง "3D" ทั้งหมด เราสามารถเพิ่มเงาได้:

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

เพื่อให้สิ่งนี้ได้ผล เราจะต้องปรับโครงสร้างใหม่เล็กน้อย นี่คือมาร์กอัปสำหรับการตั้งค่าใหม่ของเรา:

html

เมื่อก่อนเราใช้.<ปุ่ม>ตัวเองเป็นชั้นขอบของเรา แต่บัดนี้เราจำเป็นต้องมีเงาเพื่อนั่งด้านล่าง ของเรา<ปุ่ม>จะกลายเป็นกระดาษห่อโดยถือ 3 ชั้นซ้อนกันซ้อนกัน

นี่คือ CSS โดยมีบางสิ่งที่ถูกลบออกเพื่อความกระชับ:

<ปุ่ม ระดับ="ผลักดันได้">
 <ช่วง ระดับ="เงา">ช่วง>
 <ช่วง ระดับ="ขอบ">ช่วง>
 <ช่วง ระดับ="ด้านหน้า">
ผลักฉัน
 ช่วง>
ปุ่ม>

เพื่อซ้อนองค์ประกอบ HTML เราใช้การวางตำแหน่งที่แน่นอน ชั้นสุดท้าย,.ด้านหน้าใช้การวางตำแหน่งแบบสัมพัทธ์ เนื่องจากเราต้องการลูกที่ไหลเข้า 1 ตัวเพื่อให้<ปุ่ม>ความกว้างและความสูง

เราสามารถพึ่งพาคำสั่ง DOM เพียงอย่างเดียว เลขที่ดัชนี zจำเป็นต้องควบคุมลำดับการซ้อน!

ในส่วนของวิธีการตั้งค่าแปลภาษา: เงาของเราเคลื่อนไปในทิศทางตรงกันข้ามจากชั้นหน้าของเรา เงาไม่ได้เคลื่อนที่ไปไกลจากตำแหน่งพื้นฐานมากนัก: ในขณะที่.ด้านหน้าขยับขึ้น 6px.เงาเลื่อนลงเพียง 4px เท่านั้น นี่เป็นตัวเลือกที่เป็นอัตนัย คุณอาจต้องการค่าที่ต่างกัน ขอแนะนำให้ทดลอง!

นอกจากนี้เรายังสามารถเพิ่มการเบลอเล็กน้อยเพื่อให้เงานุ่มนวลและเป็นธรรมชาติมากขึ้น:

ซึ่งสามารถทำได้โดยใช้ตัวกรองภาพเบลอ:

ซีเอสเอส

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

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

นี่คือ CSS สำหรับบิตนี้:

ซีเอสเอส

เราเกือบจะถึงจุดนั้นแล้ว – มาโยนเชอร์รี่ลงบนไอศกรีมใส่ผลไม้นี้แล้วพักสักวัน

รายละเอียดเล็กๆ น้อยๆ สุดท้ายคือเอฟเฟกต์โฮเวอร์เพิ่มเติม:

เมื่อโฮเวอร์ ปุ่มจะสว่างขึ้น ทั้งสองชั้นจะสว่างขึ้น

เราควรจัดการเรื่องนี้อย่างไร? เราสามารถเปลี่ยนสีได้ แต่นั่นจะซับซ้อนเล็กน้อยเนื่องจากการไล่ระดับสีที่เราเพิ่งเพิ่มเข้าไป โชคดีที่เราสามารถใช้ประโยชน์จากตัวกรอง CSS อื่นได้:ความสว่าง.

ซีเอสเอส

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

เมื่อแตะองค์ประกอบแบบโต้ตอบบนอุปกรณ์เคลื่อนที่ เบราว์เซอร์จะกะพริบ "สี่เหลี่ยมการแตะ" ที่ด้านบน:

สังเกตเห็นสี่เหลี่ยมสีเทาที่กะพริบเร็วไหม? สีจะแตกต่างกันไประหว่าง iOS และ Android แต่เอฟเฟกต์จะคงที่

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

เราสามารถลบออกได้ด้วยการประกาศนี้:

ซีเอสเอส

อีกประการหนึ่ง: บน iOS หากกดปุ่มค้างไว้สักครู่ โทรศัพท์จะพยายามเลือกข้อความภายในปุ่ม:

มาทำให้ปุ่มไม่สามารถเลือกได้เพื่อปรับปรุงสถานการณ์นี้:

ซีเอสเอส

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

มันเป็นการเดินทางที่ค่อนข้างนาน แต่ฉันหวังว่าคุณจะยอมรับว่าเราได้สร้างมากปุ่มที่น่าพอใจ

มันยังโอ้อวดมากอีกด้วย คุณอาจต้องการเลือกตำแหน่งที่คุณใช้ปุ่มประเภทนี้ ฉันจะไม่ใช้ปุ่มนี้สำหรับแบนเนอร์ยินยอมคุกกี้ GDPR! แต่สำหรับการกระทำที่ยิ่งใหญ่และน่าตื่นเต้น ตอนนี้คุณมีปุ่มที่ตรงกับ 🎉

หากคุณสนใจที่จะยกระดับทักษะ CSS ของคุณ ฉันเพิ่งเปิดตัวหลักสูตรนี้! ออกแบบมาโดยเฉพาะสำหรับ JS devs หากคุณทำงานกับเฟรมเวิร์กเช่น React หรือ Vue และคุณไม่รู้สึกสบายใจอย่างยิ่งกับ CSS ภารกิจของฉันในปีนี้คือการเปลี่ยนแปลงสิ่งนั้น ก็เรียกว่าCSS สำหรับนักพัฒนาจาวาสคริปต์และศึกษาเพิ่มเติมได้ที่CSS-สำหรับ-js.dev.

✨ นี่คือซอร์สโค้ดสุดท้ายสำหรับปุ่มที่กดได้ขนาดใหญ่ของเรา:

html