CSS เด็ดๆ

[iannnnn]

แก้ปัญหาอวัยวะเว็บขี่กัน
เคยเจอไหมครับเวลากำหนดอะไรที่มัน floatๆ แล้ว
อยู่ดีๆ ไอ้อันล่างมันก็ทะลึ่งขึ้นมาซ้อนอันบน

ปกติวิธีแก้ที่เราใช้ๆ กันก็คือ สร้างอะไรขึ้นมาก้อนนึง (สมมติว่าเป็น div)
แล้วก็ใส่ css บอกมันให้ clear ให้ที

แต่ทีนี้ถ้าว่ากันตรงๆ มันผิดหลักคอนเซปต์ของ css ที่ดี (เพราะมีอวัยวะเกินมาอันนึง)
ดังนั้น thaicss เลยบอกว่าให้ลองใช้วิธีันี้ดูครับ (ในที่นี้  header ซ้อนกะ section)

โค้ด เลือกทั้งหมด ขยายเนื้อหา

   body>header:first-child+section:after  {
   content:  " ";
   display:  block;
   clear:  both;
   }


โดยสรุปคือให้ css มันสร้างคอนเทนต์เปล่าๆ ขึ้นมาอันนึง (ตรงบรรทัด content) แล้วก็บอกให้เคลียร์ซะ

ผล http://thaicss.com/lessons/clear.html

ที่มา thaicss

[iannnnn]

F0NTCAMP02 | เบซิกเบสิก CSS

ฟค#2 เปิดสอน css ฟรีสำหรับชาวฟร้อนจ้ะ

[iannnnn]

ทริปเปิ้ลโพสต์

โค้ด เลือกทั้งหมด ขยายเนื้อหา

@font-face {
font-family: Sarabun;
src: url('/v3/THSarabun-Bold.ttf');
}


กำหนดฟอนต์ให้กับเว็บจ้ะ เป็น css3 นะ
ซึ่งแน่นอนว่าชาวไทยส่วนใหญ่ยังไม่เห็นผล
บรรทัด 2 คือตั้งชื่อฟอนต์แฟมิลี่ตามที่ต้องการ
บรรทัด 3 คือที่อยู่ของไฟล์ฟอนต์ .ttf ที่เก็บไว้สักที่

ตัวอย่างการเอามาใช้คือ

CSS:

โค้ด เลือกทั้งหมด ขยายเนื้อหา


@font-face {
font-family: Sarabun;
src: url('/v3/THSarabun-Bold.ttf');
}

.test {
font:bold 50px Sarabun,Tahoma;
color:red;
}


HTML:

โค้ด เลือกทั้งหมด ขยายเนื้อหา


<span class="test">
ทดสอบการแสดงผลฟอนต์ด้วย CSS3
</span>

ตัวอย่าง:

ทดสอบการแสดงผลฟอนต์ด้วย CSS3

ทั้งนี้ให้ลองทดสอบด้วยเบราว์เซอร์โง่ๆ พวก IE
แล้วจะเห็นว่ามันแสดงฟอนต์สำรอง (Tahoma) แทน
แต่ข้อเสียคือขนาดมันต่างกันเกินไปครับ เลยคุมดีไซน์ยากสักหน่อย

[JΛNΣ]

ทีนี้พวกฟอนต์ละเมิดลิขสิทธิ์ก็จะกระจายอย่างแพร่หลายและรวดเร็ว 

[iannnnn]

โดนจับกันตายห่าล่ะทีนี้

[Layiji]

ผมเห็นเป็น tahoma นะ ใช้ ff

[icez]

ต้อง FF 3.5 ขึ้นไปอะครับป๋า

[HJ]

ต้อง FF 3.5 ขึ้นไปอะครับป๋า

ตอนผมดู คิดในใจ tahoma นี่หว่า

พึ่งกระจ่าง 

[ณัฏฐ์]

browser ตัวเดียวในเครื่องที่เห็นคือ safari(มี IE chrome FF safari ทุกตัวอัพเดตแล้ว)

[กันย์]

เห็นๆ

[iannnnn]

http://webfonts.info/wiki/index.php?title=%40font-face_browser_support
มีรายชื่อเบราว์เซอร์ที่สนับสนุนด้วยจ้ะ
แต่ว่าดูรายละเอียดดีๆ นะ ที่เห็น IE4 นั่นมันเป็นฟอนต์แบบ eot

[ณัฏฐ์]

อ้าวเห็นแล้ว (FF)

สงสัยต้องเปิดรอบสอง
รอบแรกมันโหลดไม่ทัน
(มั้ง)

[iannnnn]

ใช่ๆ
เพราะมันต้องโหลดตัวไฟล์ฟอนต์ที่ใช้แสดงผลก่อนน่ะ
ไฟล์นึงก็ 100 กว่าเค

[กากก่อเกรียนนู้บ]

FF 3.0 ฮะ มองไม่เห้นน

[iannnnn]

ก็บอกแล้วว่าเริ่มจาก 3.5