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 มันหนา ไอ้จุดทแยงนั่นจะชัดขึ้น

 

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