ทำกรอบรูปภาพใช้ css แบบง่ายๆ

ในเอนทรี่นี้ ผมจะสอนเทคนิคง่ายๆในการทำกรอบรูป ซึ่งการทำกรอบรูปนั้น มันจะช่วยให้รูปภาพที่เราใช้ประกอบเอนทรี่ดู มีมิติ และดูหรูขึ้นด้วย แต่ที่ผมจะสอนคงจะไม่สอนให้ไปขยาย Canvas แล้วใส่ Effect Stroke ใน Photoshop อะไรนั่นหรอกครับ วิธีนี้ทำได้โดยที่ไม่จำเป็นต้องไปแต่งในโปรแกรมแต่งรูปใดๆเลย เพียงแต่เพิ่มโค้ดลงไปใน css editor ก็เรียบร้อย ที่สำคัญมันง่ายมากๆ เข้าใจไม่ยากด้วยสิ

นี่เป็นภาพตัวอย่างก่อนที่จะใส่กรอบ หรือ เฟรมก็ตามแต่

ทำความเข้าใจกับโค้ด css รูปแบบทั่วไปกันก่อนนะครับจะเป็นลักษณะนี้

img{
padding:4px;
border:4px solid #aaa
}

จากโค้ดข้างบนก็มาดูรูปประกอบการอธิบายโค้ด

อธิบาย จากรูปข้างต้นได้ว่า ค่า padding คือค่าดันออกจากขอบรูปไปด้านละ 4พิกเซล แล้วจึงจะตีกรอบด้วย border ขนาด 4พิกเซลทั้งสี่ด้านด้วยสีรหัส #aaa หรือ #aaaaaa นั่นเอง

ตัวอย่างของรูปที่ใส่กรอบด้วย css ตามค่าข้างต้น หน้าตาแบบนี้

ส่วน css ที่ใช้กับธีม exteen เวอร์ชั่น4 คือ

.entry .post img{
padding:4px;
border:4px solid #aaa
}

และเวอร์ชั่นเก่า

.entrycontent img{
padding:4px;
border:4px solid #aaa
}

ในส่วนของ border เราสามารถปรับค่าสี หรือ แต่งย่อยเป็น border-top, border-right, border-bottom, border-left ได้ ตามความคิดสร้างสรรค์ เช่น

ผมใส่สีใส่ขอบให้แต่ละด้านดูไม่เท่ากัน ก็จะได้หน้าตาที่เปลี่ยนไป นอกจากนี้นะครับ ยังใส่ลูกเล่นขณะที่เลื่อนเมาส์ผ่านรูปได้ด้วยนะ ประมาณนี้

.entry .post img:hover{
padding:4px;
border:4px solid #333
}

อันนี้จะได้อะไรก็ลองไปเล่นดูครับ

ที่สำคัญครับ ทันที่เราเพิ่มโค้ดนี้ลงไป บรรดารูปภาพเก่าๆในเอนทรี่ก่อนหน้าก็จะมีกรอบด้วย! โดยที่ไม่ต้องไปตามแก้ทุกรูป (แท็ก html ต้องถูกด้วยนะครับ)

ที่มา : http://palermos.exteen.com/20080921/css