คุณรู้เรื่อง Box Shadow มากแค่ไหน?

คุณรู้เรื่อง Box Shadow มากแค่ไหน?

Box Shadow คืออะไร?

• Box Shadow เป็น Drop Shadow ประเภทหนึ่ง และเป็นรูปแบบหนึ่งของฟิลเตอร์ภาพ
• Drop Shadow เป็นฟิลเตอร์ที่เลื่อนพิกเซลของภาพไปตามแกน x และ y เพื่อสร้างเอฟเฟกต์เงา
• ใน CSS สามารถใช้พร็อพเพอร์ตี filter เพื่อใช้ Drop Shadow ได้

div { 
  filter: drop-shadow(xOffset yOffset rgba(0, 0, 0, 0.5));
}

• CSS รองรับค่า blur เพิ่มเติมซึ่งสามารถนำไปใช้กับ Drop Shadow ได้

div { 
  filter: drop-shadow(xOffset yOffset blurSize rgba(0, 0, 0, 0.5));
}

Box Shadow

• Box Shadow เป็นฟิลเตอร์แบบ Drop ประเภทหนึ่งที่รองรับเฉพาะรูปทรงกล่อง
• Box Shadow ได้เปรียบในแง่ประสิทธิภาพ
• การทำงานของ CSS Box Shadow ใช้การพลิกแพลงทางคณิตศาสตร์เพื่อวาดกล่องมุมโค้งได้อย่างประหยัด
• สามารถซ้อนหลาย Box Shadow เป็นเลเยอร์เพื่อสร้างดีไซน์ที่หลากหลายได้

function randomizeAndColor(e) { 
  randomize(e); 
  const spread = Math.random() > 0.8 ? 2 : 0; 
  const x1 = Math.floor(3 - Math.random() * 6) / (1 + spread); 
  const y1 = Math.floor(3 - Math.random() * 6) / (1 + spread); 
  const y2 = 2 + Math.floor(Math.random() * 4); 
  const blur2 = 8 + Math.floor(Math.random() * 12); 
  e.style.boxShadow = `${x1}px ${y1}px 0px ${spread}px ${getRandomPastelColor()}, 0 ${y2}px ${blur2}px #0006`;
}

วิธีใช้ Box Shadow แบบผิดๆ

• โดยทั่วไปนักออกแบบจะจัดวางสี่เหลี่ยมโดยใช้ margin, padding และ typography ที่สม่ำเสมอ
• สามารถใช้ Box Shadow เพื่อสร้างเอฟเฟกต์เชิงศิลป์ในรูปแบบต่างๆ ได้
• สามารถใช้ Box Shadow เพื่อสร้างเอฟเฟกต์แอนิเมชันได้

const tick = (timestamp: number) => { 
  gameState.frame++; 
  gameState.deltaTime = Math.min((timestamp - gameState.prevFrameStartTime) / 1000, 0.1); 
  gameState.prevFrameStartTime = timestamp; 
  update(gameState); 
  render(gameState); 
  winContext._gameFrame = window.requestAnimationFrame(tick);
};

วิธีใช้ Box Shadow แบบผิดอย่างร้ายแรง

• สามารถใช้ Box Shadow เพื่อสร้างเอฟเฟกต์ 3D ได้
• สามารถทำแอนิเมชันลูกบอลเด้งได้
• สามารถใช้ Box Shadow เพื่อวาดกลุ่มเมฆของจุดได้

const pixels = await getImagePixels("/images/starry_night_full.jpg", width);
const dx = window.innerWidth / pixels[0].length;
const dy = window.innerHeight / pixels.length;
for (let y = 0; y < pixels.length; y++) { 
  for (let x = 0; x < pixels[0].length; x++) { 
    const px = x * dx + dx / 2, py = y * dy + dy / 2, pz = 60 + Math.random() * 3; 
    state.particles.push({ size: pSize, x: px, y: py, z: pz, ox: px, oy: py, oz: pz, dx: Math.random() * 3, dy: Math.random() * 3, dz: Math.random() * 3, color: pixels[y][x] });
  }
}

Ray Tracing ด้วย Box Shadow

• Ray Tracing เป็นวิธีสร้างภาพที่แม่นยำแต่ช้า
• สามารถนำ Box Shadow มาใช้สร้าง Ray Tracing ได้
• สามารถใช้ Web Worker เพื่อทำ multi-threading ได้

const gameState = { 
  frame: 0, 
  prevFrameStartTime: 0, 
  deltaTime: 0, 
  renderContainerSize: 32, 
  cam: new PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100), 
  spheres: [ 
    { position: new Vector3(0, 1.3, 0), radius: 1.3, material: CreateMat({ color: new Color(1, 0.2, 0.3) }) }, 
    { position: new Vector3(-3, 1.3, 0), radius: 1.3, material: CreateMat({ color: new Color(0.9, 0.9, 0.9), smoothness: 0.9 }) }, 
    { position: new Vector3(0, 10.8, 0), radius: 3.6, material: CreateMat({ color: new Color(0, 0, 0), emissive: new Color(1, 1, 1), emissiveStrength: 8 }) }
  ]
};

# สรุปโดย GN⁺

• Box Shadow เป็น Drop Shadow ประเภทหนึ่ง และมีประโยชน์ในการเพิ่มมิติความลึกให้กับภาพ
• สามารถใช้ CSS เพื่อสร้างเอฟเฟกต์ Box Shadow ได้หลากหลาย และช่วยให้สร้างดีไซน์ที่สร้างสรรค์ได้
• สามารถใช้ Box Shadow เพื่อสร้างเอฟเฟกต์ 3D และแอนิเมชันได้
• การทำ Ray Tracing ด้วย Box Shadow ไม่มีประสิทธิภาพ แต่ก็สามารถทำได้
• บทความนี้สำรวจการใช้ Box Shadow ในแบบสร้างสรรค์และนอกกรอบ เพื่อชี้ให้เห็นความเป็นไปได้ใหม่ๆ ในงานออกแบบ