CSS เด็ดๆ

[มังกร]

กระทู้คล้ายๆ กันเยอะนี่นา
แถมตอนนั้นเข้ามาแล้วอ่านไม่รู้เรื่องด้วย
(ตอนนี้ก็แค่รู้เรื่องบ้างนิดหน่อย )

ขุดหน่อย


สร้างกล้อง Leica จาก CSS3
https://developer.mozilla.org/media/uploads/demos/d/m/dmatthams/91ff736681b397cdb58667fa1c0e9e6e/leica_1334757882_demo_package/index.html



ส่วนอันนี้แม่มสร้างหัวรถไฟเลย
https://developer.mozilla.org/media/uploads/demos/T/a/Taufik/d3e0d49cb47d05ffaf0a55a8697e6db6/pure-css3-classic-tr_1334500141_demo_package/index.html




อยากดูอันอื่นๆ นี่เลย https://developer.mozilla.org/en-US/demos/

ทำไปทำไม้ย์

[มังกร]

นั่นนะสิ 

ทำเพื่อให้รันได้กับ browser บางตัว 

http://css-tricks.com/examples/ShapesOfCSS/
เนี่ยอันนี้เขาสอนวิธีวาดสี่เหลี่ยมสามเหลี่ยมแปดเหลี่ยมวงกลม ฯลฯ จาก CSS
พอทำเป็นแล้วค่อยเอาไปทำรถไฟข้างบนนู่น

[มังกร]

อินฟินิตี้
ลูกศร

[มังกร]

ไอ้้พวก 3 เหลี่ยม มันออกมาเป็นงั้นได้ไงอ่ะ 

ที่จริงมันคือ border น่ะครับ
แต่ทีนี้ไปบังคับให้มันหนาชนกะขอบอีกด้สนซะ เลยหั่นออกมาเหลือแค่เสี้ยวเดียว

[มังกร]

งงตรงทำไม border-bottom ที่ไปชนกับข้างบนทำไมมันตัดกันเป็นเส้นทะแยงอ่ะ 

เปิดบทความนี้ไว้พอดี ลองดูไล่จากบนลงล่าง เขาอธิบายน่าเข้าใจดีครับ
http://net.tutsplus.com/tutorials/html-css-techniques/css-refreshers-borders/

สังเกตว่าถ้าเราทำ border คนละสีกันทุกด้าน จุดที่ชนกันจะเป็นทแยงๆ
แล้วถ้าเรากำหนดให้ border มันหนา ไอ้จุดทแยงนั่นจะชัดขึ้น

[มังกร]

 

[มังกร]

อีบทความข้างบนนั่น สีแสบตามาก 

จดไว้หน่อย ยังไม่เคยใช้ เดี๋ยวจะหยิบมาใช้ละ
เป็นเทคนิคใหม่ใน CSS ที่ใช้แทน text-indent:-9999px
แต่ซ่อนข้อความไว้หลังภาพได้เหมือนกัน

โค้ด:

.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

ที่มา http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

รวมฮิตตัวอย่างเอฟเฟกต์ CSS3 Animation
ที่เล่นกับ Properties ต่างๆ วื้บๆ
มีเยอะมาก จิ้มดูก็ได้ไอเดียไว้ใช้เพียบละ

http://leaverou.github.com/animatable/