*~Nut_kun's blog~*

สวัสดีครับ

พอดีช่วงนี้ว่างๆไม่มีอะไรทำ นับเวลาถอยหลังไปเที่ยวต่างจังหวัด เป็นเวลา4วันนับจากวันเสาร์

อย่างที่ท่านว่า การไปเที่ยวกับครอบครัวเป็นสิ่งที่ดี ถ้ามันไม่มีปัญหาเรื่องเมารถน่ะนะครับ

คืออย่างงี้นะครับ ผมไม่ค่อยนั่งรถไปไหนไกลๆบ่อยนัก จึงไม่มีความเคยชินกับมัน ครั้งก่อนนี้

ผมไปเที่ยวต่างจังหวัดที่...อะไรน้า....โอ๊ะ....ภูเรือมั้งถ้าจำไม่ผิด....เมาครับเมา ทั้งๆที่ผมจะได้สนุกกับครอบครัว

กับทำให้ครอบครัวหมดสนุกไปด้วย ที่ต้องมานั่งดูแลผมเป็นระยะ งิ~

ผมกลัวว่าครั้งนี้จะไม่เป็นเหมือนเดิม หวังว่านะ...

เอ้ย~เรื่องของเรื่องมันไม่ใช่ไปเที่ยวต่างจังหวัดนิหน่า มันHow to CSS commentboxต่างหาก XD~

อย่างที่ว่า ผมว่างๆก็เลยเอาความรู้เล็กๆน้อยๆจากการมั่วCSSเป็นระยะๆ Code จึงอาจดูแปลกกว่าชาวบ้าน

นิดๆหน่อยๆ แต่ให้ผลเหมือนเดิมแน่นอน เอาล่ะมาดูกันในกล่องCommentผมมีอะไรบ้าง

ใช่ครับ มีตัวการ์ตูนน่ารักจากเกมYogurting 1ตัวข้อความในกล่องใส่ข้อความ กับสีขอบ

มันมาได้ไง? ง่ายๆครับจากการใส่ CSS ไง

มาเริ่มที่ตัวการ์ตูนก่อน นี่คือภาพที่ผมใช้

http://nutkun.exteen.com/images/Commen.png

จะเห็นว่าผมเผื่อตัวละครไปทางซ้ายเล็กน้อย เพื่อไม่ให้มันโดนทับกับกล่องComment

***จริงๆมันมีวิธีแก้อีกอย่าง คือทำให้กล่องข้อความใส หรือเลื่อนไปทางอื่น ตรงนี้ผมยังทำไม่เป็น...

***หรือจะใช้วิธีทำกล่องให้ใสได้ด้วย Codeนี้

filter:alpha(opacity:50);>>IE

filter:alpha(opacity:0.5);>>FF

credit คุณ Hozenki ครับ

ได้ภาพแล้วมาหาบรรทัดCodeที่เราจะยัดใส่เข้าไปกัน

#commentform{
width:100%;
background:#EEE;
float:left;
}

เห็นนี่มั้ยครับ เข้าไปที่หน้าต่าง CSS แล้วหาบรรทัดแบบนี้ให้เจอ

เมื่อพบแล้ว ให้ทำการลบรหัสสีหลัง Background ออกแล้วใส่ Urlวงเล็บแทน

background:url()

เช่นนี้ครับ ภายในวงเล็บให้นำUrlภาพที่จัดเตรียมเอาไว้มาใส่ครับ แล้วPreview เพื่อดูผล

----------------------------------------------------------------------------------------

มาต่อกันที่ข้อความในกล่องคอมเม้นกัน ทำอย่างไร~? ง่ายมากครับ

นี่คือภาพที่ผมใช้

http://nutkun.exteen.com/images/theme/Commentbox.png

ถึงมันจะไม่สวย แต่ภาพนี้คือภาพต้นแบบของผม ของจริงรอผมทำเสร็จก่อน

สิ่งแรกหาภาพที่เราจะใส่ก่อนครับ ภาพควรมีขนาดเท่ากับกล่องคอมเม้นต์นะครับ

แล้วเปิดหน้าต่าง CSSเพื่อหาCodeนี้ให้เจอ

#commentform textarea{
width:310px;
height:150px;

หาแบบข้างบนให้เจอ นี่คือCodeในส่วนของกล่องใส่ข้อความผู้เข้ามาคอมเม้นต์ครับ

จะเห็นว่ามันมีขนาด 310x150 ดังนั้นภาพที่นำมาใส่ต้องมีขนาดเท่านี้นะครับ จริงๆมันเพิ่มได้

