ใส่ลูกเล่นให้ช่อง Comment ด้วย CSS ตอนที่ 1

posted on 22 Feb 2007 00:18 by jennessa in Design

เราสามารถตกแต่งส่วนต่าง ๆ ของช่องใส่ comment ได้ด้วยการแก้ไข CSS นะคะ บลอคนี้เป็นตอนที่ 1 ว่าด้วย การเล่นกับ background ค่ะ

จากช่องใส่ comment พื้นขาวธรรมดา ๆ เราสามารถใส่ background น่ารัก ๆ ลงไปได้นะคะ มาดูวิธีการทำกันค่ะ

1. เตรียมรูปที่จะนำมาทำเป็นBG ก่อน เราขอแบ่งรูปที่จะนำมาทำBG เป็นสองแบบนะคะ ได้แก่

รูปที่เป็น Pattern คือ รูปเล็ก ๆ ที่จะนำมาต่อกันซ้ำ ๆ เป็นBG เช่น

รูปใหญ่รูปเดียว ขนาดใกล้เคียงกับช่องใส่ comment เช่น

อย่าลืมนำรูป upload ขึ้นเวบฝากรูปเพื่อให้ได้ URL ของรูปมาก่อนนะคะ

2. ไปที่ แก้ไข CSS ด้วยตัวเอง แล้วหาคำว่า form ดังข้างล่างค่ะ

