เอามาจาก PNG drop Shadows

อันดับแรกต้องสร้างไฟล์เงา ให้ใหญ่มากกว่าขนาดภาพ โดยต้องบันทึก transparent color ด้วย

สไตล์ชีตมีเนื้อหาดังนี้

.dropshadow {
  display: table;
  background: url(images/shadow.png) no-repeat bottom right;
  padding: 8px;
  margin: 25px;
}
.dropshadow img {
  position: relative;
  top: -15px;
  left: -17px;
}

ไฟล์ html มีเนื้อหาดังนี้

<div class="dropshadow">
  <img src="http://www.thaitux.info/files/screenshot.png" />
</div>

ได้ภาพดังนี้

ไฟล์เงา shadow.png

.dropshadow2 {
  display: table;
  background: url(images/shadow.png) no-repeat bottom right;
  padding: 0;
  margin: 25px;
}
.dropshadow2 .sh-tr {
  position: relative;
  display: block;
  background: url(images/sh-tr.png) no-repeat top right;
  top: -25px;
  left: -2px;
}
.dropshadow2 .sh-bl {
  position: relative;
  display: block;
  background: url(images/sh-bl.png) no-repeat bottom left;
  top: 20px;
  left: -23px;
}
.dropshadow2 img {
  position: relative;
  top: -20px;
  left: -2px;
}

html เป็นแบบนี้

<div class="dropshadow2"><div class="sh-tr"><div class="sh-bl">
  <img src="http://www.thaitux.info/files/screenshot.png" />
</div></div></div>

ได้ภาพแบบนี้

ไฟล์เพิ่มเติมคือ ไฟล์ภาพหัวมุมบนขวา และหัวมุมล่างซ้าย
คือ sh-tr.png
และ sh-bl.png

*** ทั้งสองรุ่น ทดลองใช้กับ IE ไม่ผ่านครับ ***
ดิ้นรนหาวิธีอื่นต่อ

อันนี้เอามาจาก Onion Skinned Drop Shadows
สไตล์ชีตเป็น

.wrap1, .wrap2, .wrap3 {
  display:inline-table;
  /* \*/display:block;/**/
  }
.wrap1 {
  float:left;
  background:url(images/shadow.gif) right bottom no-repeat;
  }
.wrap2 {
  background:url(images/corner_bl.gif) -4px 100% no-repeat;
  }
.wrap3 {
  padding:0 16px 16px 0;
  background:url(images/corner_tr.gif) 100% -4px no-repeat;
  }
.wrap3 img {
  display:block;
  }

มีแฮคสำหรับ IE for Mac ด้วย

ไฟล์ html เป็น

<div class="wrap1">
 <div class="wrap2">
  <div class="wrap3">
   <img src="http://www.thaitux.info/files/screenshot.png" alt="The object casting a shadow" />
  </div>
 </div>
</div>

ได้ภาพแบบนี้

แจ๋ว เวิร์ค ๆ ๆ