แต่ขนาดนี้มันก็พอเหมาะดูดีแล้วนะ ผมว่า~

พอเห็นทุกคนจะพูดว่า "ไม่มีBackground ให้ใส่ จะทำยังไงดี?" ง่ายอีกแล้วครับพิมพ์เพิ่มไปเลยระดับนี้แล้ว

พิมพ์Code

background:url()

เหมือนเดิม~ ในวงเล็บให้ใส่ Url ของภาพลงไปครับ แล้วกด Preview เพื่อดูผล

โห~อะไรจะง่ายปานนั้น~ คำพูดแรกของผมหลังจากที่มั่วได้

----------------------------------------------------------------------------------------

พูดถึงสีขอบ

ทุกคนคงรู้จักคำสั่งสำหรับสร้างเส้นใช้มั้ยครับ แบบให้เส้นอยู่ใต้ข้อความเหมือนหัวข้อEntry

(แต่สำหรับบล๊อกผมเป็นสีดำ เส้นเลยน่ารำคาญลบทิ้งไปหมดแล้ว)

ใช่ครับ Codeที่ว่าคือ

border-bottom:1px solid #e4e4e4

นี่เอง~ Border เปิดใน Dictionary แปลว่าเส้นขอบ bottom แปลว่าอยู่ใต้(หมายถึงใต้ข้อความนั่นเอง)

1px คือขนาดเส้น solid แปลว่าแข็ง นั่นคือทำให้เส้นดูแน่นแข็งแรงครับ #e4e4e4 คือรหัสสีครับ

พอผมเจอแบบนี้ ผมจึงเกิดความคิดว่า ถ้านำมาประยุกต์ใช้ล่ะ?

ใช่แล้วสิ่งที่ผมนำมาประยุกต์คือใส่สีขอบกล่อง Comment นี่เอง

เอาล่ะ มาดูวิธีทำกัน ขั้นแรกนี้ไม่เหมือน 2อันบนไม่ต้องหาภาพให้เสียเวลา เพียงแค่หาCodeสีมาก็พอ

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

เมื่อเลือกได้แล้ว ทำไงต่อ.... เข้าหน้าต่างCSSสิ แล้วเลื่อนหา Code บรรทัดนี้

#commentform textarea{
width:310px;
height:150px;

อ่าว~ของเดิมCopy จากข้างบนนี้หว่า<----ทุกคนคิด

ใช่ครับของเดิม.... แต่เราจะใช้เจ้านี้ประยุกต์ใส่สีขอบเอา

เอ๋~Code อะไรน้า~ใส่เส้นใส่สีได้? ใช่แล้วมันอยู่ข้างบนนั่นไง Copy Codeข้างบนนั่นมาใส่ต่อท้ายได้เลย

แบบนี้

#commentform textarea{
width:310px;
height:150px;

border-bottom:1px solid #e4e4e4

แต่พอ Preview อ่าว~ทำไมมันไม่คิดที่อื่น มีแต่ที่ด้านล่างกล่อง

ผมก็บอกแล้วว่า bottom มันแปลว่าใต้ ไม่ใช่รอบทิศ....

ถูกต้อง~เราต้องใส่เพิ่มอีก คราวนี้ต้องเปลี่ยนแค่ bottom ให้เป็นอย่างอื่น

เหลือซ้าย ขวา บน...... แล้วภาษาอังกฤษของซ้าย ขวา บน คืออะไรหว่า???

(ทำยังกับสอนเด็กอนุบาล......<----ทุกคนคิด)

ซ้าย -left

ขวา - Right

บน - Top

ตามนั้น Copy Code ตัวสร้างเส้นเพิ่มขึ้นอีก3Code แล้วนำตัวกำหนดตำแหน่งไปใส่แทนที่ Bottom

แล้ว Preview ดูผล....

เสร็จแล้ว ดูไม่เหมือนใครแน่นอน (แต่ถ้านำเทคนิคนี้ไปใช้กันหลายคน คงซ้ำกันจนไม่แนว)

จะแนวได้จริงๆ ไม่ได้อยู่กับการใส่Code แต่เป็นเทคนิคแต่งภาพครับ แต่งให้เป็นภาพเคลื่อนไหวมาใส่ก็ยังได้

แต่งมันไล่สีอ่อนแก่ก็ยังได้.... แต่Codeมันคืออะไรหว่า..... ผมอยากทำแต่ทำไม่เป็น

จบบท CSS: how to CSS comment box