ตัวสร้างเงา CSS
เลื่อนแถบปรับแล้วตัวอย่างจะเปลี่ยนตาม ซ้อนหลายชั้นได้เมื่อเงาชั้นเดียวไม่พอ นั่นคือวิธีสร้างความลึกที่นุ่มและดูสมจริงแบบอินเทอร์เฟซจริง
ชั้น
เงาข้อความไม่มีค่าการแผ่และไม่มีโหมดด้านใน — CSS ไม่รับค่าเหล่านี้ และค่าที่เกินมาเพียงค่าเดียวจะทำให้ทั้งประกาศใช้ไม่ได้
ค่าสำเร็จรูป
เงา
- ฟรี
- ไฟล์ไม่ออกจากเครื่องของคุณ
- ไม่ต้องสมัคร
- ไม่จำกัดไฟล์
วิธีใช้
- เลือกว่าจะใส่เงาให้อะไร ระหว่างกล่องกับข้อความ
- ตั้งระยะเยื้อง ความฟุ้ง และสี ตัวอย่างจะวาดใหม่ทันที
- เพิ่มชั้นเงาถ้าต้องการความลึก เงาจางสองหรือสามชั้นดูดีกว่าเงาหนักชั้นเดียว
- คัดลอกบรรทัด CSS ที่อยู่ใต้แผงควบคุม
สิ่งที่ควรรู้
ทำไมเงาข้อความจึงมีค่าให้ตั้งน้อยกว่า
พร็อพเพอร์ตี text-shadow รับเพียงระยะเยื้อง ความฟุ้ง และสี ส่วนการขยายและโหมดเงาด้านในเป็นของ box-shadow เท่านั้น การใส่ค่าเกินมาหนึ่งค่าทำให้ทั้งบรรทัดใช้ไม่ได้ เบราว์เซอร์จะทิ้งมันไปเงียบๆ และเงาก็หายไปทั้งอัน เมื่อสลับไปโหมดข้อความ เครื่องมือนี้จึงซ่อนสองตัวเลือกนั้น แทนที่จะหวังว่าเบราว์เซอร์จะมองข้ามให้
เงาจางหลายชั้นดีกว่าเงาหนักชั้นเดียว
เงาจริงไม่ได้เข้มเท่ากันทั้งผืน แต่เข้มตรงใต้วัตถุแล้วจางลงเมื่อห่างออกไป เงาชั้นเดียวที่ตั้งความฟุ้งไว้มากจะได้วงสีเทารอบๆ ขณะที่เงาสองหรือสามชั้นซึ่งเยื้องต่างกันและความทึบต่ำจะให้ความลึกแบบที่เห็นในอินเทอร์เฟซที่ทำมาอย่างดี เครื่องมือนี้เก็บทุกชั้นแยกจากกัน และบรรทัดที่คัดลอกไปจะเรียงชั้นตามลำดับ
คำถามที่พบบ่อย
ค่าการขยายทำอะไร
มันขยายหรือหดเงาก่อนที่จะใส่ความฟุ้ง ค่าติดลบจะดึงเงาเข้ามาด้านใน เงาจึงไม่ล้นออกด้านข้าง นั่นคือเคล็ดลับของเงาการ์ดที่ดูเรียบร้อย เพราะเงาควรอยู่ใต้กล่อง ไม่ใช่ล้อมรอบกล่อง
ทำเงาด้านในอย่างไร
ติ๊ก «เงาด้านใน» คำสั่ง inset จะปรากฏที่ต้นบรรทัดและเงาจะย้ายเข้าไปในกล่อง นิยมใช้กับปุ่มที่ถูกกดและช่องกรอกข้อมูล ซึ่งความลึกควรอ่านออกว่าเป็นรอยบุ๋ม ไม่ใช่การนูนขึ้น
ทำไมเงาของฉันมองไม่เห็น
ส่วนใหญ่เพราะตั้งความทึบไว้ที่ศูนย์ หรือตั้งระยะเยื้องและความฟุ้งเป็นศูนย์ทั้งคู่ เงาจึงซ่อนอยู่หลังกล่องพอดี อีกกรณีคือกล่องแม่ตั้ง overflow: hidden ไว้ และเงาตกออกไปนอกพื้นที่ที่มองเห็น
ใช้ได้กับทุกเบราว์เซอร์ไหม
ได้ ทั้ง box-shadow และ text-shadow เป็นมาตรฐานมาหลายปีแล้วและไม่ต้องใส่ prefix ค่าที่เครื่องมือนี้สร้างขึ้นเป็น CSS ล้วนโดยไม่มีส่วนขยายเฉพาะเบราว์เซอร์
เครื่องมือที่เกี่ยวข้อง
- สร้างไล่สี CSS ลากแถบเลื่อนแล้วดูแผงด้านบนเปลี่ยนตาม พอได้หน้าตาที่ต้องการ ก็คัดลอกบรรทัดนั้นไปวางในสไตล์ชีตขอ…
- ตัวสร้างพาเลตสี เลือกสีตั้งต้นหนึ่งสี แล้วเครื่องมือจะคำนวณสีที่เหลือให้ตามวงล้อสี คลิกที่ช่องสีใดก็ได้เพื่อคัด…
- จัดรูปแบบ CSS วางสไตล์ชีตลงไป แม้จะมาเป็นบรรทัดเดียวยาว ๆ ก็กลับมาอ่านได้อีกครั้ง แต่ละดีคลาเรชันจะได้บรรทัดข…
- ย่อขนาด CSS วางสไตล์ชีตลงไปแล้วรับกลับมาในรูปที่ถูกบีบแล้ว ตัวนับใต้กล่องแสดงขนาดก่อนและหลัง คุณจึงเห็นได้เ…
- ตัวแปลงรหัสสี พิมพ์สีในรูปแบบที่คุ้นเคยแบบใดก็ได้ เช่น #1f5fd6, 1f5fd6, #1f5 หรือ rgb(31, 95, 214) แล้วรูปแบบ…
- HEX เป็น RGB วางรหัส HEX ลงไปแล้วอ่านค่าช่องสี RGB ได้เลย #1f5fd6 จะกลายเป็น rgb(31, 95, 214) และถ้ารหัสนั้น…
- แปลง RGB เป็น HEX วางค่า rgb(31, 95, 214) ลงไป จะคั่นด้วยจุลภาคหรือเว้นวรรคก็ได้ แล้วรับค่า #1f5fd6 ที่พร้อมใช้ใน…
- ตัวเลือกสี เลื่อนไปบนช่องสี่เหลี่ยมเพื่อเลือกสี หรือจะหยิบสีที่มีอยู่แล้วก็ได้ ทั้งจากรูปภาพด้วยหลอดดูดสี…