form {
padding:2px 5px 2px 20px;
margin:10px;
border:1px solid #FFCC00;
font:11px Tahoma,"MS Sans Serif";
background-image: url(http://jennessa.exteen.com/images/commentbg3.gif);
}

ถ้าของใครไม่มีคำว่า background-image ก็ให้เพิ่มไปได้เลยค่ะ ตรงที่ไฮไลท์ไว้ให้ใส่ URL ของรูปBG นะคะ

*** สำหรับคนที่ใช้ภาพใหญ่ภาพเดียวทำเป็น BG ให้เพิ่มโค้ดต่อไปนี้ลงไปใน form ด้วยนะคะ เพื่อให้รูป BG พอดีกับช่อง comment

background-repeat: no-repeat;
width: 400px; //ใส่ความกว้างให้เท่ากับความกว้างของ BG หรือมากกว่า
height: 200px; //ใส่ความสูงให้เท่ากับความสูงของ BG หรือมากกว่า

3. ถ้าต้องการกำหนดความกว้างและความสูงของช่องใส่ comment และทำให้ช่องใส่ comment ใส ให้ copy code นี้ไปใส่ใน CSS ได้เลยค่ะ

textarea {
filter: alpha(opacity=50); //ใส่ค่าได้ตั้งแต่ 0-100ยิ่งค่าน้อย ยิ่งใสมากค่ะ
width: 270px; //กำหนดความกว้างของช่องใส่ comment
height: 120px; //กำหนดความสูงของช่องใส่ comment
}

4. ตัวอย่างช่องใส่ comment ที่ใส่ BG เรียบร้อยแล้ว

BGเป็น Pattern

BGเป็นรูปใหญ่รูปเดียว

เสร็จแล้วค่ะ เพียงแค่นี้ ช่องใส่ comment ก็มีตัวการ์ตูนน่ารัก ๆ อยู่ข้าง ๆ แล้วค่ะ (^ ^)V

บลอคหน้ามาดู Trick ในการเปลี่ยนกรอบของช่องใส่ comment โดยใช้วิธีเปลี่ยน BG ค่ะ กรอบของช่องใส่ comment ก็ไม่จำเป็นต้องเป็นสี่เหลี่ยมเสมอไป :D ติดตามตอนต่อไปนะคะ to be continued...

Tags: background, bg, comment, css, opacity, textarea56 Comments

ขอบคุณมากนะฮับ สำหรับคำแนะนำดีๆ

ไว้คงต้องลองเอาไปทำดูบ้างแล้วสิฮับ

#1 By DDP on 2007-02-22 01:56

อันนี้น่าสนแฮะ ต้องลองทำดูแล้วววว

#2 By worapoj@~@ on 2007-02-22 04:10

ลองทำเสร็จแย้ว .. ขอบคุณครับ

#3 By (¯`•¸®·neo590·) °´¯)* on 2007-02-22 05:59

เคยทำได้นะเนี่ย แต่ว่า exteen ช่วงก่อน ๆ เป็นไรไม่รู้ พอแก้โค๊ดแล้วไม่เปลี่นให้ซักที

จะลองพยายามใหม่นะจ๊ะ

ขอบคุณสำหรับคำแนะนำดีๆ ค๊าบบ

#4 By ~ :: SuPer M i l K y :: ~ on 2007-02-22 08:04

ขอบคุณครับ

แต่ผมยังหาไอเดียเอารูปที่เข้ากับ theme มาทำไม่ได้อ่ะคับ

#5 By AkE on 2007-02-22 08:21

เข้าบล็อกได้แล้วเย้ๆๆ

#6 By นายบวก on 2007-02-22 08:50

จะรออ่านตอนต่อไปค่ะ

#7 By Pleng on 2007-02-22 08:56

น่ารักจังเลยค่ะ
ต้องลองไปทำดูบ้าง
เราก็เคยเจอปัญหาว่าเวลาเปลี่ยนโค้ดเสร็จพอกดดูก็ไม่มีความเปลี่ยนแปลงค่ะ
พอมาเข้าเว็บอีกวันถึงจะเห็นความเปลี่ยนแปลงที่แก้ไว้ได้

#8 By eeddy(อี๊ด) on 2007-02-22 11:37

ขอบคุณเทคนิคดีๆ ไปทำให้บล็อค
เราสวยขึ้นอีกเยอะเลยน๊อ

#9 By POP on 2007-02-22 18:41

ขอบคุณน้า

เดี๋ยวจะลองทำดูจ้า อิอิ

#10 By Piiiiim to Jin on 2007-02-22 19:59

oh wow ขอบคุณมากๆเลยค่ะ น่ารักมากเลย >< แล้วจะลองเอาไปใช้นะคะ

#11 By I ♥ JJ on 2007-02-22 22:16

ขอบคุณครับสำหรับเทคนิคดีๆ

อธิบายสั้นๆ เข้าใจง่าย

#12 By ใหม่คุง on 2007-02-24 00:24

หวาดดีอ่าจิ๊..ขอบคุงมากเรยนิ๊จิ๊

#13 By a • u n on 2007-02-24 17:51

แล้วของเค้ามันซ่อนกล้องคอมเม้นอ่า
ถ้าเราจะโชว์ให้คอมเม้นในหน้านั้นเลย แบบของตัวเอง เค้าต้องทำไงเหรอ ชี้แนะด้วย

#14 By "@::[Z] e N der Ri [A]::@" on 2007-02-25 08:53

เป็น blog ที่ให้ความรู้เยอะเลยค่ะ เอาไปลองทำตั้งหลายอย่าง

ขอบคุณมากนะคะ

ยินดีที่ได้รู้จักค่ะ

#15 By + + vEkO + + on 2007-02-25 12:39

น่ารักจังค่ะ จะลองทำดูบ้าง

แต่คงต้องหาภาพที่เหมาะก่อน(คงนาน

)

#16 By Tasartir...¤¸¸.·´¯`·.¸·.>>--» on 2007-02-26 11:31

เรา jayza.exteen.com

#17 By jayzaaaa!!!!!! on 2007-02-26 14:35

>< ทำไม่ได้อ่ะค่ะ
แง้ๆๆๆๆ

#18 By ☆[ i ]Rin☆ on 2007-02-26 19:04

>< ทำไม่ได้อ่ะค่ะ
แง้ๆๆๆๆ

#19 By ☆[ i ]Rin☆ on 2007-02-26 19:06

ตอบคุณ buririn princess คะ

ลืมบอกว่าถ้าเป็นรูปใหญ่รูปเดียว ให้ใส่ background-repeat: no-repeat; ด้วยค่ะ

ไม่งั้นรูปมันจะ repeat

#20 By เจนเนสซ่า on 2007-02-26 22:15

แบบนี้น่าจะดีนะ ทำเป็นรูปเล็กแล้วให้มันไป repeat เองใน IE เพราะจะเป็นผลดีกับคนที่ใช้ dial up เข้ามาเล่น net เพราะจะเร็วกว่า ส่วนเรื่องที่ลองแก้ css แล้วไม่เปลี่ยน เท่าที่ได้ลองคุยกับ jennessa อาจต้องลอง refresh หน้านั้นอีกทีโดยการกด Ctrl + r เนื่องจาก IE ทำการ cache page นั้นเอาไว้ครับ ได้ไม่ได้ยังไง comment มาอีกทีละกันครับ jennessa คงไปหาวิธีให้

#21 By naruto (58.9.190.14) on 2007-02-28 22:59

น่ารักดีครับ วิธีการนำเสนอก็ง่าย ๆ ดี ขอบคุณมากครับ

#22 By เจ้าชายน้อย on 2007-03-04 09:36

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

#23 By babie_moon on 2007-03-05 20:51

หนูขอบคุณมากค่ะ
ตอนนี้บล๊อกหนูสวยสมใจแล้ว
เพราะพี่ช่วยแนะนำ
อ้อ มีอีกอย่างเดียวคือ
หนูอยากเปลี่ยนฟร้อนชื่อบล๊อก
ลองแก้ที่ ccs ไม่สำเร็จ
ต้องทำยังไงหรือค่ะ

#24 By ~น่ารัก~ on 2007-03-12 19:08

พี่คะช่วยหนูด้วย
บล๊อกหนูเป็นอะไรไม่รู้
แถบซ้ายลงไปอยู่ข้างล่าง
และแล้วตัวหนังสือคอมเมนท์ก็ใหญ่
หนูพยายามแก้cssอยู่นานแล้วไม่สำเร็จ
ช่วยหนูด้วยนะคะพี่คนดี

#25 By ~น่ารัก~ on 2007-03-13 21:46

สุดสวาทขาดใจ หาคนทำอย่างงี้มานานแล้วววววววววววววว

#26 By :: ipup :: on 2007-03-13 22:01

แท ก ก ! ! งั บ บ

เพิ่งทำBlockเองอะ(หัวเราะ)
ยัง งงๆ อยุได้คำแนะนำดีๆและ จะไปลองทำดูนะงับ

#27 By 안 녕!!ÿuchunqu→(´Д｀)ノ on 2007-03-14 21:41

ขอบคุณค่ะจะลองฝึกทำดูค่ะ แต่กลัวทำทำบลอคเละ

#28 By MayaKniGht on 2007-03-14 22:56

ขอบคุณค่ะ ^^"
ลองทำดูแล้ว เหอๆ

เทคนิคดีๆ เอิ๊กๆ ><

#29 By [ฟาร์ม: 雲と嵐 mode] ; on 2007-03-18 18:57

เจเนสซ่าคะ
ลองทำตามทุกเม็ด ไม่สำเร็จค่ะ
ยังเหมือนเดิม จะพยายามต่อไปค่ะ เอาใจช่วยด้วย
เคล็บลับ แก้บล๊อกต้องทำตอนอารมณ์ดีๆ เช้าๆ เปิดเพลงเพราะๆ ไปด้วย
เจ๋งแน่ๆ..สู้ๆๆๆ

#30 By *~~*จดหมายรัก*~~* on 2007-03-22 15:52

เจเนสซ่าคะ
มีคนชมว่าบล๊อกเราสวยจัง
อยากบอกว่า เป็นเพราะเจเนสซ่านี่เอง
เราเรียนรู้จากคุณมากมายเลย
ขอบคุณๆ ขอให้คุณสวยๆๆยิ่งขึ้น

#31 By *~~*จดหมายรัก*~~* on 2007-03-22 15:57

คุณจดหมายรัก ดีใจด้วยค่ะ

บลอคสวยก็อยู่ที่คนออกแบบด้วยนะคะ

บลอคคุณจดหมายรักก็สวยจริง ๆๆ header สวยมั่กๆ ค่า

#32 By เจนเนสซ่า on 2007-03-22 18:35

ขอบคุณมากๆค่ะ

#33 By NotEBoOk on 2007-03-31 04:36

*0* อยากทำมั้ง

#34 By กยองวา on 2007-04-19 19:33

ขอบคุณมากเลยค่ะ ที่แวะไปทักทายนะคะ .. ขอมาสูบความรู้เพิ่มเติมด้วยเลยแล้วกันค่ะ อิอิ

#35 By -'๐'-Catz`Mojizy-'๐'- on 2007-04-24 00:11

อ่า...ทำม่ะไดอ่า

ใส่background-repeat: no-repeat;แล้วก้ยังม่ะขึ้นเรย

#36 By sanootzies on 2007-04-26 18:40

คุณ sanootzies คะ ขอดูโค้ดตรง .form ทั้งหมดหน่อยค่ะ เดี๋ยวช่วยดูให้ค่ะ

#37 By เจนเนสซ่า on 2007-04-26 22:04

อ่า...ขอโทดน๊ธคร่ะที่ตอบช้า
นี่คร่ะ...
form{
padding:2px 5px 2px 20px;
margin:10px;
font:11px Tahoma,"MS Sans Serif";
background-image:url
(http://sanootzies.exteen.com/images/comment.jpg);
background-repeat: no-repeat;
width: 400px;
height: 200px;
textarea{
filter:alpha(opacity=50);
width: 270px;
height: 120px;

#38 By sanootzies on 2007-04-30 00:49

ขอบคุณมากๆเลยค่ะ
หาโค้ดฟิลเตอร์อยู่เลย