#TiGERiDEA @rabbitinblack เข้าร่วม #CSSsummit feat. @iannnnn

CSS summit คือมหกรรมเสวนา CSS ระดับโลก เวลาการเข้าร่วมของไทยเป็นสี่ทุ่มถึงเช้า ตัวแทนประเทศไทยตอนนี้คือ @rabbitinblack @iannnnn โดยทาง TiGERiDEA ออกค่าเข้าร่วมให้ประมาณ $299 ส่วน @iannnnn นี่ทางเราไปอาศัยบ้านเค้าอยู่ ต้องขอขอบคุณน้องเขี้ยวเสือที่อนุญาตให้คุณแอนปล่อยพวกเราเข้าบ้านครับ

สำหรับงานดังกล่าวจัดพร้อมกันในหลายประเทศ โดยมีวิทยากรเข้าร่วมจากที่ต่างๆกัน เลยทำให้การเข้าร่วมของไทยกลายเป็นเวลา สี่ทุ่มถึงเจ็ดโมงเช้า -_-” เรียกว่าถ้าไม่อึดจริงก็คงจะแย่ แต่ @rabbitinblack ของเราอึดอยู่แล้วครับ

ภาพบรรยากาศ CSSsummit ที่บ้าน @iannnnn

ผู้บรรยายโชว์ css 3d animation มี Perspective ด้วย พวกเราประสานเสียง เหยดดด

ผู้บรรยายโชว์ css 3d animation มี Perspective ด้วย พวกเราประสานเสียง เหยดดด

ขนม นม เนย เพียบบ

ขนม นม เนย เพียบบ

heineken สนับสนุน ซะเมื่อไหร่

heineken สนับสนุน ซะเมื่อไหร่

บรรยากาศการเสวนา จอ LCD ของ @iannnnn เจ๋งมาก

บรรยากาศการเสวนา จอ LCD ของ @iannnnn เจ๋งมาก

ความหวังของนักพัฒนาไทย อยู่ในมือเจ้าแล้ว

ความหวังของนักพัฒนาไทย อยู่ในมือเจ้าแล้ว

ผู้ให้กำลังใจ ไม่รู้ @iannnnn ไปตบมาจากไหน

ผู้ให้กำลังใจ ไม่รู้ @iannnnn ไปตบมาจากไหน

ระบบการสัมมนาของ CSS Summit นั้นค่อนข้างดี โดยระบบทุกอย่างอยู่บนเว็บหมด

ระบบการสัมมนาของ CSS Summit นั้นค่อนข้างดี โดยระบบทุกอย่างอยู่บนเว็บหมด

ตัวระบบมีปุ่มให้ยกมือถามได้ และนี่คือ Chat ด้านข้างของการเสวนา บิ๊กพูดภาษาไทยไปมีฝรั่งเล่นมุกตอบมา

ตัวระบบมีปุ่มให้ยกมือถามได้ และนี่คือ Chat ด้านข้างของการเสวนา บิ๊กพูดภาษาไทยไปมีฝรั่งเล่นมุกตอบมา

สนุกสนาน

สนุกสนาน

@rabbitinblack กำลังตั้งใจเต็มที่

@rabbitinblack กำลังตั้งใจเต็มที่

