CSS3

Speech

สวัสดีวันที่ 16 กุมภาพันธ์ 55
up blog อย่างรวดเร็วครับนึกอะไรได้ก็อัพเลยเดี๋ยวหมดมุขบล๊อกมันจะดองเอาครับ
วันนี้ html5 ครับ figure & figcaption

figure tag : เป็น การประกาศเพื่อกำหนด flow content อิสระ เป็นตัวของตัวเอง ไม่ขึ้นกับ Tag ใด มักใช้กับ images, diagrams, photos, code

figcaption tag : เป็น ตัวบรรจุ caption สำหรับ figure tag figcaption element จะต้องวางเไว้ อันดับแรก หรืออันดับสุดท้าย ของ "figure" element. เป็นต้น
ที่มาข้อมูลภาษาไทยจาก :thai-programmer และเว็บอ้างอิง :html5doctor

บ้านๆของผมก็คือ: images, diagrams, photos, code พร้อมกับคำอธิบาย จบ.

จะขอยกตัวอย่างโดยใช้รูปนะครับ แต่ code ยังเป็น xmp tag
<figure><img src=" /*ภาพหรือ code*/ "/> <figcaption ></figcaption> /* ให้ figcaption อยู่ใน figure <a href="#">ชื่อลิงค์</a> </figure> ตัวอย่าง HTML <figure> <img src="http://www.instablogsimages.com/images/2007/12/11/cobra_7949.jpg"/> <figcaption >งูจงอาง (อังกฤษ: King Cobra) จัดอยู่ในไฟลัมสัตว์มีแกนสันหลัง ชั้นสัตว์เลื้อยคลาน เป็นงูพิษขนาดใหญ่ โดยทั่วไปมีความยาวเฉลี่ยประมาณ 2.5 - 4 เมตร</figcaption> <a href="http://th.wikipedia.org/wiki/%E0%B8%87%E0%B8%B9%E0%B8%88%E0%B8%87%E0%B8%AD%E0%B8%B2%E0%B8%87" class="readmore">Read more</a> </figure>
ยังไงก็ดีภาพองค์ประกอบโดยรวมมันก็ยังดูไม่น่าสนใจ โดยจะกำหนด css เข้าเพิ่มเข้าไป เพื่อให้แลดูดี (ในตัวอย่างเป็น fix ให้รูปอยู่พอดีที่ 450px สามารถปรับให้มากหรือน้อยตามแต่บุคคล)

โดยตัวแรกที่จะเข้าไปกำหนดก็คือตัวของ figure นะครับ figure{ background:#ccc; padding:5px 5px 2px 5px; border:solid 1px #fff; box-shadow:0 0 5px #666; text-align:left; width:450px; position:relative /* ใส่ relative เพื่อกำหนดไม่ให้ตัว absolute ตัวต่อไปหลุดกรอบเมื่อใช้ Top Bottom Left Right */ } figure>img{ width:450px; }


โดยตัวที่ 2 จะเข้าไปกำหนดก็คือตัวของ figcaption นะครับ figcaption{ width:440px; position:absolute; font-size:12px; padding:5px; color:#fff; text-shadow:1px 1px 1px #000; position:lerative; background:rgba(0,0,0,.5); bottom:5px; }


วงแดง ตัวลิงค์ จะเห็นว่าลิงค์ มันยังเห่ยๆ อยู่จัดการลิงค์
figure a{ border:solid 1px #ccc; background:rgba(0,0,0,.7); margin:130px 170px; border-radius:5px; color:#fff; font-size:18px; font-weight:bold; text-decoration:none; padding:10px; text-align:center; top:0; left:0; z-index:1; position:absolute; }
.

เพียงแค่นี้ก็สามารถกำหนด figure & figcaption ได้ตัวคุณเองหรือถ้าตรง Read more มันบังภาพ ผมได้ทำอีกตัวเป็น hover ครับ full เลยทีนี้ ติดตามดู code ทั้ง HTML และ css ได้ที >> Fiddle DEMO
cut เอา frame มาให้ดูก่อนครับ

ท้ายนี้ :ขอขอบคุณ ที่มาข้อมูลภาษาไทยจาก :thai-programmer และเว็บอ้างอิง :html5doctor



แก้ไข 16/2/55 - 20:35น. แสดงผลได้ดีที่สุดบน firefox นะครับ (ลืมใส่ transition ตัวอื่นไป)