CSS Image

ลองเข้าไปดู Link นี้ครับ ProofOfConcept
ดูภายนอกก็ดูปกติดี
ลอง click ขวาเพื่อดู source code สิครับ
อา น่าตื่นเต้นขึ้นมาหน่อย
มี div tag เต็มไปหมดเลย

<div style="top: 0pt; left: 0pt;" class="c0"> </div>
<div style="top: 0pt; left: 3px;" class="c1"> </div>
<div style="top: 0pt; left: 6px;" class="c1"> </div>
...

สังเกตว่า ตำแหน่งว่า ขยับไปทีละ 3 pixel

ที่นี้ลองเปิดดู css ที่แนบมา

.c0 {
  border-left:1px solid #CCCC99;
  background:#CCCC99;
  border-right:1px solid #CCCC99;
} 
.c1 {
  border-left:1px solid #CCCC99;
  background:#CCCC99;
  border-right:1px solid #CCCC99;
} 
.c2{
  border-left:1px solid #CCCC99;
  background:#BEBE8F;
  border-right:1px solid #363629;
}

div มีขนาด 3x1 pixel และมีการกำหนด สีให้กับแต่ละ pixel

รวมๆกันแล้ว มันก็คือ รูปที่เขียนขึ้นโดยใช้ CSS เพียวๆ
(ไม่ได้ใช้ background image)

อ่านเนื้อหาเต็มๆได้ที่นี่ครับ

• Proof of concept to throw off the bots
  

แล้วก็มีคนนำไปต่อยอดเป็น CSS Font แล้วครับ
ดูได้ที่นี่ A CSS Font