พิมพ์หน้านี้ - [Tips Hi5] ซ่อน และทำ comment จางๆ เวลาเมาส์ชี้จะ ชัดขึ้น

ก่อนที่ท่านทั้งหลายจะ copy code นี้ไป โปรดอ่านคำแนะนำ

และคำอธิบายการทำงานของ CSS code ด้วยครับ เพื่อประโยชน์ต่อตัวท่านเอง

เอาละเว้ย วันนี้ได้เวลามาสอนทำ กล่อง comment แบบจางๆ กันมั่งนะ พอดีว่ามีคนเขา request มา ดูแบบใน clip video เลยนะครับ การทำงานของมัน จะเ็ป็นแบบใน คลิปเลยครับ ซึ่งตรงนี้จะรองรับกับ Firefox ,IE7, opera ครับ ส่วนอื่นๆ ผมไม่ได้ลอง

การทำงานของ code นี้จะแบ่งออกเป็น 4 ส่วนด้วยกันครับ มาเริ่มส่วนที่ 1 กันเลย

.subsection .comment { // ส่วนนี้อยู่นอกสุดของ กล่อง comment เลยครับ
height: 110px !important; //กำหนดให้มันสูงแค่ 110 pixel
position: relative; //การวางตำแหน่งแบบ relative คือ มีกล่องอะไรครอบไว้ก็อยู่ตรงนั้น ห้ามออกไปนอกกรอบ
left: 0em; // ชิดซ้าย 0 em
width: 450px !important; //กว้าง 450 px
text-align: justify !important; //การวางข้อความ แบบกระจาย ชิดขวา, ซ้าย เท่ากัน

// ตรงนี้แหละสำคัญ ครับ เป็นการสั่งให้มัน จางลงครับ และที่สำคัญ ผมได้ใส่ให้มันสามารถใช้กับ browser ได้เกือบทุกชนิด!!
// ค่าน้อย = จางมาก
// ค่ามาก = จางน้อย
filter: Alpha(Opacity=30); // ตรงนี้สำหรับ IE ครับ Opacity ใส่ได้ 0 -100
-moz-opacity: 0.3; // เห็น -moz ก็น่าจะเอาออกกันใช่มั้ยครับ บรรทัดนี้ของ Mozilla Firefox ค่าที่ต้องได้คือ 0.0-1.0
opacity: 0.3; // บรรทัดนี้ ฮ้วนๆ เลยครับ ของ opera ปรับได้ 0.0 - 1.0 เช่นกัน
}

มาที่ตัวที่ 2 อันนี้ไม่ต่างจาก code แรกเท่าไหร่ เป็นตำแหน่งเดียวกัน แต่เราจะสังเกตุว่า ผมได้เพิ่ม :hover เข้าไป คำสั่งนี้จะทำงานเมื่อเราเอาเมาส์ (pointer) ไปวางไว้เหนือ ส่วนที่เราได้กำหนดคำสั่งไว้ (งงม่ะ) เอางี้นะ เข้าใจง่ายกว่า เรากำหนดให้
.ภาคกลาง {
ฝนไม่ตก
}
.ภาคกลาง:มีก้อนเมฆ {
ฝนตกมากมาย
}
ปล. อ่านแล้วจะทำให้ งงกว่าเก่า ก็ให้ทิ้งๆ ไป

.subsection .comment:hover { /// จะทำงานเมื่อมี pointer มาอยู่บนส่วนนี้
position: relative;
height:100% !important; // ให้มันใช้ความสูง ตามที่ควรจะสูง
overflow-y:auto!important; // ทำให้ มันยืดดดด ลงในแกน Y
width: 450px !important; // กว้างเท่าเดิมแหละ
filter: Alpha(Opacity=100); // ภาพและ comment ที่ 100%
-moz-opacity: 1; // ภาพและ comment ที่ 100%
opacity: 1; // ภาพและ comment ที่ 100%
}

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

.comment-picture ,.comment-picture a img { // กำหนดในส่วนของ img ก็คือภาพน่ะแหละ
position: relative!important; // ต่อเนื่องๆ
width:110px!important; // กว้าง 110
height:110px!important; /// สูง 110
border:none; // ไม่เอากรอบ
}

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

.section .comment-text {
padding: 1em 0em 0.5em 1.5em!important; // เว้นระยะห่าง จาก บน ขวา ล่าง ซ้าย จำง่ายๆ ว่ามันวนตามเข็มนาฬิกาน่ะ
width:90% !important; // กว้าง90%
position: relative;// ตำแหน่งให้ต่อเนื่องกันไป
text-align: left!important; // ข้อความชิดซ้าย
float: none; // ไม่ยึดซ้ายหรือขวา

โค๊ด:

.subsection .comment {
height: 110px !important;
position: relative;
left: 0em;
width: 450px !important;
text-align: justify !important;
filter: Alpha(Opacity=30);
-moz-opacity: 0.3;
opacity: 0.3;
}
.subsection .comment:hover {
position: relative;
height:100% !important;
overflow-y:auto!important;
width: 450px !important;
filter: Alpha(Opacity=100);
-moz-opacity: 1;
opacity: 1;
}
.comment-picture ,.comment-picture a img{
position: relative!important;
width:110px!important;
height:110px!important;
border:none;
}
.section .comment-text {
padding: 1em 0em 0.5em 1.5em!important;
width:90% !important;
position: relative;
text-align: left!important;
float: none;
}

:aiwebs_033: ทำให้สนุกนะคร้าบบบ

เด็กไอทีคลับ คลับซ่าฅนไอที

iT club | ไอทีคลับ คลับของคนไอที => Hi5 Club => ข้อความที่เริ่มโดย: เด็กไอทีคลับ ที่ 10, 05 2008, 01:06:03 PM