เว็บสไตล์ชีท
CSS ทิป & ทริค

การสร้างเงาด้วยสไตล์์ชีท

<div class=back>
  <div class=section>
    <h2>Die Rose duftet - doch ob sie empfindet</h2>
    <address>Heinrich Heine (1797-1856)</address>

    <p>Die Rose duftet - doch ob sie empfindet<br>
    ...
  </div>
</div>

ท่านสามารถใช้ DIV ด้านนอกเป็นเงาให้ DIV ที่อยู่ด้านใน ซึ่งจะได้ผลดัง หน้านี้  โดยสร้างแบล็กกราวด์ให้ BODY (เขียวอ่อน ในตัวอย่าง) และให้ DIV ด้านนอกมีฉากหลังที่เข้มกว่า (เขียวเทา) และ DIV ด้านในมีฉากหลังอีกสี (เช่นเหลืองขาว)

body {background: #9db}
div.back {background: #576}
div.section {background: #ffd}

ต่อจากนั้น ใช้ margins และ padding เพื่อเลื่อนตำแหน่ง DIV ด้านในให้ขึ้นบนและเฉียงซ้ายจาก DIV ด้านนอกเล็กน้อย

div.back {padding: 1.5em}
div.section {margin: -3em 0 0 -3em}

และกำหนด margin ของ DIV ด้านนอกไปทางขวาเล็กน้อย และถ้าท่านสร้างซ้อนกัันหลายชั้น ท่านอาจต้องเว้นช่องว่างระหว่างชั้นด้วย

div.back {margin: 3em 0 3em 5em}

หากต้องการใส่ขอบให้ DIVด้านใน ท่านอาจเพิ่ม padding เช่น:

div.section {border: thin solid #999; padding: 1.5em}

จากนั้นปรับแต่งขนาดเงาตามที่ท่านต้องการ

ใส่เงาให้ตัวอักษร

CSS มี property ที่ช่วยเพิ่มเงาให้ตัวอักษร โดยปรับค่าเงาได้สี่อย่างดังนี้: สีของเงา, เลื่อนตำแหน่งเงาแนวนอน (ค่าบวกคือขวา), เลื่อนตำแหน่งเงาแนวตั้ง (ค่าบวกคือล่าง) และการปรับค่าเบลอ (0 เงาแข็ง). ดังตัวอย่าง:

h3 { text-shadow: red 0.2em 0.3em 0.2em }