10 เทคนิคการสร้างสรรค์โดยใช้ CSS3 Box Shadow
เราได้เห็นความก้าวหน้าอย่างมากในการพัฒนาเว็บ CSS3 ในช่วงไม่กี่ปีที่ผ่านมา เว็บไซต์ยอดนิยมทั่วอินเทอร์เน็ตเริ่มมีการผสมผสานสไตล์ที่เป็นเอกลักษณ์เช่นมุมโค้งมนและข้อความค้นหาสื่อที่ตอบสนองต่อมือถือ แต่สิ่งที่สำคัญยิ่งกว่านี้คือการเปิดประตูให้อินเทอร์เฟซที่สร้างสรรค์ถูกสร้างต้นแบบในเวลาไม่กี่นาที.
ในบทความนี้ฉันต้องการแบ่งปัน ตัวอย่างโค้ด 10 รายการที่เกี่ยวข้องกับการออกแบบเงาของกล่อง CSS3 ที่ยอดเยี่ยม. ฉันจะอธิบายวิธีการทำงานของรหัสและวิธีการใช้เงาแต่ละกล่องในเว็บไซต์ของคุณเอง.
สไตล์เหล่านี้ล้วนมาจากการออกแบบที่ยอดเยี่ยมจากเว็บไซต์ยอดนิยมอื่น ๆ นี่เป็นตัวอย่างที่ดีว่าผู้พัฒนาเว็บปัจจุบันกำลังสร้างแนวโน้มที่ส่งผลกระทบต่ออนาคตของการออกแบบเว็บอย่างไร.
1. แถบเครื่องมือคงที่ด้านบน
บริการโซเชียลมีเดียในโรมาเนีย Trilulilu ใช้แถบเครื่องมือที่ลอยอยู่ด้านบนสุดทั่วทั้งเว็บไซต์ สิ่งนี้สามารถสร้างได้อย่างรวดเร็วโดยใช้ ตำแหน่ง: คงที่; สถานที่ให้บริการในองค์ประกอบแถบด้านบนใด ๆ แต่เงากล่องเพิ่มเติมนี้จะมีผลในระดับใหม่ทั้งหมด.
#banner ตำแหน่ง: คงที่; ความสูง: 60px; ความกว้าง: 100%; ด้านบน: 0; ซ้าย: 0; border-top: 5px solid # a1cb2f; พื้นหลัง: #fff; -moz-box-shadow: 0 2px 3px 0px rgba (0, 0, 0, 0.16); -webkit-box-shadow: 0 2px 3px 0px rgba (0, 0, 0, 0.16); กล่องเงา: 0 2px 3px 0px rgba (0, 0, 0, 0.16); ดัชนี z: 999999; #banner h1 ความสูงบรรทัด: 60px;
คุณจะสังเกตเห็นว่ามีการตั้งค่าคุณสมบัติกล่องเงาด้วยการรวมค่าที่ค่อนข้างง่าย เงาจะลดลงใต้กล่องและเบลอ 3px ที่ด้านใดด้านหนึ่ง.
เราสามารถใช้ RGBA () วิธีการใช้ความทึบแสงเล็กน้อยบนเงาดังนั้นองค์ประกอบจะไม่มืดเกินไป มันเป็นการเพิ่มเติมที่ลึกซึ้งซึ่งจะดึงดูดความสนใจของผู้เข้าชมของคุณอย่างแน่นอน.
- การสาธิต
2. ดรอปดาวน์การนำทางย่อย
นี่คือวิธีเงาโฆษณาแบบอื่นที่ใช้กับเมนูย่อยแบบเลื่อนลงแบบสเกลาร์ ผลที่คล้ายกันสามารถเห็นได้ในผู้ประกอบการในขณะที่คุณโฮเวอร์เหนือลิงก์การนำทางหลักอันดับต้น ๆ นี่เป็นเรื่องยุ่งยากเล็กน้อยในการกำหนดค่า แต่ก็คุ้มค่ากับความอดทน.
#bar display: block; ความสูง: 45px; พื้นหลัง: # 22385a; padding-top: 5px; ระยะขอบล่าง: 150px; ตำแหน่ง: ญาติ; #bar ul margin: 0px 15px; font-family: Candara, Calibri, "Segoe UI", Segoe, Arial, sans-serif; #bar ul li background: # 22385a; จอแสดงผล: บล็อก; ขนาดตัวอักษร: 1.2em; ตำแหน่ง: ญาติ; ลอย: ซ้าย; #bar ul a a display: block; สี: # fffff7; line-height: 45px; น้ำหนักตัวอักษร: ตัวหนา; การขยาย: 0px 10px; การตกแต่งข้อความ: ไม่มี; ดัชนี z: 9999; #bar ul a: hover, #bar ul li a.selected color: # 365977; พื้นหลัง: #fff; เส้นขอบบนซ้ายรัศมี: 3px; เส้นขอบบนขวารัศมี: 3px; -webkit-border-top-radius-รัศมี: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; #bar ul .subnav display: block; ซ้าย: 14px; ด้านบน: 48px; ดัชนี z: -1; ความกว้าง: 500px; ตำแหน่ง: สัมบูรณ์; ความสูง: 90px; เส้นขอบ: 1px solid # edf0f3; ขอบด้านบน: 0; การขยาย: 10px 0 10px 10px; ล้น: ซ่อนอยู่; -moz-border-radius-bottomleft: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-bottom-radius รัศมี: 3px; -webkit-border-bottom-right-radius: 3px; เส้นขอบล่างล่างขวารัศมี: 3px; เส้นขอบล่างล่างขวารัศมี: 3px; -moz-box-shadow: 0px 2px 7px rgba (0,0,0,0.25); -webkit-box-shadow: 0px 2px 7px rgba (0,0,0,0.25); กล่องเงา: 0px 2px 7px rgba (0,0,0,0.25); -ms-filter: "progid: DXImageTransform.Microsoft.Shadow (Strength = 3, Direction = 180, Color =" # 333333 ")"; ตัวกรอง: progid: DXImageTransform.Microsoft.Shadow (Strength = 3, Direction = 180, Color = "# 333333");
ลิงค์ nav สามารถจัดรูปแบบเพื่อเปลี่ยนสีเมื่อเลือกหรือเมื่อวางเมาส์เหนือ ฉันยังเพิ่มเส้นขอบที่โค้งมนบางส่วนลงบนลิงก์และบนกล่องเมนูแบบเลื่อนลง สิ่งนี้ให้ความรู้สึกที่ดีกว่าแทนที่จะเป็นขอบแข็ง ๆ ฉันยังใช้ประโยชน์จาก -MS-กรอง และ กรอง คุณสมบัติที่เป็นกรรมสิทธิ์ของ Internet Explorer.
หากคุณตั้งค่าระบบนำทางแบบเต็มคุณจะสามารถเปลี่ยนการตั้งค่าการแสดงผลเป็นไม่มีและซ่อนเมนูเมื่อหน้าโหลด จากนั้นใช้ jQuery บางอย่างคุณสามารถกำหนดเป้าหมายเหตุการณ์. hover () และแสดงแถบย่อยของเนื้อหาที่อัปเดต.
- การสาธิต
3. ปุ่มเงาเงา
นี่อาจเป็นหนึ่งในสไตล์ที่ชื่นชอบในการสร้างเพียงเพราะลักษณะแบบไดนามิกที่ปรากฏบนหน้าเว็บ หากคุณไม่สามารถบอกได้นี่เป็นปุ่มสีน้ำเงินเล็ก ๆ ที่พบในหน้าแรกของ YouTube หลังจากที่คุณลงชื่อเข้าใช้ครั้งแรก.
blues color: #fff; ความกว้าง: 190px; ความสูง: 35px; เคอร์เซอร์: ตัวชี้; font-family: Arial, Tahoma, sans-serif; ขนาดตัวอักษร: 1.0em; น้ำหนักตัวอักษร: ตัวหนา; -moz-border-radius: 2px; -webkit-border-radius: 2px; รัศมี - ชายแดน: 2px; ความกว้างชายแดน: 1px เส้นขอบสี: # 0053a6 # 0053a6 # 000; สีพื้นหลัง: # 6891e7; background-image: -moz-linear-gradient (บนสุด, # 4495e7 0, # 0053a6 100%); background-image: -ms-linear-gradient (บนสุด, # 4495e7 0, # 0053a6 100%); ภาพพื้นหลัง: -o-linear-gradient (บนสุด, # 4495e7 0, # 0053a6 100%); background-image: -webkit-gradient (เส้นตรง, ด้านบนซ้าย, ด้านล่างซ้าย, สีหยุด (0, # 4495e7), สีหยุด (100%, # 0053a6)); background-image: -webkit-linear-gradient (บนสุด, # 4495e7 0, # 0053a6 100%); background-image: linear-gradient (ไปยังด้านล่าง, # 4495e7 0, # 0053a6 100%); ข้อความเงา: 1px 1px 0 rgba (0, 0, 0, .6); -moz-box-shadow: inset 0 1px 0 rgba (256, 256, 256, .35); -ms-box-shadow: inset 0 1px 0 rgba (256, 256, 256, .35); -webkit-box-shadow: inset 0 1px 0 rgba (256, 256, 256, .35); box-shadow: inset 0 1px 0 rgba (256, 256, 256, .35); ตัวกรอง: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 4495e7, EndColorStr = # 0053a6) .blues: โฮเวอร์ สีเส้นขอบ: # 002d59 # 002d59 # 000; -moz-box-shadow: inset 0 1px 0 rgba (256, 256, 256, 0.55), 1px 1px 3px rgba (0, 0, 0, 0.25); -ms-box-shadow: inset 0 1px 0 rgba (256, 256, 256, 0.55), 1px 1px 3px rgba (0, 0, 0, 0.25); -webkit-box-shadow: inset 0 1px 0 rgba (256, 256, 256, 0.55), 1px 1px 3px rgba (0, 0, 0, 0.25); box-shadow: inset 0 1px 0 rgba (256, 256, 256, 0.55), 1px 1px 3px rgba (0, 0, 0, .25); ตัวกรอง: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 3a8cdf, EndColorStr = # 0053a6) background-image: -moz-linear-gradient (บนสุด, # 3a8cdf 0, # 0053a6 100%); background-image: -ms-linear-gradient (บนสุด, # 3a8cdf 0, # 0053a6 100%); background-image: -o-linear-gradient (บนสุด, # 3a8cdf 0, # 0053a6 100%); background-image: -webkit-gradient (เส้นตรง, ด้านบนซ้าย, ล่างซ้าย, สีหยุด (0, # 3a8cdf), สีหยุด (100%, # 0053a6)); background-image: -webkit-linear-gradient (บนสุด, # 3a8cdf 0, # 0053a6 100%); background-image: linear-gradient (ลงล่าง, # 3a8cdf 0, # 0053a6 100%); .blues: active border-color: # 000 # 002d59 # 002d59; -moz-box-shadow: inset 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; -ms-box-shadow: inset 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; -webkit-box-shadow: inset 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; box-shadow: inset 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; ตัวกรอง: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 005ab4, EndColorStr = # 175ea6); background-image: -moz-linear-gradient (ด้านบน, # 005ab4 0, # 175ea6 100%); background-image: -ms-linear-gradient (ด้านบน, # 005ab4 0, # 175ea6 100%); ภาพพื้นหลัง: -o-linear-gradient (ด้านบน, # 005ab4 0, # 175ea6 100%); background-image: -webkit-gradient (เส้นตรง, ด้านบนซ้าย, ล่างซ้าย, color-stop (0, # 005ab4), color-stop (100%, # 175ea6)); background-image: -webkit-linear-gradient (ด้านบน, # 005ab4 0, # 175ea6 100%); background-image: linear-gradient (ไปด้านล่าง, # 005ab4 0, # 175ea6 100%);
รหัสปุ่มทั้งหมดเป็นจำนวนมากที่ต้องดู แต่เรากำลังพยายาม เพื่อรองรับเบราว์เซอร์ให้ได้มากที่สุด. มีเงาข้อความและเงากล่องพร้อมรองรับ MS Internet Explorer 7+ นอกจากนี้เรากำลังตั้งค่า ภาพพื้นหลัง คุณสมบัติที่มีการไล่ระดับสี CSS3 ในช่วงกว้างของคำนำหน้าเฉพาะของผู้ขายที่หลากหลาย.
แต่ถ้าคุณรักสไตล์การออกแบบนี้แล้ว โฮเวอร์และสถานะที่ใช้งานจะดึงดูดความสนใจของคุณ. โดยทั่วไปเรากำลังอัปเดตเส้นขอบเพื่อรวมเงาบางส่วนไว้ในขณะที่คุณกดลงในขณะที่การปรับปรุงการไล่ระดับสีพื้นหลังเพื่อให้เข้มขึ้นเล็กน้อย.
เนื่องจากไม่มีภาพบนปุ่มคุณสามารถอัปเดตค่าฐานสิบหกและ morph สิ่งนี้เพื่อให้กลมกลืนกับรูปแบบสีใด ๆ.
- การสาธิต
4. การแจ้งเตือนเมนู Flyout
ฉันไม่ได้เป็นผู้ใช้ Facebook รายใหญ่ แต่ฉันสังเกตเห็นเทคนิค UI บางอย่างจากการออกแบบใหม่ของพวกเขา เมนู flyout นี้สามารถนำมาเปรียบเทียบกับป๊อปอัพแจ้งเตือนหรือคำขอเป็นเพื่อนของคุณที่พบในหน้าแรก.
.flyout width: 310px; margin-top: 10px; ขนาดตัวอักษร: 11px; ตำแหน่ง: ญาติ; ครอบครัวแบบอักษร: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif; สีพื้นหลัง: สีขาว; การขยาย: 9px 11px; พื้นหลัง: rgba (255, 255, 255, 0.9); เส้นขอบ: 1px solid # c5c5c5; -webkit-box-shadow: 0 3px 8px rgba (0, 0, 0, .25); -moz-box-shadow: 0 3px 8px rgba (0, 0, 0, .25); box-shadow: 0 3px 8px rgba (0, 0, 0, .25); -webkit-border-radius: 3px; -moz-border-radius: 3px; รัศมี - ชายแดน: 3px; .flyout #tip background-image: url ('images / tip.png'); พื้นหลังซ้ำ: ไม่ทำซ้ำ; ขนาดพื้นหลัง: อัตโนมัติ; ความสูง: 11px; ตำแหน่ง: สัมบูรณ์; ด้านบน: -11px; ซ้าย: 25px; ความกว้าง: 20px; .flyout h2 text-transform: ตัวพิมพ์ใหญ่; สี: # 666; ขนาดตัวอักษร: 1.2em; padding-bottom: 5px; ระยะขอบล่าง: 12px; border-bottom: 1px solid #dcdbda; .flyout p padding-bottom: 25px; ขนาดตัวอักษร: 1.1em; สี: # 222; ไม่มีรหัสการคิดใหม่ที่จะแสดงที่นี่จำนวนมาก ฉันกำลังใช้สิ่งเล็ก ๆ .ปลาย คลาสที่มีองค์ประกอบการขยายภายในเพื่อเพิ่มสามเหลี่ยมคำแนะนำเครื่องมือ เป็นไปได้ที่จะสร้างสามเหลี่ยม CSS3 ล้วนๆ แต่วิธีนี้ไม่ง่ายอย่างที่คุณคิด ถ้าคุณชอบวิธีนี้มันอาจคุ้มค่ากับการแฮ็คข้อมูลด้วยกัน แต่คุณสมบัติการหมุน CSS3 ไม่รองรับทุกที่ ในขณะเดียวกันภาพไม่จำเป็นต้องใช้วิธีการทางเลือกใด ๆ.
- การสาธิต
5. Apple Page Wrapper
มีเงากล่อง CSS3 ที่น่าประทับใจมากมายที่คุณสามารถพบได้บนเว็บไซต์ทางการของ Apple ตัวอย่างด้านล่างนี้เป็นคอนเทนเนอร์กล่องขนาดเล็กที่มีช่วงคอลัมน์ไม่กี่ เมื่อมองไปที่เลย์เอาท์ของ Apple คุณจะสังเกตเห็นหลาย ๆ หน้าของพวกเขาที่ประกอบด้วยกล่องหุ้ม.
.applewrap ความกว้าง: 100%; จอแสดงผล: บล็อก; ความสูง: 150px; พื้นหลัง: สีขาว; เส้นขอบ: 1px solid; เส้นขอบสี: # e5e5e5 #dbdbdb # d2d2d2; -webkit-border-radius: 4px; -moz-border-radius: 4px; รัศมีเส้นขอบ: 4px; -webkit-box-shadow: rgba (0, 0, 0, 0.3) 0 1px 3px; -moz-box-shadow: rgba (0,0,0,0.3) 0 1px 3px; box-shadow: rgba (0, 0, 0, 0.3) 0 1px 3px; .applewrap .col float: left; ขนาดกล่อง: ชายแดนกล่อง; ความกว้าง: 250px; ความสูง: 150px; การขยาย: 16px 7px 6px 22px; แบบอักษร: 12px / 18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; สี: # 343434; ขอบขวา: 1px solid #dadada;
คุณสามารถรวบรวมเพจที่คล้ายกันแยกโดยกล่องเนื้อหาที่มีความกว้างและความสูงต่าง ๆ ได้ แม้ว่าฉันจะใส่คอลัมน์ไม่กี่ลงในการสาธิตนี้มันไม่ได้เป็นเทคนิคการจัดรูปแบบที่จำเป็นโดยวิธีการใด ๆ เงาของกล่องจะเหมาะสมที่สุดบนพื้นหลังสีขาว / เทา แต่ฉันคิดว่าการแสดงมากกว่าสีอ่อน ๆ นั้นดูดีทีเดียว.
- การสาธิต
6. กล่องเนื้อหาของ Apple
ช่องเนื้อหาอื่น ๆ ในเว็บไซต์ของ Apple ส่วนใหญ่จะใช้สำหรับการออกแบบคอลัมน์ ส่วนใหญ่จะอยู่ที่ด้านล่างของหน้าจะแสดงดีลและข้อมูลอื่น ๆ ที่เกี่ยวข้อง มันเป็นสไตล์การออกแบบที่แตกต่างอย่างสิ้นเชิงกับเงาของกล่องที่แสดงอยู่ด้านในจากบนลงล่าง.
.applebox width: auto; ความสูง: 85px; ขนาดกล่อง: ชายแดนกล่อง; พื้นหลัง: # f5f5f5; การขยาย: 20px 20px 10px; กำไรขั้นต้น: 10px 0 20px; เส้นขอบ: 1px solid #ccc; รัศมีเส้นขอบ: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -webkit-box-shadow: inset 0px 1px 1px rgba (0, 0, 0, .3); -moz-box-shadow: inset 0px 1px 1px rgba (0, 0, 0, .3); box-shadow: inset 0px 1px 1px rgba (0, 0, 0, .3); .applebox .col width: 140px; ลอย: ซ้าย; กำไรขั้นต้น: 0 0 0 30px;
ฉันไม่คิดว่ารหัสนี้ควรจะยากเกินกว่าที่จะติดตามและคัดลอกไปยังคอนเทนเนอร์อื่น div box-shadow เดียวที่เรากำลังใช้อยู่ สิ่งที่ใส่เข้าไป ด้วยรหัสสี rgba alpha-transparent ดังนั้นแม้ว่าเราจะมีเงาตั้งค่าเป็นสีดำบริสุทธิ์ แต่เราจะแสดงความทึบแสงประมาณ 30% เท่านั้น.
- การสาธิต
7. ลิงค์เด่น
นี่น่าจะเป็นสไตล์เงากล่องโปรดของฉันจากเว็บไซต์ปัจจุบันของ Apple คุณควรหารูปแบบการสาธิตสดของเทคนิคนี้ในหน้า iCloud ด้วยชุดกล่องลิงก์ลอย.
.applefeature สูง: 150px; กำไร: 8px; จัดแนวตั้ง: ด้านบน; จอแสดงผล: บล็อกแบบอินไลน์; .applefeature display: block; ความกว้าง: 168px; ความสูง: 140px; เส้นขอบ: 1px solid #ccc; สี: # 333; การตกแต่งข้อความ: ไม่มี; น้ำหนักตัวอักษร: ตัวหนา; ความสูงของเส้น: 1.3em; พื้นหลัง: # f7f7f7; -webkit-box-shadow: inset 0 1px 2px rgba (0, 0, 0, .3); -moz-box-shadow: inset 0 1px 2px rgba (0, 0, 0, .3); box-shadow: inset 0 1px 2px rgba (0, 0, 0, .3); -webkit-border-radius: 4px; -moz-border-radius: 4px; รัศมีเส้นขอบ: 4px; .applefeature a: hover background: #fafafa; พื้นหลัง: -webkit-gradient (เชิงเส้น, 0% 0%, 0% 100%, จาก (#fff) ถึง (# f7f7f7)); พื้นหลัง: -moz-linear-gradient (100% 100% 90deg, # f7f7f7, #fff); -webkit-box-shadow: inset 0 1px 2px rgba (0,0,0, .3); -moz-box-shadow: inset 0 1px 2px rgba (0,0,0, .3); box-shadow: inset 0 1px 2px rgba (0,0,0, .3); -webkit-border-radius: 4px; -moz-border-radius: 4px; รัศมีเส้นขอบ: 4px; .applefeature a img display: block; กำไร: 26px อัตโนมัติ 4px; .applefeature h4 display: block; ความกว้าง: 160px; ขนาดตัวอักษร: 1.3em; font-family: Arial, Tahoma, sans-serif; สี: # 646464; จัดข้อความ: ศูนย์;
ลิงก์เด่นเหล่านี้ถูกตั้งค่าเป็นความกว้างคงที่และรวมถึงไอคอนและข้อความที่แสดงที่แตกต่างกัน ตัวอย่างของ Apple ใช้เงากล่องคล้ายกันดังที่เราเห็นในกล่องเนื้อหาก่อนหน้า อย่างไรก็ตาม ขณะนี้กล่องทั้งหมดสามารถเปิดใช้งานเป็นลิงก์ได้ ซึ่งรวมถึงทั้ง : เลื่อน และ :คล่องแคล่ว รัฐ มีความยืดหยุ่นมากกับกล่องลิงค์นี้และคุณควรลองเล่นกับซอร์สโค้ด.
เป็นไปได้ที่จะย่อความสูง / ความกว้างให้สั้นลงและสร้างลิงค์เล็ก ๆ สิ่งเหล่านี้อาจเป็นชุดของบทหรือหน้าในบทความหรือคุณอาจสร้างเมนูย่อยให้ จำกัด ด้วยไอคอนลิงก์ มันเป็นชุดของเทคนิค CSS3 ที่ใหม่กว่าซึ่งแสดงให้เห็นว่าคุณมีพลังมากแค่ไหนในฐานะนักออกแบบเว็บไซต์.
- การสาธิต
8. กรอบรูปภาพ
ฉันได้เพิ่มพื้นหลังสีเทาลงบนตัวอย่างนี้เพื่อให้คุณสามารถเห็นลักษณะเงาของกล่องชัดเจนยิ่งขึ้น กล่องนี้คล้ายกับภาพตัวอย่างเด่น ๆ ใน wordpress.com ยกเว้นว่าฉันได้เพิ่มความลึกลงไปในซอร์สโค้ดอีกเล็กน้อย.
.wpframe background: #fff; รัศมี - ชายแดน: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; การขยาย: 8px; -webkit-box-shadow: 1px 2px 1px # d1d1d1; -moz-box-shadow: 1px 2px 1px # d1d1d1; กล่องเงา: 1px 2px 1px # d1d1d1;
เนื่องจากภาพได้รับการขยายขนาดเล็กที่ด้านใดด้านหนึ่งกรอบนี้จะปรากฏเป็นเส้นขอบสีขาวขนาดใหญ่ คุณสามารถอัปเดตสีพื้นหลังได้ตลอดเวลาหรือเพิ่มเส้นขอบภายนอกขนาดเล็กเพื่อแยกภาพออกจากพื้นหลัง แต่รูปแบบที่ค่อนข้างเรียบง่ายนี้สามารถนำไปใช้กับเทคนิคเงาต่างๆของกล่อง ลองเล่นด้วยรหัสและดูว่าคุณจะสามารถปรับปรุงการออกแบบรูปภาพในเว็บไซต์ของคุณเองได้อย่างไร.
- การสาธิต
9. ช่องป้อนข้อมูลที่เรืองแสง
ฉันได้รับแนวคิดนี้หลังจากเยี่ยมชมหน้าเข้าสู่ระบบ Pinterest สองสามครั้ง รูปแบบภาพเคลื่อนไหวของพวกเขาแสดงตัวอย่างฝีปากของเงาอินไลน์หลายกล่องทั้งภายนอกและสิ่งที่ใส่เข้าไป.
.formwrap display: block; ระยะขอบล่าง: 15px; .formwrap label display: inline-block; ความกว้าง: 80px; ขนาดตัวอักษร: 11px; น้ำหนักตัวอักษร: ตัวหนา; สี: # 444; font-family: Arial, Tahoma, sans-serif; .formwrap .shadowfield ตำแหน่ง: ญาติ; ความกว้าง: 250px; ขนาดตัวอักษร: 17px; font-family: "Helvetica Neue", Arial, sans-serif; น้ำหนักตัวอักษร: ปกติ; พื้นหลัง: # f7f8f8; สี: # 7c7c7c; ความสูงของเส้น: 1.4; การขยาย: 6px 12px; เค้าโครง: ไม่มี; การเปลี่ยนแปลง: ความง่ายในการเข้าออกทั้งหมด 0.2 วินาที -webkit-transition: 0.2s ทั้งหมดง่าย in-out 0s; -moz-transition: 0 ทั้งหมด 0.2s ทำให้ง่ายในการออก เส้นขอบ: 1px solid # ad9c9c; เส้นขอบรัศมี: 6px 6px 6px 6px; box-shadow: 0 1px rgba (34, 25, 25, 0.2) ภาพประกอบ, 0 1px #fff; .formwrap .shadowfield: โฟกัส border-color: # 930; พื้นหลัง: #fff; สี: # 5d5d5d; box-shadow: inset 0 1px rgba (34, 25, 25, 0.2), 0 1px rgba (255, 255, 255, 0.6), 0 0 7px rgba (235, 82, 82, 0.5); -moz-box-shadow: inset 0 1px rgba (34, 25, 25, 0.2), 0 1px rgba (255, 255, 255, 0.6, 0.6), 0 0 7px rgba (235, 82, 82, 0.5); -webkit-box-shadow: inset 0 1px rgba (34, 25, 25, 0.2), 0 1px rgba (255, 255, 255, 0.6), 0 0 7px rgba (235, 82, 82, 0.5);
ถึงแม้ว่ารูปแบบเริ่มต้นจะน่าสนใจมาก ผลการเปลี่ยนแปลงในขณะที่คุณมุ่งเน้นไปที่แต่ละช่องใส่. คุณสามารถแท็บระหว่างพวกเขาและดูความแตกต่างทันทีในคุณสมบัติมากมาย เงากล่องภายนอกที่เร่าร้อนถูกนำไปใช้พร้อมกับเงาสิ่งที่ใส่เข้าไปปรับปรุง ยังเป็น สีข้อความจางลงเมื่อคุณมุ่งเน้นไปที่อินพุตเฉพาะนั้นจะจางหายไปเมื่อคุณปรับโฟกัส.
แม้การคัดลอกเอฟเฟกต์เหล่านี้จะช่วยเพิ่มประสบการณ์การใช้งานของผู้ใช้ในฟิลด์ฟอร์มของคุณ ตรวจสอบให้แน่ใจว่าคุณไม่ได้ลงเรือจนเกินไปจนถึงจุดที่แบบฟอร์มของคุณใช้งานได้แทบจะไม่ อย่างไรก็ตามผู้เข้าชมส่วนใหญ่จะเพลิดเพลินไปกับเอฟเฟ็กต์สุนทรียะที่น่าพึงพอใจซึ่งสนับสนุนการมีส่วนร่วมและการมีส่วนร่วมเพิ่มเติมกับเว็บไซต์ของคุณ.
- การสาธิต
10. ปุ่มเงายืดหยุ่น
ปุ่มเงาที่ไม่ซ้ำกันเหล่านี้มีสไตล์ด้วยการเปลี่ยนแปลงช้าในระหว่างการโฮเวอร์และสถานะการใช้งาน คุณสามารถค้นหาตัวอย่างที่คล้ายกันได้ในหน้าแรกของ Mozilla ที่มีขนาดใหญ่ “ดาวน์โหลด Firefox” ปุ่ม. บางส่วนของ กล่องเงา คุณสมบัติจริงรวมสามเงาต่าง ๆ เข้าด้วยกันเป็นคำสั่งเดียว.
.blu-btn display: inline-block; -moz-border-radius: .25em; รัศมีเส้นขอบ: .25em -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), ภาพประกอบ 0 -2px 0 0 rgba (0,0,0,0.2); -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), ภาพประกอบ 0 -2px 0 0 rgba (0,0,0,0.2); box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), ภาพประกอบ 0 -2px 0 0 rgba (0,0,0,0.2); สีพื้นหลัง: # 276195; background-image: -moz-linear-gradient (# 3c88cc, # 276195); พื้นหลังภาพ: -ms-linear-gradient (# 3c88cc, # 276195); background-image: -webkit-gradient (เส้นตรง, ด้านบนซ้าย, ด้านล่างซ้าย, สีหยุด (0%, # 3c88cc), สีหยุด (100%, # 276195)); background-image: -webkit-linear-gradient (# 3c88cc, # 276195); ภาพพื้นหลัง: -o-linear-gradient (# 3c88cc, # 276195); ตัวกรอง: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 3c88cc', endColorstr = '# 276195', GradientType = 0); -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 3c88cc', endColorstr =" # 276195 ", GradientType = 0)"; background-image: linear-gradient (# 3c88cc, # 276195); เส้นขอบ: 0; เคอร์เซอร์: ตัวชี้; สี: #fff; การตกแต่งข้อความ: ไม่มี; จัดข้อความ: ศูนย์; ขนาดตัวอักษร: 16px; การขยาย: 0px 20px; ความสูง: 40px; line-height: 40px; ความกว้างขั้นต่ำ: 100px; ข้อความเงา: 0 1px 0 rgba (0,0,0,0.35); font-family: Arial, Tahoma, sans-serif; -webkit-transition: ทุกเส้นตรง. 2s; -moz-transition: ทุกเส้นตรง. 2s; -o-transition: ทุกเส้นตรง. 2s; -ms-transition: ทุกเส้นเชิงเส้น 0.2 วินาที; การเปลี่ยนแปลง: เชิงเส้นทั้งหมด. S2s .blu-btn: โฮเวอร์, .blu-btn: โฟกัส -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), ภาพประกอบ 0 -2px 0 0 rgba (0,0,0,0.3) สิ่งที่ใส่ 0 12px 20px 2px # 3089d8; -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1) สิ่งที่ใส่เข้าไป 0 -2px 0 0 rgba (0,0,0,0.3), สิ่งที่ใส่เข้าไป 0 12px 20px 2px # 3089d8; กล่องเงา: 0 2px 0 0 rgba (0,0,0,0.1), ภาพประกอบ 0 -2px 0 0 rgba (0,0,0,0.3), ภาพประกอบ 0 12px 20px 2px # 3089d8; .blu-btn: active -webkit-box-shadow: inset 0 2px 0 0 rgba (0,0,0,0.2), สิ่งที่ใส่ 0 12px 20px 6px rgba (0,0,0,0.2), สิ่งที่ใส่เข้าไป 0 2px 2px rgba (0,0,0,0.3); -moz-box-shadow: inset 0 2px 0 0 rgba (0,0,0,0.2), ภาพประกอบ 0 12px 20px 6px rgba (0,0,0,0.2), สิ่งที่ใส่เข้าไป 0 0 2px 2px rgba (0,0, 0,0.3); box-shadow: inset 0 2px 0 0 rgba (0,0,0,0.2), inset 0 12px 20px 6px rgba (0,0,0,0.2), สิ่งที่ใส่เข้าไป 0 0 2px 2px rgba (0,0,0,0.3) ); .grn-btn display: inline-block; -moz-border-radius: .25em; รัศมีเส้นขอบ: .25em -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), ภาพประกอบ 0 -2px 0 0 rgba (0,0,0,0.2); -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), ภาพประกอบ 0 -2px 0 0 rgba (0,0,0,0.2); box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), ภาพประกอบ 0 -2px 0 0 rgba (0,0,0,0.2); สีพื้นหลัง: # 659324; background-image: -moz-linear-gradient (# 81bc2e, # 659324); พื้นหลังภาพ: -ms-linear-gradient (# 81bc2e, # 659324); background-image: -webkit-gradient (เส้นตรง, ด้านบนซ้าย, ล่างซ้าย, สีหยุด (0%, # 81bc2e), สีหยุด (100%, # 659324)); background-image: -webkit-linear-gradient (# 81bc2e, # 659324); ภาพพื้นหลัง: -o-linear-gradient (# 81bc2e, # 659324); ตัวกรอง: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 81bc2e', endColorstr = '# 659324', GradientType = 0); -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 81bc2e', endColorstr =" # 659324 ", GradientType = 0)"; background-image: linear-gradient (# 81bc2e, # 659324); เส้นขอบ: 0; เคอร์เซอร์: ตัวชี้; สี: #fff; การตกแต่งข้อความ: ไม่มี; จัดข้อความ: ศูนย์; ขนาดตัวอักษร: 16px; การขยาย: 0px 20px; ความสูง: 40px; line-height: 40px; ความกว้างขั้นต่ำ: 100px; ข้อความเงา: 0 1px 0 rgba (0,0,0,0.35); font-family: Arial, Tahoma, sans-serif; -webkit-transition: ทุกเส้นตรง. 2s; -moz-transition: ทุกเส้นตรง. 2s; -o-transition: ทุกเส้นตรง. 2s; -ms-transition: ทุกเส้นเชิงเส้น 0.2 วินาที; การเปลี่ยนแปลง: ทุกเส้นเชิงเส้น 0.2 วินาที; .grn-btn: hover, .grn-btn: focus -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), ภาพประกอบ 0 -2px 0 0 rgba (0,0,0 , 0.3), ภาพประกอบ 0 12px 20px 2px # 85ca26; -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1) สิ่งที่ใส่เข้าไป 0 -2px 0 0 rgba (0,0,0,0.3), สิ่งที่ใส่เข้าไป 0 12px 20px 2px # 85ca26; กล่องเงา: 0 2px 0 0 rgba (0,0,0,0.1), ภาพประกอบ 0 -2px 0 0 rgba (0,0,0,0.3), ภาพประกอบ 0 12px 20px 2px # 85ca26; .grn-btn: active -webkit-box-shadow: inset 0 2px 0 0 rgba (0,0,0,0.2), สิ่งที่ใส่ 0 12px 20px 6px rgba (0,0,0,0.2), สิ่งที่ใส่เข้าไป 0 2px 2px rgba (0,0,0,0.3); -moz-box-shadow: inset 0 2px 0 0 rgba (0,0,0,0.2), ภาพประกอบ 0 12px 20px 6px rgba (0,0,0,0.2), สิ่งที่ใส่เข้าไป 0 0 2px 2px rgba (0,0, 0,0.3); box-shadow: inset 0 2px 0 0 rgba (0,0,0,0.2), inset 0 12px 20px 6px rgba (0,0,0,0.2), สิ่งที่ใส่เข้าไป 0 0 2px 2px rgba (0,0,0,0.3) );
ฉันกำลังใช้ช่วงการเปลี่ยนภาพเต็มเป็นเวลา 200 มิลลิวินาทีสำหรับปุ่มโฮเวอร์และปุ่มใช้งาน สิ่งที่ยอดเยี่ยมเกี่ยวกับสไตล์เหล่านี้คือคุณสามารถนำไปใช้กับองค์ประกอบที่คลิกได้เกือบทั้งหมด ปุ่ม, สมอลิงค์, องค์ประกอบของรูปแบบหรือสิ่งอื่นที่คุณคิดว่าเหมาะสม - แม้ว่าคุณควรใช้สไตล์เหล่านี้อย่างกระจัดกระจาย.
ปุ่มแบบนี้มักจะถูกบันทึกอย่างดีที่สุดในลักษณะเดียวกับที่ Mozilla ใช้ แนบสไตล์เหล่านี้ไว้ในบล็อกของคุณที่คุณมีปุ่มสำหรับดาวน์โหลดฟรีหรือสิ่งที่คล้ายกัน. ผู้ใช้ชอบที่จะโต้ตอบกับอินเตอร์เฟสที่ไม่เหมือนใคร และสิ่งนี้มักแปลเป็นเปอร์เซ็นต์ที่สูงขึ้นสำหรับการจัดอันดับการคลิกผ่านของคุณ.
- การสาธิต
ความคิดสุดท้าย
ฉันหวังว่าคุณจะสามารถนำบทเรียนที่ยอดเยี่ยมไปใช้จากเทคนิคการเก็บเงาบนกล่องนี้ มีพื้นที่ต่าง ๆ มากมายที่คุณสามารถมุ่งเน้นไปที่รวมถึงรูปแบบกล่องโมดอลปุ่มแถบเครื่องมือและแม้กระทั่งรูปแบบเว็บไซต์เต็มรูปแบบ.
คุณสามารถใช้เอฟเฟกต์เงาเหล่านี้เป็นส่วนหนึ่งของเว็บไซต์ของคุณเองได้ฟรี มีเทคนิคอื่น ๆ อีกมากมาย แต่ชุดนี้เหมาะสำหรับผู้เริ่มต้นและนักพัฒนาขั้นสูง นอกจากนี้หากคุณมีข้อเสนอแนะหรือคำถามเกี่ยวกับบทความคุณสามารถแบ่งปันกับเราได้ในพื้นที่แสดงความคิดเห็นด้านล่าง.
