การเข้ารหัสเมนูนำทาง Breadcrumb ที่สง่างามใน CSS3
เมนูการนำทางและลิงก์อาจเป็นองค์ประกอบอินเทอร์เฟซที่สำคัญที่สุดสำหรับเค้าโครงเว็บ นี่เป็นเพียงช่องทางเดียวสำหรับผู้ใช้ เดินทางระหว่างหน้า และโต้ตอบกับเนื้อหาทั้งหมดที่คุณสร้าง Breadcrumb นำเสนอฟังก์ชันการทำงานที่คล้ายกันพร้อมสิทธิประโยชน์เพิ่มเติม ติดตามตำแหน่งปัจจุบันของคุณ. คุณจะสามารถ แสดงเส้นทางเชื่อมโยงก่อนหน้าทั้งหมด ตามที่ผู้ใช้สำรวจผ่านลำดับชั้นของไซต์ของคุณ.
ในบทช่วยสอนนี้เราจะสร้างเมนูการนำทาง breadcrumb ที่ยอดเยี่ยมพร้อมกับเอฟเฟกต์ CSS3 บางอย่าง สิ่งนี้ได้รับการทดสอบให้ใช้งานได้กับเบราว์เซอร์ที่รองรับ CSS3 ที่สำคัญทั้งหมดแม้แต่เบราว์เซอร์รุ่นเก่าที่ไม่รองรับ CSS3 จะยังคงแสดงผลอย่างถูกต้องในกรณีส่วนใหญ่.
ก่อนที่เราจะดำดิ่งลงไปในโค้ดเราจะพูดถึงฟังก์ชั่นการทำงานของ breadcrumb ของเราก่อนการสอนเต็มรูปแบบที่กระโดด!
เสนอเส้นทาง
เส้นทาง breadcrumb นั้นไม่ซับซ้อนกว่าเมนูอื่น ๆ สไตล์ของเราจะใช้ประโยชน์จากคุณสมบัติ CSS ที่ซับซ้อนกว่าตัวอย่างส่วนใหญ่ แต่เทมเพลตกระดูกของเรายังคงอยู่เพื่อให้คำแนะนำผู้ใช้จากหน้าหนึ่งไปอีกหน้าหนึ่ง.
ในตัวอย่างนี้เราจะสร้างสไตล์ที่คล้ายกันเป็นเมนูสนับสนุนของ Google คุณสามารถดูเมนูของพวกเขาได้ในหน้าสนับสนุน Gmail เพื่อรับทราบว่าเรากำลังมุ่งหน้าไปที่ใด ท้ายที่สุดเราต้องการ มอบประสบการณ์การใช้งานที่ดีที่สุดแก่ผู้ใช้ทุกคน, ไม่ว่าระบบปฏิบัติการหรือซอฟต์แวร์เบราว์เซอร์จะเป็นเช่นไร ตัวอย่างโค้ด 2 แบบที่แตกต่างกันเพื่อรองรับการลดระดับอย่างนุ่มนวลในเบราว์เซอร์รุ่นเก่า.
ครั้งแรกที่ถูกสร้างขึ้นโดยใช้ ภาพพื้นหลังที่กำหนดเอง และ การจัดแนว CSS ที่เหมาะสม. กิจกรรมโฮเวอร์และกิจกรรมที่แอ็คทีฟทั้งหมดสร้างไว้ล่วงหน้าด้วยสไตล์ CSS เพียงไม่กี่ตัว แต่ผู้ใช้ที่ปิดรูปภาพจะไม่สามารถรับเอฟเฟกต์เหล่านี้ได้! นี่คือเหตุผลที่ฉันได้สร้างเมนูที่มีลักษณะคล้ายกับการไล่ระดับสี CSS มุมโค้งมนและเงากล่อง.
หากคุณกังวลเกี่ยวกับการสนับสนุนทั้งสองสไตล์คุณสามารถเลือกระหว่างพวกเขากับเว็บไซต์ของคุณเอง ผู้เข้าชมส่วนใหญ่จะใช้รูปภาพเป็นค่าเริ่มต้น แต่ขุดผ่านเครื่องมือวิเคราะห์เว็บไซต์ของคุณหากคุณต้องการข้อมูลผู้เข้าชมที่แม่นยำยิ่งขึ้น.
คำพูดที่เพียงพอ, กระโดดเข้าโครงการกันดีกว่า! เราจะเริ่มต้นด้วยการสร้างเฟรมเวิร์ก HTML พื้นฐานและเลื่อนไปสู่เอฟเฟกต์สไตล์ที่แตกต่าง ก่อนอื่นเลย คุณต้องดาวน์โหลดภาพ จำเป็นสำหรับโครงการ.
Bare-Bones HTML
ฉันกำลังเริ่มเอกสารด้วย เทมเพลตหน้า HTML5 มาตรฐาน. ซึ่งรวมถึงประเภทหลักเริ่มต้น CSS ที่เชื่อมโยงและองค์ประกอบพื้นฐานทั้งหมด ฉันได้เพิ่มรหัสด้านล่างหากคุณต้องการเริ่มเอกสารของคุณเองด้วยวิธีนี้ โปรดทราบว่ามันจะไม่ส่งผลกระทบต่อการแสดง breadcrumb ของคุณดังนั้นโปรดใช้เทมเพลตหน้าของคุณเองหากคุณต้องการ.
หน้าเริ่มต้น
ฉันจะแบ่งรหัสออกเป็นสองช่วงตึกที่แตกต่างกัน บล็อกแรกที่มีรูปภาพสร้างขึ้นด้วยวิธีที่แตกต่างกันเล็กน้อยตามด้วยเมนูของเราที่ไม่มีรูปภาพ แต่ละชุดจะได้รับของตัวเอง ID เพื่อให้เราสามารถระบุเนื้อหาได้ง่ายขึ้นมาก หากคุณเป็นแฟนของ jQuery ด้วยคุณสามารถใช้ #ID ตัวเลือก เพื่อจัดการองค์ประกอบ DOM ภายในทั้งหมด.
ก่อนอื่นเรามี มี div ด้วยรหัส “เกล็ดขนมปัง“. ในไฟล์ตัวอย่างฉันใช้ตัวนี้เพื่อแยกรหัสของเราและย้ายมันไปทั่วหน้าด้วยส่วนต่างที่เพิ่มเข้ามา คุณสามารถลบ div ภายนอกนี้ได้ แต่คุณจะต้องปรับสไตล์ทุกอย่างเพื่อให้พอดีกับเทมเพลตใหม่ มันไม่เจ็บเลยที่จะออกจากตู้คอนเทนเนอร์เพราะคุณจะสามารถควบคุมตำแหน่งได้ง่ายกว่ามาก.
ภายในฉันได้สร้าง breadcrumbs โดยใช้รายการที่ไม่ได้เรียงลำดับ มีวิธีที่ไม่ซ้ำกันมากมายในการปรับแต่งรายการ HTML ที่มีสไตล์และ breadcrumb เป็นเพียงหนึ่งในนั้น คุณอาจสังเกตเห็นว่าฉันได้รับรายการเริ่มต้น ชั้น ของ “เป็นครั้งแรก“. นี่เป็นสิ่งจำเป็นสำหรับการขยายเพิ่มเติมบางอย่างเพื่อให้รายการเมนูอยู่ในบรรทัด นอกจากนี้ยังมีขนาดเล็ก บล็อกช่วง มีการเพิ่มดังนั้นเราจึงมีเส้นขอบด้านซ้ายที่เหมาะสมซึ่งไม่ซ้อนทับภาพพื้นหลัง.
นอกจากนี้แต่ละลิงค์สมอจะถูกปลูกด้วยจำนวนที่ลดลงสำหรับ ดัชนี z คุณสมบัติ ใช้ภาพที่เราต้องการ ให้แต่ละลิงค์ของเราทับซ้อนกัน เพื่อแสดงลูกศรเกล็ดขนมปังอย่างถูกต้อง วิธีที่ง่ายที่สุดในการบรรลุเป้าหมายนี้คือ ปรับดัชนี z ดังนั้นแต่ละลิงก์จะซ้อนทับหน้าถัดไป ฉันเริ่มต้นด้วย 9 และทำงานจากที่นั่น แต่ถ้าคุณมีลิงค์มากขึ้นในเมนูของคุณให้เริ่มด้วยจำนวนเต็มที่สูงกว่า.
เมนูที่ไม่มีรูปภาพ
ไปยัง ลดระดับ breadcrumb ของเราอย่างงดงาม เราต้องการชุดรายการ HTML ที่สอง หากคุณกำลังพยายามย้อนกลับไปในการนำทางเดียวคุณสามารถใช้ jQuery เพื่อตรวจหาตัวแทนเบราว์เซอร์และใช้ ID ตามนั้น น่าเสียดายที่นี่ไม่น่าเชื่อถือเสมอไป (สำหรับผู้ใช้มือถือบางราย) อีกวิธีคือ รวมสไตล์ชีท IE ที่เฉพาะเจาะจง และ ซ่อนหรือแสดงว่าเมนูใดทำงานได้ดีที่สุด - แต่แน่นอนว่าตัวเลือกนี้มีไว้สำหรับ Internet Explorer เท่านั้น.
breadcrumb2 เป็น ID ใหม่ของเราที่ใช้กำหนดเป้าหมายเมนูที่ไม่มีรูปภาพ การรักษาด้วยรูปแบบนี้ที่ฉันใช้ crumbs2 เป็นคลาสสำหรับรายการที่ไม่ได้เรียงลำดับ โปรดทราบว่าเหตุผลที่เราใช้ ชั้นเรียน สำหรับมัน ความเรียบง่ายเพื่อทำซ้ำเมนูเหล่านี้, ดังนั้นเมื่อคุณต้องการ breadcrumbs ที่แตกต่างกันเล็กน้อยในหน้าของคุณด้วยคลาสเหล่านี้สิ่งนี้จะไม่เป็นปัญหา.
เราได้เก็บรักษา .เป็นครั้งแรก ชั้นเรียน แต่ต่อท้าย .สุดท้ายชั้นเรียนไปยังรายการสุดท้าย หากไม่มีภาพเราไม่สามารถทำซ้ำลูกศรสำหรับแต่ละรายการในเมนูการนำทางดังนั้นฉันจึงใช้บางอย่าง มุมโค้งมน เพื่อเพิ่มเมนูรอง. .เป็นครั้งแรก ชั้นและ .สุดท้าย จัดการกับรัศมีเส้นขอบที่ขอบเมนูของเราเพื่อสร้างสไตล์เว็บ 2.0 ที่ดูเท่ห์.
CSS ภาพพื้นหลังเลื่อน
สำหรับเอฟเฟกต์ที่เรียบง่ายกว่านี้ฉันได้ผสมผสานเกล็ดขนมปังทั้งคู่เข้าด้วยกันเมื่อสร้างคุณสมบัติ สิ่งนี้มีประโยชน์เนื่องจากไม่เพียงช่วยประหยัดพื้นที่ แต่เมื่อกลับไปแก้ไขสไตล์ ง่ายต่อการปรับแต่ง รูปลักษณ์ของคุณเอง.
สำหรับทั้ง #breadcrumb และ # breadcrumb2 ฉันได้ตั้งค่า รายการสไตล์: ไม่มี; ดังนั้นรายการภายในทั้งหมดจะไม่มีเครื่องหมาย คุณสามารถทิ้งสิ่งเหล่านี้ไว้ได้หากคุณชอบเอฟเฟกต์ แต่ฉันพบว่า HTML กลายเป็นเรื่องน่าเบื่อหน่ายในการทำงานและมันง่ายมากที่จะสร้างไอคอนใหม่ งั้นเรามาเริ่มกันที่ .crumbs ชั้น.
.crumbs display: block; . crumbs li display: inline; . crumbs li.first padding-left: 8px; . crumbs li a,. crumbs li a: link,. crumbs li a: เยี่ยมชม color: # 666; จอแสดงผล: บล็อก; ลอย: ซ้าย; ขนาดตัวอักษร: 12px; ระยะขอบซ้าย: -13px; การขยาย: 7px 17px 11px 25px; ตำแหน่ง: ญาติ; การตกแต่งข้อความ: ไม่มี; . crumbs li a background-image: url ('… /img/bg-crumbs.png'); พื้นหลังซ้ำ: ไม่ทำซ้ำ; พื้นหลังตำแหน่ง: 100% 0; ตำแหน่ง: ญาติ; . crumbs li a: hover color: # 333; พื้นหลังตำแหน่ง: 100% -48px; เคอร์เซอร์: ตัวชี้; . crumbs li a: active color: # 333; พื้นหลังตำแหน่ง: 100% -96px; . crumbs li.first a span height: 29px; ความกว้าง: 3px; ขอบซ้าย: 1px solid # d9d9d9; ตำแหน่ง: สัมบูรณ์; ด้านบน: 0px; ซ้าย: 0px; เรา ตั้งค่ารายการที่ไม่เรียงลำดับของเราเป็น กลุ่ม ดังนั้นไม่มีอะไรคืบคลานรอบ ๆ บริเวณ ขอให้สังเกตรายการต่างๆ แสดงแบบอินไลน์ ในขณะที่การเชื่อมโยงแต่ละจุดยึดจะได้รับพื้นที่มากขึ้นในการกระจายออกไป เราต้องการพื้นที่ทั้งหมดในเมนูของเราให้สามารถคลิกได้เพื่อให้สิ่งนี้ต้องการ สร้างแองเคอร์ของเราเป็นองค์ประกอบบล็อก.
ฉันใช้รูปที่เรียกว่า BG-crumbs.png สำหรับพื้นหลัง สิ่งนี้เรียกว่าสไปรต์ชีททั่วไปใน CSS หรืออีกวิธีหนึ่งคือ ประตูบานเลื่อน เทคนิค. ซึ่งหมายความว่าเมื่อผู้ใช้เลื่อนหรือคลิกที่ลิงก์เราจะเปลี่ยนตำแหน่งพื้นหลังเพื่อแสดงสไตล์ที่อัปเดต ภาพเดียวนี้มีการออกแบบทั้ง 3 อย่างที่เราจำเป็นต้องสร้างพื้นหลังเกล็ดขนมปังในตำแหน่งที่แตกต่างกันดังนั้นเราจึงสามารถใช้ พื้นหลังตำแหน่ง คุณสมบัติที่จะย้ายตามการโต้ตอบของผู้ใช้.
Custom Effects ด้วย CSS3
การออกแบบ breadcrumb ดั้งเดิมนั้นง่ายกว่ามากในการสร้าง สิ่งนี้สามารถสังเกตเห็นได้เนื่องจากคุณสมบัติ CSS จำนวนมากมีพื้นฐานมากกว่าที่คุณคาดคิด แต่ตอนนี้เราเริ่มที่จะมุ่งเน้นที่การทำเอฟเฟกต์เหล่านี้ซ้ำด้วย CSS3 เท่านั้น!
สไตล์ของแต่ละคนใช้พื้นที่มากดังนั้นฉันจะแบ่งมันออกเป็น 2 บล็อคโค้ด.
.crumbs2 display: block; ระยะขอบซ้าย: 27px; การเติมเต็ม: 0; padding-top: 10px; . crumbs2 li display: inline; . crumbs2 li a,. crumbs2 li a: link, .crumbs2 li a: เยี่ยมชม color: # 666; จอแสดงผล: บล็อก; ลอย: ซ้าย; ขนาดตัวอักษร: 12px; การขยาย: 7px 16px 7px 19px; ตำแหน่ง: ญาติ; การตกแต่งข้อความ: ไม่มี; เส้นขอบ: 1px solid # d9d9d9; ความกว้างชายแดนด้านขวา: 0px; . crumbs2 li a background-image: -webkit-gradient (เส้นตรง, ด้านล่างซ้าย, ด้านบนซ้าย, color-stop (0.45, rgb (241,241,241)), color-stop (0.73, rgb (245,245,245))) ภาพพื้นหลัง: -moz-linear-gradient (ด้านล่างตรงกลาง, rgb (241,241,241) 45%, rgb (245,245,245) 73%); / * สำหรับ Internet Explorer 5.5 - 7 * / ตัวกรอง: progid: DXImageTransform.Microsoft.gradient (startColorstr = # f1f1f1, endColorstr = # f5f5f5); / * สำหรับ Internet Explorer 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # f1f1f1, endColorstr = # f5f5f5)"; . crumbs2 li.first a border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; -webkit-border-top-radius-รัศมี: 5px; . crumbs2 li.last a border-right-width: 1px; เส้นขอบล่างล่างขวารัศมี: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px;
.crumbs2 กำลังใช้เมนู การไล่ระดับสี CSS เพื่อทำซ้ำเอฟเฟกต์พื้นหลัง หากคุณไม่คุ้นเคยกับสิ่งเหล่านี้ฉันขอแนะนำเคล็ดลับ CSS 'ในการไล่ระดับสี CSS3 ซึ่งจะช่วยให้คุณใช้ CSS3 gradients ได้อย่างมีประสิทธิภาพ มีคุณสมบัติเพิ่มเติมอีกสองสามอย่างสำหรับ Microsoft และเบราว์เซอร์ Opera แต่สิ่งเหล่านี้ไม่ได้รับการสนับสนุนอย่างสมบูรณ์ในทุกกรณี ฉันไม่ได้รวมไว้ในรหัสตัวอย่างที่นี่ แต่เป็นการดีที่จะเข้าใจตัวเลือกทั้งหมด.
-WebKit ลาด และ -moz เชิงเส้นลาด เป็นโซลูชั่นหลักที่ทำงานส่วนใหญ่ ฉันได้รวมรหัสดั้งเดิมสำหรับ Internet Explorer รุ่นเก่าแล้วแต่ มันไม่รับประกัน เพื่อแสดงอย่างถูกต้องตลอดเวลา (เรากำลังใช้เทคนิคการเรนเดอร์ภาพอันทรงพลังหลังจากทั้งหมด) โปรดสังเกตว่าฉันได้ตั้งทั้งรหัส RGB และรหัสสีฐานสิบหกระหว่างคุณสมบัติพื้นหลัง คุณสามารถใช้วิธีใดวิธีหนึ่งหรือวิธีอื่นถ้าคุณสะดวกสบายกว่า.
รัศมีชายแดน รหัสนี้ใช้กับการนำทางเส้นทางการนำทางที่สองของเราเท่านั้น สิ่งนี้จะให้เอฟเฟกต์เรียบร้อยที่มุมบนซ้ายและขวาล่างของเมนูเกล็ดขนมปังทั้งหมดของเรา แถบดังกล่าวปรากฏขึ้นมาเกือบจะปรากฏในหน้าเว็บซึ่งเป็นเอฟเฟกต์ที่ยอดเยี่ยมสำหรับเบราว์เซอร์ที่รองรับสไตล์ แต่แท้จริงแล้วครอบคลุมเฉพาะสถานะเริ่มต้นสำหรับลิงก์ของเราเท่านั้น ตอนนี้เรามาสร้างเอฟเฟกต์โฮเวอร์คล้ายกับภาพที่เราใช้ด้านบน.
CSS3 Borders and Shadows
เมื่อใดก็ตามที่ผู้ใช้เลื่อนเมาส์ไปที่ลิงก์เราต้องการอัปเดตบางสิ่ง ก่อนอื่นเราต้อง ทำให้เส้นขอบสีเข้มขึ้นที่ด้านบนและด้านล่างขององค์ประกอบที่ใช้งานอยู่ของเรา. สิ่งนี้สามารถเห็นได้ในภาพเช่นกันสำหรับทั้งสถานะโฮเวอร์และสถานะใช้งาน.
.crumbs2 li a: โฮเวอร์ border-top-color: # c4c4c4; สีเส้นขอบด้านล่าง: # c4c4c4; background-image: -webkit-gradient (เป็นเส้นตรง, ด้านล่างซ้าย, ซ้ายบน, สีหยุด (0.45, rgb (241,241,241)), color-stop (0.73, rgb (248,248,248))) ภาพพื้นหลัง: -moz-linear-gradient (ด้านล่างตรงกลาง, rgb (241,241,241) 45%, rgb (248,248,248) 73%); / * สำหรับ Internet Explorer 5.5 - 7 * / ตัวกรอง: progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1); / * สำหรับ Internet Explorer 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1)"; สี: # 333; -moz-box-shadow: 0px 2px 2px # e8e8e8; -webkit-box-shadow: 0px 2px 2px # e8e8e8; กล่องเงา: 0px 2px 2px # e8e8e8; . crumbs2 li a: active border-top-color: # c4c4c4; สีเส้นขอบด้านล่าง: # c4c4c4; background-image: -webkit-gradient (เส้นตรง, ล่างซ้าย, ซ้ายบน, สีหยุด (0.45, rgb (224,224,224)), สีหยุด (0.73, rgb (235,235,235))) ภาพพื้นหลัง: -moz-linear-gradient (ด้านล่างตรงกลาง, rgb (224,224,224) 45%, rgb (235,235,235) 73%); / * สำหรับ Internet Explorer 5.5 - 7 * / ตัวกรอง: progid: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0); / * สำหรับ Internet Explorer 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0)"; box-shadow: -1px 1px 1px 0px #dadada inset; -webkit-box-shadow: -1px 1px 1px 0px #dadada inset; -moz-box-shadow: -1px 1px 1px 0px #dadada inset; สี: # 333;
ฉันกำลังใช้การไล่ระดับสีรหัสเดียวกันกับที่เราเคยใช้ข้างต้น แต่ครั้งนี้สีแตกต่างกันมากถ้าคุณสังเกตเห็นค่า RGB ของเรา แต่ละสถานะจะทำให้สีข้อความเข้มขึ้น # 333, แต่ตัวอธิบายอื่น ๆ นั้นถูกเปลี่ยนแปลงเล็กน้อยเพื่อให้สอดคล้องกับคำสั่งของผู้ใช้.
เมื่อเลื่อนคุณจะเห็น เงาผลนูน ซึ่งควบคู่ไปกับ พรมแดนที่มืดมิด ให้สไตล์ป๊อปอัพหน้า หากคุณคลิกค้างไว้คุณจะเข้าสู่สถานะใช้งานซึ่งมีคุณสมบัติ พื้นหลังไล่ระดับสีเข้ม. ผลกระทบนี้ทำให้ปุ่มดูเป็นจริง “กด” ในหน้า.
เรายังใช้ กล่องเงา คุณสมบัติจากข้อกำหนด CSS3 ใหม่. -WebKit, -moz, และสไตล์เริ่มต้นจะใช้กับการตั้งค่าเดียวกัน การโฮเวอร์แสดง แสงเงา ออกมาจากด้านล่างของลิงค์ที่เลือก เมื่อเปิดใช้งานเงาจะเกิดขึ้นที่ขอบด้านบนขวาและขอบล่าง ผลกระทบนี้ถูกสร้างขึ้นด้วย สิ่งที่ใส่เข้าไป คำหลักถูกเพิ่มที่ส่วนท้ายของแต่ละบรรทัดคุณสมบัติกล่องเงา เคล็ดลับ CSS อีกครั้งเป็นเพื่อนที่ดีที่สุดของคุณที่นี่พร้อมบทความที่น่าสนใจเกี่ยวกับ box-shadow เนื่องจากพูดถึงเรื่องไวยากรณ์และการใช้งานที่เหมาะสมใน CSS3.
โบนัส: สไตล์เพิ่มเติม
นอกจากโค้ดบทช่วยสอนฉันได้รวมภาพพื้นหลังพิเศษด้วยชุดสีที่ปรับแล้ว ฉันสุ่มตัวอย่างจากพื้นหลังดั้งเดิมและใช้ Adobe Photoshop เพื่อสร้างรูปแบบต่างๆที่คุณสามารถนำไปใช้กับเว็บไซต์ของคุณเอง.
เหล่านี้ ไฟล์โบนัสจะรวมอยู่ในไฟล์ต้นฉบับ ซึ่งคุณสามารถดาวน์โหลดได้ในรูปแบบไฟล์. zip ในส่วนด้านล่าง.
คุณสามารถตรวจสอบภาพด้านบนเพื่อรับทราบสิ่งที่ฉันกำลังพูดถึง หากคุณต้องการเปิดชุดรูปแบบสีเฉพาะ Photoshop> รูปภาพ> การปรับเปลี่ยน> Hue / Saturation เพื่อปรับเปลี่ยนชุดรูปแบบสีให้ตรงกับแม่แบบของคุณเองอย่าลืม ตรวจสอบตัวเลือก Colorize ในบานหน้าต่าง Hue / Saturation หากสีไม่เปลี่ยนเลย.
ข้อสรุป
บทช่วยสอนนี้ควรทำให้คุณคุ้นเคยกับเทคนิค CSS3 ที่ใหม่กว่า เราได้สร้างเมนู breadcrumb ที่ยอดเยี่ยมสองแบบในลักษณะที่คล้ายกันและสร้างขึ้นในลักษณะที่สามารถลดระดับลงอย่างเบราว์เซอร์ในเบราว์เซอร์รุ่นเก่าได้ นอกจากนี้ฉันได้เสนอรหัสตัวอย่างและภาพโบนัสบางอย่างเพื่อให้คุณเล่นด้วย.
คุณชอบสไตล์ที่เราสร้างที่นี่หรือไม่? หรือคุณอาจมีคำถามหรือแนวคิดในการปรับปรุงรหัสการสอน โปรดแบ่งปันความคิดของคุณกับเราในพื้นที่อภิปรายด้านล่างและอย่าลืมดาวน์โหลดไฟล์ต้นฉบับเพื่อให้คุณสามารถเล่นกับตัวอย่าง!
บทแนะนำ CSS3 เพิ่มเติม
อยากได้ CSS3 เพิ่มเติมหรือเปล่า ด้านล่างนี้เป็นบทความของเราเพื่อให้คุณเข้าใจ CSS3 ทั้งในทางทฤษฎีและปฏิบัติ!
- CSS3: สร้างโลโก้ฟีด RSS
- CSS3: สร้างช่องค้นหา
- CSS3: สร้างแบบฟอร์มติดต่อ AJAX
- CSS3: การสร้างเว็บเพจ HTML5 / CSS3
