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










รายละเอียดการทวิต 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 ไว้ [email protected]: @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 จะจำเป็นน้อยลงในการทำเว็บ โปรแกรมเมอร์อาจทำเว็บได้เอง ดีไซเนอร์จะลดแรงงานลง