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

การสร้างกล่องข้อความขอบมน และมีเงาตกทอด

CSS3มีพร็อพเพอร์ตี้ที่ใช้สร้างขอบมนและเงาสำหรับสร้างกล่องข้อความได้เลยขณะที่ในCSS2 การทำขอบมนทำโดยใช้ภาพมาประกอบกันเป็นกล่องข้อความ

เนื้อหาในบทความนี้ได้รับแรงบันดาลใจจาก Arve Bersvendsen. ซึ่งได้เขียน การใช้ CSS ที่น่าสนใจอีกมากมาย สำหรับ CSS3 การสร้างขอบมนและเงานั้นเป็นเรื่องง่ายมาก เช่น หากต้องการให้ย่อหน้าใด มีขอบมนหนาสีแดง สามารถทำได้โดย ใช้คำสั่งเพียงสองบรรทัดใน CSS3 ดังนี้:

P { border: solid thick red;
    border-radius: 1em }

และหากต้องการทอดเงาขนาดครึ่ง em ด้านล่างและขวาของย่อหน้า ทำได้โดยเพิ่มคำสั่งอีกหนึ่งบรรทัด ดังนี้:

P { box-shadow: black 0.5em 0.5em 0.3em }

( ลองทดสอบ ว่าเบราเซอร์ท่านรองรับ CSS3 หรือยัง) หากท่านต้องการใ้ช้งานขอบมนและเงา ในตอนนี้ สามารถทำได้ด้วยเทคนิกด้านล่าง…

สร้างขอบมนและเงาด้วยรูป 5 รูป

ทริคหลักในการทำขอบมนและเงาทำโดยใส่รูปสี่รูปแก่ pseudo-element ('::before' and '::after') อีเลเมนต์ '::before' และ '::after' นั้น สามารถใส่ฉากหน้าและฉากหลังได้ เมื่อรวมกับรูปฉากหลังในอีเลเมนต์หลักอีกหนึ่ง เท่ากับห้ารูป

เราจะสร้างรูปขึ้นมาห้ารูป และใส่รูปสี่รูปไว้ยังขอบทั้งสี่ด้าน โดยรูปฉากหลังของข้อความจะใส่ไว้ยังอีเลเมนต์หลัก ดังต่อไปนี้:

ขอบบนซ้าย:

ขอบด้านบนและขอบขวา:

ส่วนกลางและริมขวา:

ขอบล่างซ้าย:

ริมด้านล่างและขอบล่างซ้าย:

CSS ที่ใช้ในการจัดตำแหน่งรูป:

blockquote {
    max-width: 620px;
    background: url(rs-right.png) right repeat-y }
blockquote::before {
    display: block;
    line-height: 0;
    background: url(rs-topright.png) top right no-repeat;
    content: url(rs-topleft.png) }
blockquote::after {
    display: block;
    line-height: 0;
    background: url(rs-bottomright.png) bottom right no-repeat;
    content: url(rs-bottomleft.png) }

เนื่องจากรูปมีขนาด 620px เราจึงทำกล่องข้อความที่มีขนาดกว้างได้แค่ 620px เพื่อไม่ให้เกิดรอยต่อ โดยใ้ช้พร็อพเพอร์ตี้ 'max-width' กำหนดขนาดความกว้างมากที่สุดไว้ ส่วนพร็อพเพอร์ตี้ 'display: block' ใช้เพื่อไม่ให้รูปฉากหลังและ content ซ้อนทับกัน 'line-height: 0' ใช้เพื่อกำหนดว่าไม่ให้มีที่ว่างก่อนและหลังกล่องข้อความ

ผลลัพธ์

จากคำสั่งข้างต้นเราจะได้ผลดังต่อไปนี้:

ซอร์ส HTML ข้างต้นเป็นดังนี้:

<blockquote>
<p>ท่านเห็นกล่องสีเขียวจางและเงาล้อมรอบข้อความนหรือไม่ ถ้าไม่เห็นแสดงว่าเบราเซอร์ท่านไม่สามารถรองรับพร็อพเพอร์ตี้ content
ได้อย่างสมบูรณ์ (หรืออาจไม่รองรับเลย)
</blockquote>

หากท่านต้องการทดลองดูว่าเบราเซอร์ท่านรองรับการสร้างขอบมนและเงาด้วย CSS3 แล้วหรือยังสามารถ ทดลองได้ที่นี่