เพื่อนๆ คงจะเคยทำกรอบรูปที่แสดงบนเว็บที่ต้องใช้ Photoshop ช่วยในการสร้างเงาของกรอบรูป หรือทำให้กรอบรูปเป็นมุมมน วันนี้ผมมีตัวอย่างในการทำกรอบรูปดังกล่าวโดยที่ไม่ต้องพึ่ง Photoshop เลยครับ แต่เราก็ต้องมีตัวช่วยทดแทนหน่อยนั่นก็คือ ต้องพี่ง css ครับ ซึ่งการใช้ css ในการสร้างกรอบรูปนั้นจะช่วยให้เว็บเราเร็วขึ้นด้วย เพราะไม่ต้องไปเสียเวลาโหลดรูปภาพมาทำเป็นกรอบ
1. เราด้วย css เลยครับ
.shadow {
-webkit-border-radius: 10px; /* กำหนดรัศมีของมุมครับ */
-khtml-border-radius: 10px; /* กำหนดรัศมีของมุมครับ */
-moz-border-radius: 10px; /* กำหนดรัศมีของมุมครับ */
border-radius: 10px; /* กำหนดรัศมีของมุมครับ */
-moz-box-shadow: 0 0 8px #B6BDC4; /* กำหนดสีของกรอบและเงาครับ */
-webkit-box-shadow: 0 0 8px #B6BDC4; /* กำหนดสีของกรอบและเงาครับ */
box-shadow: 0 0 8px #B6BDC4; /* กำหนดสีของกรอบและเงาครับ */
padding:20px; /* กำหนดระยะห่างจากขอบด้านในของกรอบถึงขอบของรูป���าพ */
}
2. เพิ่ม class ให้กับรูปภาพครับ
<img class="shadow" src="image.gif" alt="ทดสอบกรอบที่ทำจาก css" />
ตัวอย่างครับ
