การเพิ่ม animation ให้กับวัตถุ เมื่อเลื่อนหน้าเจอมาถึง

http://mennstudio.com/2014/moving-when-you-scroll-down/

http://css-tricks.com/slide-in-as-you-scroll-down-boxes/

รวม css สำหรับแก้ปัญหาที่เจอกันบ่อยๆ

https://medium.com/coding-design/5f69bab5e25b

มีประโยชน์มากๆ ครับบบบ :)

compressor ช่วยจัดการไฟล์ css, javascript ให้โหลดเร็วขึ้น

http://compressor.ebiene.de/

CSS Selector บางตัวที่เราอาจไม่รู้

http://scotch.io/bar-talk/css-selectors-you-might-not-know-about

Bootstrap tool generators

http://ewebdesign.com/bootstrap-tools-generators/

css การทำ lightbox

CSS OVERLAY TECHNIQUES

css toggle with jade

See the Pen CSS Toggle with Jade by Oliver Knoblich (@oknoblich) on CodePen

การกำหนดความสูงของ element ให้เป็น %

กรณีที่อยากให้กำหนดความสูงของรูปให้เป็น % เหมาะสำหรับผู้ที่ทำเว็บแนว responsive มีเทคนิคดังนี้

1.  ครอบ element ที่อยากกำหนดความสูงเป็น % ด้วย div.container
2. ใส่ css ให้ div.container กำหนดความกว้างเป็น % แล้วกำหนดความสูงใส่ใน padding-bottom แทน
3. element เป้าหมาย ใส่ css ให้โดยกำหนด position เป็น absolute แล้วกำหนด top,right,bottom,left เป็น 0 ให้หมด

See the Pen EqdaH by pongsawat pasom (@fogza) on CodePen

ส่วนมากจะใช้กับกรณีที่อยากให้รูปเท่ากันทุกอันเวลาเรียงแนวนอน
หากยังไม่เก็ทอธิบายอีกรอบ :)

element ที่เป็น parent หากกำหนดความสูงเป็น % จะทำให้ความสูงของ element ที่เป็น child กลายเป็น 0 ทันที เพราะ element child ต้องการขนาดความสูงของ parent ที่แน่นอน

เปรียบเทียบง่ายๆ ก็คือ กำหนด padding-bottom:50% เพื่อให้ดัน element ขึ้นมา แล้วซ่อนส่วนที่เหลือด้วย overflow:hidden นั้นเอง

อ้างอิงค์จากคุณ Earthchie Thanarat

แนะนำเว็บ Icon Font สวยๆ

http://fontastic.me/
http://icomoon.io/app/

CSS3 Cross fading images

เกี่ยวกับ css animation ทั้งหลายแหล่ ใน CSS3

Cross fading images