Blog Map ใส่ Effect ให้รูปภาพและข้อความด้วย CSS
posted on 25 Mar 2007 21:28 by jennessa in Design"พักนี้มักจะตั้งชื่อเรื่องลงท้ายด้วยคำว่า "ด้วย CSS" นั่นก็เพราะไม่รู้จะสื่อยังไงว่าเป็นเรื่องเกี่ยวกับ CSS -__-"
สวัสดีค่ะ ปกติเวลาเขียน blog เราก็จะพิมพ์เป็นตัวอักษรตามปกติ สามารถใส่สี ทำตัวหนา ตัวเอียง ขีดเส้นใต้ข้อความได้ใช่มั้ยคะ จริง ๆ แล้วเราสามารถตกแต่งตัวอักษรได้มากกว่านั้นค่ะ
รูปภาพที่ใส่ใน blog ก็เช่นกัน ใน CSS มีคำสั่งที่สามารถใช้ใส่ effect ให้กับตัวอักษรและรูปภาพได้ ดูตัวอย่างกันเลยดีกว่า (^^)V
Code ที่ใช้ทำตัวอย่างนี้
<DIV STYLE="background:#fff0f5;width:200;height:30;filter:fliph()">Jennessa's Blog</DIV>
ตรงที่ไฮไลท์ไว้ filter:fliph() คือส่วนที่เราจะใส่ effect ให้กับภาพและตัวอักษรนะคะ ส่วน background เจนเนสซ่าใส่ไว้เพื่อให้เห็นตัวอย่างกันชัด ๆ เท่านั้นเอง ข้อความและรูปที่ใช้ ดังข้างล่างค่ะ
Jennessa's Blog
.
ต่อไปมาดู filter แบบต่าง ๆ กันค่ะ
1. filter:fliph() กลับภาพหรือข้อความตามแนวนอน
Jennessa's Blog
.
2. filter:flipv() กลับภาพหรือข้อความตามแนวตั้ง
Jennessa's Blog
.
3. filter:invert()
Jennessa's Blog
.
4. filter:gray()
Jennessa's Blog
.
5. filter:xray()
Jennessa's Blog
.
6. filter:blur(strength=200) strength เลขมากยิ่งเบลอมาก
Jennessa's Blog
.
7. filter:shadow(color=#FFFF00) color ใส่รหัสสีหรือชื่อสีของเงา
Jennessa's Blog
.
8. filter:dropshadow(color=yellow)
Jennessa's Blog
.
วิธีการนำไปใช้ใน blog
1. ในหน้าเขียน blog กดปุ่ม <> เพื่อเข้าสู่ HTML Mode
2. ใส่ code ข้างล่างลงไปค่ะ แล้วเปลี่ยนตรง filter เป็น effect ที่ต้องการ และเปลี่ยนจากคำว่า Jennessa's Blog เป็นข้อความหรือรูปภาพที่ต้องการค่ะ
<DIV STYLE="background:#fff0f5;width:200;height:30;filter:fliph()">Jennessa's Blog</DIV>
3. กดปุ่ม <> อีกครั้งเพื่อกลับสู่ Design Mode
จบแล้วค่ะ (^^)V สามารถดูเรื่องอื่น ๆ เกี่ยวกับ CSS ได้ที่ BlogMap นะคะ ใครติดตรงไหน ทำไม่ได้ ก็คอมเมนต์คำถามไว้ได้เลยค่ะ
ปล. ใน Firefox มองไม่เห็นนะคะ (แถม entry เละไปหมดเลย T^T)
ใส่เข้ามาในบล๊อคได้ด้วย อุ้ว ไว้ต้องลองเล่นดูหน่อยแล้ว ขอบคุณมากกๆนะคะ 
firefox มองไม่เห็นอะครับบ
ปล.เทคนิคดีจังเลยครับ ^^
#1 By meddlesome_ on 2007-03-25 21:32