รายละเอียดการทวิต CSS Summit ของ @Rabbitinblack และ @iannnnn

  • RT @Rabbitinblack
  • Now Start Session : CSS3 Transitions & Transforms #CSSSummit
  • เว็บสำหรับแปลง CSS3 ใช้มี Prefix สำหรับทุก Browser http://j.mp/idJnxP
  • Slide ของ CSS3 : Keyframe http://j.mp/r7at8X
  • jQuery : เล่นแสงเงากันแบบนี้เลย http://j.mp/q5HdVC #WebinBlack
  • http://bit.ly/qmCsXH Slide หัวข้อ CSS3 VS jQuery
  • jQuery Validator http://t.co/5uNnBpI
  • เมื่อนำ jQuery มาทำ animation กับ background ของเรา http://t.co/HwAhODJ #CSSSummit
  • ใช้ CSS3 ทำเป็น Slot Machine http://t.co/z3EFzrX
  • jQuery : ใช้สำหรับจัดเรียงกล่องข้อความ รูปภาพเราให้เป็นสัดส่วน ลองเข้าไปดูตัวอย่าง http://t.co/whJLQNa
  • ใช้ CSS HTML มาเขียนเกมโดยไม่ต้องใช้ Script http://t.co/L0KPOxJ #CSSSummit
  • หัวข้อต่อไป พูดถึงเรื่อง Sass เป็นการเขียน css ในรูปแบบใหม่ #csssummit
  • ผู้บรรยายบอกว่า css เหมือนสำหรับ designer แต่ sass เหมือนสำหรับ developer #csssummit
  • แต่ปัจจุบัน css นั้นเขียนโดย developer จึงมีการพัฒนา sass มาเพื่อตัว developer #csssummit
  • อย่างเช่นใน css เราต้องการแก้สีแดงของเว็บ เราก็ต้องหาเพื่อแก้สีในทุกตัว แต่ sass แก้ปัญหาโดยการกำหนดตัวแปรเพื่อเก็บค่าสีนั้น #csssummit
  • การเปลี่ยนแปลงค่าสี โดยใช้ % หรือใช้คำสั่งในการเปลี่ยนแปลงค่าสีที่ตัว sassมีมาให้ #csssummit
  • สำหรับคนที่อยากลองเขียน sass สามารถลองใช้งานด้วย http://t.co/9qhpBWV ได้ #csssummit
  • Slide สำหรับหัวข้อนี้ http://j.mp/ojBbMz #CSSSummit
  • ที่ชอบสำหรับ sass คือ nested selectors เช่น .abc .def {} เราสามารถเขียนเป็น .abc { .def {}}
  • แก้ปัญหา cross browser ของ css3 ตอนนี้ด้วย compass css3 http://t.co/02FMdkH #csssummit
  • ระหว่างที่รอผู้บรรยายท่านต่อมา ก็ฟังเพลงที่เค้าเปิด และท่าประจำของพิธีกร http://twitpic.com/5wqmjb ชักจะชอบท่าประจำของแกแล้วดิ #CSSSummit
  • หัวข้อต่อมาเป็นเรื่อง eCSStender #csssummit
  • Slide สำหรับหัวข้อนี้ http://t.co/sHkZ70h css-ecsstender #csssummit
  • หนังสือแนะนำเกี่ยวกับ Responsive Web Design http://j.mp/hAlGYp #CSSSummit
  • จากที่ดู + ฟัง #CSSSummit มา 1 ในสิ่งที่หลาย ๆ ท่านให้ความสนใจจะเป็นเรื่องของ Media Queries ซึ่งก็เกี่ยวโยงกับ Responsive Web Design
  • เว็บตัวอย่างของการที่รูปสามารถขยาย และย่อตามขนาดของหน้าต่าง http://j.mp/hbNhFs #CSSSummit
  • และเว็บนี้ http://j.mp/4cJBCQ เป็นตัวอย่างของเว็บที่ขนาดวิดีโอย่อ ขยายตามขนาดของหน้าต่าง #CSSSummit
  • เว็บนี้สำหรับแปลงจาก px ไปเป็น em http://j.mp/D6Jop #CSSSummit
  • หัวข้อต่อไปที่กำลังจะบรรยายคือหัวข้อ CSS Tools #CSSSummit
  • Slide สำหรับหัวข้อ CSS Tools นะครับ http://j.mp/nNWRfB #CSSSummit
  • ข้อแนะนำสำหรับ CSS ไม่ควรมีขนาดเกิน 18 kB โดยประมาณ ด้วยเหตุของเวลาในการเรนเดอร์หน้าเว็บ #CSSSummit
  • คำแนะนำของผู้บรรยาย สำหรับการเขียน CSS ที่บางคนเขียนออกมาแล้วมีการประกาศค่าที่ไม่เป็นระเบียบ คือการใช้ CSS Framework
  • การมองโครงสร้างของเว็บที่เราจะเขียน CSS จะทำให้ CSS ของเราเป็นระเบียบ และลดการเขียน CSS ที่มันจะทับซ้อนกัน
  • การตั้งชื่อ ID กับ Class ให้สั้นกระชับก็มีผลให้ขนาดของเว็บเล็กลง แต่บางครั้งการตั้งชื่อให้สั้นเกินไป ก็ทำให้การอ่าน Code เข้าใจลำบากขึ้น
  • Code สำหรับเปลี่ยน PNG ให้กลายเป็น CSS http://j.mp/ejrMn7 #CSSSummit
  • อีกอย่างคือ การที่เราแปลง PNG เป็น CSS แล้ว ไม่ควรให้ขนาดของ CSS มีขนาดใหญ่กว่า PNG ไม่อย่างนั้นก็ใช้ PNG ไปเถอะ
  • A Fluid Grid Calculator : http://j.mp/imjUeI ใส่ค่าลงไป เว็บจะแปลงมาเป็น CSS ให้
  • การ Validate CSS เป็นการช่วยเช็ค CSS ของเราว่าถูกต้องหรือเปล่า แต่ไม่ได้ช่วยให้มันมีขนาดเล็กลง ถ้าอยากให้มีขนาดเล็กลงให้ลองใช้ CSS Lint
  • หัวข้อต่อไปเป็นเรื่อง CSS Performance #CSSSummit แหม ผู้บรรยายคนนี้หล่อเชียว 555
  • Slide หัวข้อ CSS Performance นะครับ goo.gl/o40Zz #CSSSummit
  • เว็บนี้ก็ให้อัพโหลดรูปไปเพื่อแปลงเป็น CSS : http://j.mp/j6kB6N #CSSSummit
  • ตัวอย่าง Box Shadow 39 แบบ http://j.mp/hNAv4y #CSSSummit
  • บทความเกี่ยวกับ Box Shadow http://j.mp/hZskIn #CSSSummit
  • Flux Gallery http://j.mp/jAKwoi Gallery สวย ๆ แนะนำ
  • http://j.mp/mCGrYf ส่วนอันนี้เป็น Slideshow Effect งามมาก
  • Faster HTML and CSS: Layout Engine Internals for Web Developers http://t.co/jXigHV1 #CSSSummit
  • ส่วนเว็บนี้ลองกดเมนูดู http://j.mp/eZrXiV #CSSSummit
  • อยากให้ IE ใช้ CSS3 ได้เหรอ ลองอันนี้ http://j.mp/diwNVf #CSSSummit
  • บทความแนะนำการเขียน CSS ให้มีประสิทธิภาพ http://j.mp/qofc7 #CSSSummit
  • เปรียบเทียบว่า Browser เก่า ๆ เป็นทีวีขาวดำ Browser ใหม่ ๆ เป็น LCD จอ Wide เราไม่เห็นต้องทำให้มันมองเห็นเหมือนกันเลย
  • หัวข้อสุดท้ายของงาน CSS & Pseudo Elements #CSSSummit
  • Slide สำหรับหัวข้อสุดท้าย http://j.mp/qVxdKp CSS & Pseudo Elements #CSSSummit
  • คนบรรยายคนสุดท้าย บรรยายอยู่ในโรงรถ เย้
  • บทความเกี่ยวกับ Pseudo Elements http://j.mp/qXMfjf #CSSSummit
  • การใส่ :before หรือ :after มันไม่ได้เกิดขึ้นนอก Elements แต่เป็นการเกิดขึ้นใน Elements #CSSSummit
  • การใช้ :before :after อย่าใช้ในการใส่ content ให้กับ element เปล่า ๆ เพราะ search ต่าง ๆ จะไม่ได้เห็นข้อความที่เรากำหนดใน CSS นะ #CSSSummit
  • สิ่งที่ใส่ใน content ได้นั้น มี 1.Text 2.Image 3.Attribute 4.Counter 5.ไม่ใส่อะไรลงไปเลย แต่เราไม่สามารถใส่เป็น tag html ได้ #CSSSummit
  • @iannnnn สำหรับ Attribute ยกตัวอย่างคือ
  • 123456
  • แบบนี้ Output ก็จะออกไปเป็น 123456 แต่ถ้าเราเขียนใน CSS ว่า
  • @iannnnn h1:before { content:attr(text); } Output ที่ออกมาก็จะกลายเป็น abc123456 แทน
  • @iannnnn text อันนี้ไม่ได้แปลว่าข้อความ สงสัยกำหนดให้กำกวมไปหน่อย คือ ถ้าดูทวิตก่อนหน้านั้น จะเห็น tag h1 มี attribute ที่ชื่อ text อยู่อะ
  • @iannnnn แต่ถ้าเราเขียน CSS ไปว่า
  • ul {counter-reset:item;}
  • ul li:before {content:counter(item) “.”; counter-increment:item;} เราก็จะได้ Output ออกมาเป็นแบบนี้ http://yfrog.com/h4g6cqqwj
  • ซึ่ง CSS ธรรมดา พวก list-style ก็ออกมาแบบนี้ได้เหมือนกัน แต่ถ้าจำไม่ผิด ใน list-style มันไม่มีให้ออกมาเป็น 4a. ดังนั้นก็เปลี่ยนมา เขียน CSS แบบนี้ http://yfrog.com/h8lk3efj Output ที่เราได้ก็จะเป็นแบบนี้ http://yfrog.com/kkqn2wdj

