css: drop shadow อย่างง่าย
Submitted by wd on Tue, 2006-09-12 18:15
Topic:
เอามาจาก 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>
ได้ภาพดังนี้
![](http://www.thaitux.info/files/screenshot.png)
ไฟล์เงา 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>
ได้ภาพแบบนี้
![](http://www.thaitux.info/files/screenshot.png)
ไฟล์เพิ่มเติมคือ ไฟล์ภาพหัวมุมบนขวา และหัวมุมล่างซ้าย
คือ 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>
ได้ภาพแบบนี้
![The object casting a shadow](http://www.thaitux.info/files/screenshot.png)
แจ๋ว เวิร์ค ๆ ๆ
Recent comments