Creative Commons License

"--- comment box ---"

posted on 07 Mar 2007 11:03 by rije in HowTo
เฮ้อ~ เน็ตที่หอเน่าอีกแล้วครับ
เน่ามาหลายวันแล้ว ไม่ได้เข้ามาอัพบล็อคเลย
เพราะเน็ตมันเน่าแย่ๆ นี่ล่ะครับ
เลยทำให้ผมรู้ลืมไปว่าจะอัพเรื่องอะไรบ้าง - -"
ช่วงเน็ตเน่านี่ เกิดเหตุการณ์ไม่คาดฝันขึ้นครับ
ผมติดไวรัส!! ไอ้ตัว 8BITS เนี่ยล่ะครับ
แบบว่าไม่เคยติดไวรัสหนักๆ มาเป็นปีแล้ว
(พยายามอย่างมากไม่อยากให้ติด)

มันหงุดหงิดครับ ช่วงลดน้ำหนักด้วย
ขาดแคลเซียมอีก เลยบ้าไปเลย
นมช่วยได้มากครับ ^^ ตอนนี้ลดไป 2 กิโลแล้ว

ตอบ ลิจัง กับ exmiraclelight
-------->
noise เยอะไปหน่อยเพราะว่าใส่ noise ไว้ครับ
ที่จริงทำใน notebook สีมันเพี้ยน (อย่างแรง)
มันเห็น noise ไม่เยอะขนาดนี้น่ะครับ
แล้วก็ทำใน Photoshop ครับ ไม่ได้ scan ครับ

ตอบ rappeler
-------->
ทำใน Photoshop CS ครับ ^^
ใช้เมาท์ลากๆ แต่ใส่ gradient ก่อน
ที่จริงอยากทำเป็นภาพท้องฟ้าในความทรงจำ
ที่เคยเห็นว่ามันสวยมาก แต่ทำไม่ได้ T-T

ตอบ -'๑'-เด็กคลาสโฟร์-'๑'-
-------->
ผมไม่ค่อยเข้าใจที่เม้นท์เท่าไหร่น่ะครับ
ว่าให้ช่วยสอนโค้ด comment หรือว่า
มองไม่เห็นลิงค์ comment ผมก็เลย
เปลี่ยนตัวลิงค์จากตัวหัวใจขาดๆ สีขาว
มาเป็นตัวคำว่า comment ชัดๆ แทนน่ะครับ

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

พูดมาถึงส่วน comment วันนี้จะเอาโค้ดมาแฉครับ!

/* ส่วนคอมเมนต์ */
.comment{
padding:6px 5px 2px 5px;
margin:10px;
background-color:#000000;
background-image: url(http://rije.exteen.com/images/bg_all.gif);
border-bottom:1px #aaaaaa dotted;
border-top:1px #aaaaaa dotted;
border-left:1px #aaaaaa solid;
border-right:1px #aaaaaa solid;
}
.commentcontent{
color: #ffffff;
padding:5px 5px 5px 16px;
font-size:11px;
line-height: 1.3em;
border-top:1px #ffffff dotted;
border-left:1px #ffffff dotted;
border-right:1px #ffffff dotted;
background-color:#000000;
}
.commentfooter{
border-bottom:1px #ffffff dotted;
border-top:1px #ffffff solid;
padding:2px 2px 2px 15px;
color:#ffffff;
font-size:10px;
}
/* ฟอร์มใส่คอมเมนต์ */
form{
padding:2px 5px 2px 20px;
margin:10px;
border-bottom:1px #ffffff dotted;
border-top:1px #ffffff dotted;
border-left:1px #ffffff solid;
border-right:1px #ffffff solid;
font:11px Tahoma,"MS Sans Serif";
background-image: url(http://rije.exteen.com/images/comment_box.gif);
}

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

ก๊ากกก อะไรมันจะเยอะขนาดนี้เนี่ย!!
ผมดูเองยังมึนนิดๆ 5555555
เอาล่ะ เรามาแฉกันไปทีละส่วนเลยละกันนะครับ ^^

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


คลิกที่ภาพเพื่อดูภาพเต็มๆ

.comment > ในส่วนนี้จะเป็นส่วน
ที่แสดง comment ของแต่ละคนเอาไว้ครับ
จะเป็นตัวหลักๆ ดูจากภาพด้านบนแล้ว
คือส่วนที่เป็นกรอบด้านนอก และ bg ของ
ตารางใส่ส่วนเม้นท์นั้นๆ (อ่านเข้าใจไหมเนี่ย เหอๆ)

.commentcontent > ส่วนนี้คือด้านในข้อความ
ที่ comment กันนะครับ ผมเซ็ตค่า border
ด้านซ้าย - ขวา - บน เอาไว้เป็นแบบ dotted

note : dashed = เส้นปะ
dotted = จุด
solid = เส้นตรง

.commentfooter > ในส่วนนี้คือส่วนของ
ชื่อผู้โพส วันที่ อันนี้ไม่เกี่ยวกับตัวอักษรนะครับ
เพราะผมไม่ได้ใส่ค่าไว้ จะอยู่อีกส่วน ไม่ได้โชว์
ก็ไม่มีอะไรมาก เหมือนทั่วๆ ไป เพราะงั้น
ข้ามๆ ส่วนเรื่องเกี่ยวกับตัวอักษรไปละกันนะครับ

.form > ส่วนนี้คือส่วนกล่อง comment ครับ
สามารถตั้งค่า ความกว้าง ความยาวได้
width : 123 px;
height : 123 px;
ซึ่งหากเอาดค้ดข้างบนนี้ไปใส่แล้ว
จะเป็นการเซ็ตขนาดของกล่อง comment
ให้มีขนาดความกว้างความยาวตามต้องการได้
ในส่วนนี้ผมไม่ได้เซ็ตขนาดไว้ แต่เซ็ตแค่
border กับตัวอักษรเอาไว้เท่านั้นครับ
(ดูจากกล่อง comment ได้ครับ)

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

โดยประมาณก็เท่านี้แหละครับ ช่วงนี้
ก็เข้าสู่ช่วง Final Project แล้ว
เมื่อวานเพิ่งสอบวิชาสุดท้ายเสร็จ
ตอนนี้ก็ได้เวลาลุย Project ที่เหลืออีก 2 ตัว
ต้องทำให้เสร็จก่อน 11 กับ 15 นี่ล่ะครับ
เลยอาจจะหายไปนานหน่อย
แล้วเจอกัน entry หน้านะครับ ^3^/