ทวิต @iannnnn

  • ขณะนี้ข้าพเจ้ากำลังดูสัมมนา CSS โลกครับ เขาจัดให้ชมออนไลน์แบบเสียตังค์ที่บ้าน โดยเจ้ามือคือ #TiGERiDEA @iPattt @warong @Rabbitinblack @iMenn
  • @Rabbitinblack http://t.co/ZGMuKic สไลด์ของเจ๊ที่กำลังพูดอยู่ตอนนี้ #CSSsummit
  • เว็บนี้เอาไว้พ่นโค้ด CSS3 ไล่สี แต่งเงา มุมมนสารพัดได้ โดยหน้าตาเครื่องมือเมือน Photoshop Layer เป๊ะๆ http://t.co/XyQbarZ #CSSsummit
  • ในโลกมีฟอนต์เป็นแสนเป็นล้าน แต่ที่ใช้ในเว็บจริงๆ มีแค่ 5 ฟอนต์ ที่ Support ทุกแพลตฟอร์ม กากไหมครับ #CSSsummit
  • แต่ถ้าว่ากันจริงๆ มีอยู่ 182 ฟอนต์ที่เรียกได้ว่าเป็น Web Safe Fonts (นั่นคือเปิดในเบราว์เซอร์วินโดวส์กะแมคได้ก็สบายใจได้หน่อยละ) #CSSsummit
  • http://yfrog.com/khr4smmj ข่าวดีก็คือตั้งแต่ปี 2009 เป็นต้นมา เบราว์เซอร์ทุกยี่ห้อหลักๆ สนับสนุน web fonts แล้วครับ
  • แล้วอะไรล่ะคือ web font? (คำว่า web font มีเว้นวรรคด้วยนะครับ) #CSSsummit
  • #CSSsummit ดูสไลด์สดเรื่อง Web Typography ได้ที่นี่ครับ http://t.co/hFUVk1u (จริงๆ ต้องเสียตังค์ดูนะ แต่ไหนๆ ก็ไหนๆ แจกเลยดีกั่ว :P)
  • ปัจจุบันนี้พวกเบราว์เซอร์บนมือถือเนี่ย สนับสนุน web font แบบ TTF/OTF เป็นมาตรฐานแล้ว สบายใจได้ ไม่ต้องเสียเวลามานั่ง Convert #CSSsummit
  • #CSSsummit ปัจจัยพิจารณาในการใช้ Web font คือ ความเร็วเซิฟเวอร์(เพราะฟอนต์ไฟล์ใหญ่), ลิขสิทธิ์ฟอนต์, ข้อจำกัดในการแสดงผลหน้าจอเรา
  • http://yfrog.com/kfazoimj การเลือกใช้ฟอนต์ให้เหมาะกับเว็บ #CSSsummit
  • การเลือกใช้ฟอนต์ให้เหมาะกับสถานการณ์ #CSSsummit http://yfrog.com/kjcxdjhj (กูจะฆ่ามึงละน้า ?)
  • #CSSsummit เรื่อง web font จบแล้วจ้ะ สัมมนาออนไลน์นี้มีสองวัน ตั้งแต่สามทุ่มยันเจ็ดโมงเช้าตามเวลาประเทศไทย ครอกกกก ?0?
  • ตอนนี้วิทยากร #CSSsummit กำลังเปิดหัวข้อเรื่อง Media Queries ครับ ว่าด้วยการตั้งค่า CSS ให้เปิดเว็บเราสวยในทุกอุปกรณ์ http://t.co/l9buZRs
  • http://yfrog.com/hsxvioxj เหยด นี่คือรายชื่อคุณสมบัติที่สามารถกำหนด CSS เป็นแบบต่างๆ ได้ในอุปกรณ์พกพาครับ #CSSsummit
  • มีคนถามใน #CSSsummit ว่าในอุปกรณ์พกพาเนี่ย ปุ่มสำหรับนิ้วกดควรใหญ่เท่าไหร่ มีคนตอบว่า 40px ครับ ส่วนอีกคนบอกว่ามาตรฐานที่แอปเปิลใช้คือ 44px
  • พักเที่ยง 1 ชั่วโมงครับ (เที่ยงของฝรั่งนะ) #CSSsummit ส่วนคนไทยดึกแล้ว มีใครตามอ่านมั่งเปล่าวะ 555 ก็ดันไม่หื่นนี่นา
  • เริ่ม #CSSsummit ภาคบ่าย(ของฝรั่ง)แล้วครับ สำหรับคนไทยคงไม่มีใครตื่นฟัง/อ่านแท็กนี้แล้วมั้ง 555 งวดนี้เป็นเรื่อง CSS Transition ครับ ยาก T-T
  • #CSSsummit ปรากฏว่าเรื่อง CSS Transition นั้นไม่ยากเท่าไหร่ครับ นึกภาพตอน :hover เราก็บอกแค่ div:hover {scale(2);} มันก็ x2 จากขนาดเดิมละ 😀
  • #CSSsummit แต่ก็อย่างว่า ปัญหาที่ทุกเบราว์เซอร์ Support ไม่เท่ากัน ทำให้ต้องเขียน -browserprefix กันไว้ก่อนเพื่อรอสักวันจะได้เขียนเพียวๆซะที
  • http://t.co/S8BWHHD เว็บเมพ ถ้าไม่รู้จะใส่ CSS Prefix ยังไงก็เขียนกลางๆ ไว้แล้วโยนโค้ดลงไป มันจะ gen prefix มาให้ทุกเบราว์เซอร์ล่ะ
  • #CSSsummit ตอนนี้วิทยากรกำลังบรรยายเรื่องคุณสมบัติ CSS Transform แบบต่างๆ ครับ รอให้เขาปล่อย PDF ก่อนจะเอามาแจก ? ? .. ? ?หาในกูเกิลก็ได้นะ
  • จะบอกว่า เรื่อง CSS Transform เนี่ยไม่ยากครับ ใครมีพื้นการเขียน ActionScript Animation อะไรแนวนี้มาก่อน เห็นศัพท์แล้วจะเก็ตทันที #CSSsummit
  • #CSSsummit วิทยากรที่กำลังบรรยาย กำลังสาธิตโดยใช้ Dreamweaver ครับ!!!! มีผู้ชมคนนึงบอกว่า “สวัสดีดรีมฯ ไม่ได้เจอกันนานแล้วนะ” 555
  • ความมันส์มาถึงแล้วครับ #CSSsummit กำลังพูดเรื่อง CSS Transitions (เมื่อกี้ Transform เฉยๆ แต่อันนี้เริ่มวื้บๆ ละ)
  • #CSSsummit ความเฮงซวยก็คือ เราต้องรอให้ชาวบ้านบ้านเราใช้ IE10 ขึ้นไปกันก่อนถึงจะสนุกกับ CSS Transitions ได้ .. ก็อีกสิบปีละมั้งครับ
  • http://yfrog.com/h379549745j ตารางนี้บอกว่า CSS Properties ตัวไหนบ้างที่เอามา Animate ได้บ้าง #CSSSummit
  • การเขียน CSS Transitions นั้นต้องประกาศคลุมไว้ก่อนครับว่าจะใช้กับ properties ไหนบ้าง ถ้าขี้เกียจก็ประกาศ all ไว้ก่อน แล้วค่อยเลือกจิ้มเอาได้
  • ชอบตรงมันกำหนดเวลาเป็นหน่วยวินาทีได้ เป็นธรรมชาติมนุษย์ดี 😀 หลักการคือบอก CSS ว่าจะขยับอะไรเป็นเวลาเท่าไหร่ (หาศัพท์กันเอาเองนะ) #CSSsummit
  • #CSSsummit เอา Transition มารวมกะ Media Queries เบรกที่แล้วแล้วจะโคตรเมพครับ นึกภาพตอนเราค่อยๆ ย่อขนาดเบราว์เซอร์ แล้ววัตถุข้างในก็ไหลวื้บๆ!
  • #CSSsummit เหยด! มี transition-timing ด้วยครับ คือกำหนดค่าความหน่วง (ease:ความหยุ่นอะไรงี้) ได้ด้วย! นี่มัน ActionScript ชัดๆ
  • http://yfrog.com/kf82ukaj เหยด นี่คือตัวอย่างโค้ดเวลาเอามาใช้ครับ ลองแกะไปเล่นหนุกๆ ได้นะ #CSSSummit
  • #CSSsummit โดยปกติแล้วไอ้พวก Transition เนี่ยมันจะเกิดขึ้นทันที แต่เราสั่งดีเลย์มันได้ด้วยนะครับ (ดูโค้ดจากทวีตที่แล้ว)
  • ตะกี้ @warong ชวนคุยเรื่อง”แล้วมันจะไม่ตีกับ jQuery เหรอ” เลยได้ข้อสรุปว่า CSS มันจบที่”ดีไซน์”ครับ ไม่รวมถึงพฤติกรรมแบบ Ajax ที่เกิดกะวัตถุ
  • ดูตัวอย่างของ CSS Transitions ง่ายๆ แต่แม่งเจ๋งน้ำตาไหลที่นี่ครับ http://t.co/SuJfUfg เลื่อนไปดูตรง Footer นะ #CSSsummit
  • แล้วยังมี pseudo-class ชื่อ :target ที่เอาไว้… เอาไว้ทำไรวะ ห่า รีบพูดจริงอีฝรั่งจรวด T-T ใครรู้ช่วยหน่อยครับ แบ่งๆ กัน #CSSsummit
  • http://yfrog.com/gy57qfwj เหยด ทีนี้เป็น 3D Transform ครับ และนี่คือตาราง Browser Compatible (IE10 เหมือนเดิม)
  • เรื่อง CSS Transform แบบ 3D นี่ไม่ไหวจริงๆ ครับ สมองไม่รับเลย แค่ดูจอก็จะอ้วกแล้ว ใครมาจ้างทำเราก็หาจ้างคนอื่นต่อละกัน -_- #CSSsummit
  • #CSSsummit ต่อไป CSS Animation ครับ! กรุณาเปิดเพลงแสตมป์!
  • (ในห้องตอนนี้) @Rabbitinblack: “โห CSS นี่มันเป็นศิลปะจริงๆ T-T” @warong: “ไม่ใช่หรอก เราย่อศิลปะลงมาเป็น CSS ต่างหาก” เหยดดดด #CSSsummit
  • ไอ้เหี้ยยยยยยยย ใช้ CSS ทำกล่องเพจเกจ 3D หมุนได้ เป็น Perspective เหยดดดดดดดดดดด #CSSsummit (ตอนนี้เหยดพร้อมกันห้าคนเลยครับ)
  • @iPattt http://twitpic.com/5w7l84 – บรรยากาศในห้อง(ฟัง)สัมมนา #CSSSummit ครับ ที่บ้านลาร์ทพลาเค้าท์
  • วิทยากร #CSSsummit อีตา Greg แกพูดเกินเวลาครับ โดนดูดเสียงเลย 555
  • http://yfrog.com/h33beaej หนึ่งคอมเมนต์จากผู้ชมชาวไทยครับ #CSSSummit
  • พี่ @iPattt บอกว่าอยากไปเช่าที่ห้องประชุมแบบ CS Loxinfo แล้วเก็บตังค์คนเขาดู #CSSsummit จังเลย คือมันคุ้มค่าในการฟลัดไทม์ไลน์จริงๆ นะครับ
  • ต่อไปเป็นเรื่อง KeyFrame Animation ครับ บรรยายโดยวิทยากรสาว คุณ Weyl #CSSsummit (วิทยากรวันนี้มีผู้หญิงกับผู้ชายเท่าๆ กันเลยครับ)
  • ตอนนี้เจ๊วิทยากรกำลังสาธิตการทำ CSS Keyframe Animation ด้วยการ…?ทำเว็บที่มีหิมะโปรยปรายให้ดูครับ -..- นี่มันยุค พ.ศ.2544 รึไง!!!!
  • ขอบคุณครับ 😀 สรุปโน้ตที่ทวีต #CSSsummit ไว้ ?@cyberwakeup: @iannnnn คงได้เท่านี้ล่ะครับ นอนละครับ ง่วงกลิ้ง ล่ะ ครับ http://t.co/wSeEF82 ?
  • #CSSsummit เรื่อง Keyframes ขอไม่เกาะละกันนะครับ เว้นไว้อีกเรื่องละกันเพราะมันยิบไป ดูไปจดไปไม่ทันจริงๆ หาอ่านเอาง่ายกว่าจ้ะ
  • #CSSsummit เจ๊คนตะกี้เพิ่งจบครับ ที่เป็นเรื่อง Keyframe Animation (ไม่สนุก) ต่อไปเป็นเรื่อง W3c Conversions
  • #CSSsummit ว่าด้วยเรื่องความสามารถใหม่และการปรับตัวเพื่อใช้ CSS3 (เช่น background-position เปลี่ยนเป็นระบุได้ 4 พิกัดงี้)
  • #CSSsummit ใน CSS3 นั้นกำหนด background-repeat: repeat no-repeat; ได้ (ตัวแรกเป็นแกน x ตัวสองเป็นแกน y)
  • #CSSsummit background-clip กำหนดการซ่อนขอบของ background(image) ได้ เช่นจะซ่อนตรงนอกขอบ ในขอบ หรือแสดงแค่ตรงตำแหน่งเนื้อหาก็ได้
  • #CSSsummit background-size กำหนดค่าเป็น pixels หรือ percent ได้ แถมมี cover (เบียดเต็มขอบ) หรือจะ contain) แสดงเต็มภาพแบบร้านอัดรูป) ได้ด้วย
  • #CSSsummit ถ้าจะใช้ background-size เป็น cover/content กับให้ตั้งความสูงเป็น 100% ด้วย
  • #CSSsummit ความสามารถใหม่ ใส่ภาพพื้นหลังได้เยอะๆ ? background-image: url(‘img1.jpg’), url(‘img2.jpg’); ระบุตำแหน่ง,การซ้ำ คั่นด้วยลูกน้ำได้
  • #CSSsummit เราสามารถใส่ background ซ้อนกันได้หลายรูป,แบบ ทั้งรูปภาพ การไล่สี กำหนดพิกัดและการซ้ำเอาเองนะ
  • #CSSsummit เรื่อง border ก็กำหนด border-radius ได้นั่นแหละ อันนี้รู้กันอยู่แล้ว
  • http://yfrog.com/kkjp4yfj ใช้ความรู้เรื่องขอบใน CSS3 มาวาดรูปสามเหลี่ยมก็ได้นะ ดังภาพ #CSSSummit
  • http://yfrog.com/kim43fij โห อันนี้เป็นการใส่ภาพลงไปแล้วยืดเป็นพื้นหลังของวัตถุพอดี #CSSSummit
  • http://yfrog.com/h3cl8zgj โค้ดมึนหน่อย แต่นี่คือการกำหนดขอบภาพแบบล้ำ และสวยด้วยภาพ #CSSSummit
  • #CSSsummit ต่อไป box-shadow: x y blur spread color; อันนี้คงได้ใช้กันบ่อยละ ประยุกต์ไว้ทำอะไรเรืองแสงได้สนุกดี
  • #CSSsummit ถ้าเราใช้สีแบบ RGBA (มีความใสนิดนึง) แล้วเงาจะสวยสมจริงมากขึ้น เดี๋ยวเอาไว้ลอง
  • #CSSsummit โอ๊ะ เขาบอกว่า box-shadow สามารถใส่หลายๆ ค่าในวัตถุก้อนเดียวกันได้โดยคั่นลูกน้ำครับ ประยุกต์ทำกรอบภาพหลายชั้นได้เลย! ยังไม่เคยลอง
  • http://yfrog.com/h3wrlysj ตัวอย่างการใช้ box-shadow ซ้อนกันหลายชั้นเป็นกรอบรูปสวยมาก #CSSSummit
  • ส่วนเรื่อง Alpha Mask นี่งงครับ พอเข้าใจคอนเซปต์จาก Photoshop นะ แต่เอาไว้จะใช้ค่อยอ่านอีกทีละกัน (ตัวอย่างของวิทยากรไม่ค่อยสวย) #CSSsummit
  • #CSSsummit โอ้ จริงๆ เรื่อง CSS Image Mask นี่น่าสนใจมากๆ เลยนะครับ เอามาประยุกต์ทำอะไรแว้บๆ คล้ายๆ ภาพไอคอนเวกเตอร์เงาวาวๆ ได้เลย ไว้หาอ่าน
  • http://yfrog.com/kk522hvj ตัวอย่างการเอาไอคอนสีเดียวมา mask กับฉากหลังไล่สี #CSSSummit
  • #CSSsummit ต่อไปเป็นเรื่อง CSS Regions โดยสรุปคือการ Wrap ก้อนย่อหน้าตัวอักษรให้อยู่ในกรอบ shape ที่เราต้องการ ส่วน CSS Exclusions ก็ตรงข้าม
  • #CSSsummit วิทยากรกำลังสาธิตการใช้งาน CSS Framework หลายๆ เจ้าครับ (ขอข้ามไปนะ) เท่าที่ดู ช่วงนี้สาระแน่นเอี้ยดมาก เสียดายที่เริ่มง่วงแล้ว
  • ง่วงแล้ว นอนละครับ ทีแรกว่าจะอยู่ยันเช้า แต่เดี๋ยวทำงานไม่ไหว ขอบคุณที่ติดตามและไม่ติดตามแต่ทนรำคาญยามดึกไหวครับ 555 #CSSsummit
  • สัมมนา #CSSSummit วันสุดท้ายเริ่มแล้วครับ ไม่รู้คืนนี้จะโต้รุ่งแบบเมื่อวานได้หรือเปล่า เพราะเมื่อเช้าได้นอนหน่อยเดียวเอง -_-
  • เสียดายเปิด session แรกของคืนนี้เกือบไม่ทัน [การแก้ปัญหา CSS!!!] เพราะป้าวิทยากรแกพูดจะจบแล้ว งั้นดูนี่ละกัน http://t.co/wWp7WHm #CSSsummit
  • #CSSsummit หัวข้อต่อไปเป็นเรื่อง CSS3+jQuery ครับ หากสนใจลองแว้บๆ มามองแท็กนี้เอาเด้อ
  • #CSSsummit หัวข้อ jQuery+CSS3 กำลังมาครับ บรรยายโดยท่านเซียน @snookca (แค่ชื่อก็สนุกแล้วค่า)
  • http://yfrog.com/gyggnbulj ภาพนี้เป็นตัวแทน jQuery+CSS บทที่หนึ่งครับ #CSSSummit
  • #CSSsummit คุณสนุกเขาโชว์ Slot Machine ที่ทำจาก CSS+jQuery Animation ครับ เชิญชม http://t.co/a1UZiM2
  • พอเข้าช่วง jQuery Animation แล้วลายตาครับ พื้นฐานไม่แน่น บรรยายต่อไม่ถูก งั้นขอนั่งดูภาพรวมไปละกัน T-T #CSSsummit
  • อ้าว ไหงหัวข้อไม่ใช่การโกง CSS แล้วครับ แต่เป็นเรื่อง The Future of StyleSheet (ถึงว่าสิมันซ้ำกับป้าเมื่อสามทุ่ม สงสัยเขาขอสลับ) #CSSsummit
  • #CSSsummit วิทยากรท่านนี้กำลังบรรยายสรรพคุณความเมพของ SASS ครับ http://t.co/ldoqTHS มันคือตัวเพิ่มพลัง CSS ให้มีตัวแปร, ฯลฯลฯ ได้
  • #CSSsummit เขียน CSS แบบ Nested นี่เจ๋งจริงๆ ครับ แก้ความยุ่งยากได้เยอะเลย ทำไมเขาไม่ผลักให้เป็นมาตรฐานหว่
  • #CSSsummit ต่อไปเป็นเรื่อง CSS & eCSStender ครับ พอเข้าโหมดโปรแกรมเมอร์ 3 คาบติดๆ กันผมก็เริ่มง่วงแล้ว สงสัยคืนนี้ไม่ไหวจริงๆ T-T เตรียมนอน

ขอแถมทวิต @warong ด้วยครับ

  • http://t.co/bIlQzeE ลองดูครับว่า css3 มันงามงดแค่ไหน #csssummit
  • ผมว่าพลังอย่างนึงของ CSS3 น่าจะเป็นการทำให้ขั้นตอนการทำเว็บสามารถเป็นไปได้โดยไม่ต้องพึ่งพาแรงงาน Photoshop ในการทำให้ดีไซน์ปรากฏเป็นรูปร่าง
  • พลังอีกอย่างของ CSS3 น่าจะสนับสนุนพลังการทำธีมกึ่งสำเร็จรูปมากขึ้น ทำให้การผู้ผลิตธีมสามารถสร้างธีม Customize ได้เองทรงพลังกว่าเดิม
  • หาก CSS3 ไปได้ไกลและมี Browser รับรองมากกว่านี้ แรงงาน Photoshop จะจำเป็นน้อยลงในการทำเว็บ โปรแกรมเมอร์อาจทำเว็บได้เอง ดีไซเนอร์จะลดแรงงานลง

Comments

  1. เขี้ยวเสือๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆ

  2. ขอบคุณมากครับ กำลังหารายละเอียดพวกนี้อยู่เลย