minib0x: more than a box : including IT, website, craft, felt, handmade

ผ้าสักหลาด พิมพ์ลาย นำเข้าจากเกาหลี

admin — Fri, 11 May 2012 09:43:53 +0000

สำหรับใครที่ชื่นชอบการทำงานฝีมือ วันนี้มี ผ้าสักหลาดพิมพ์ลาย หรือที่เรียกว่า Pattern Felt นำเข้าจากเกาหลี ลายน่ารักมากๆ มานำเสนอ

ผ้าสักหลาดที่เห็นตามท้องตลาดทั่วไป มักจะเป็นสีพื้น ไม่มีลาย การทำลวดลาย มักจะต้องเกิดจากการตัดสีโน้น มาแปะสีนี้ หรือใช้วิธีปักให้เกิดลวดลาย

บางครั้งก็อาจจะทำให้ไม่ได้ลวดลายตามที่ต้องการ แต่ที่เกาหลี เค้าผลิตผ้าสักหลาด ที่พิมพ์เป็นลวดลายต่างๆ เรียกได้ว่าเกือบสำเร็จรูปเลยทีเดียว

มาให้เราตัด เย็บ แปะ ประกอบร่าง เป็นผลงานสุดเก๋ได้อย่างสะดวก รวดเร็ว และขั้นตอนก็ง่ายมาก

ซึ่ง ผ้าสักหลาดพิมพ์ลาย (Pattern Felt) นี้ สามารถนำไปประยุกต์การใช้งานได้หลากหลาย ไม่ว่าจะเป็น นำไปเย็บประกอบเป็น กระเป๋าสตางค์

กระเป๋าใส่กล้อง กระเป๋าใส่ดินสอ ปกสมุด พวงกุญแจ หรือนำไปประกอบเป็นลวดลายบนชิ้นงานที่มีอยู่แล้ว เรียกได้ว่า สารพัดประโยชน์มากๆ

ขึ้นอยู่กับ การออกแบบของแต่ละคนเลยทีเดียว

ใครที่สนใจสามารถ pre order ได้ที่นี่ minib0xshop หรือผ่านทาง เฟสบุ๊ค

SelectedItem.Value vs SelectedValue

admin — Fri, 11 Feb 2011 09:01:17 +0000

เคยสงสัยมั้ยว่า SelectedItem.Value กับ SelectedValue ต่างกันอย่างไร

ทั้งสองคำสั่ง ล้วนเป็นคำสั่งที่ใช้ในการดึงค่าออกมาจาก control ใน .net framework เช่น dropdownlist, radiobuttonlist เป็นต้น แต่

- SelectedValue จะ return เป็นค่าของ SelectedItem ดังนั้นถ้าไม่มีค่าก็จะแสดงเป็นค่า “”

- SelectedItem.Value จะ return เป็นค่าของ item ที่ถูก select ดังนั้นถ้าไม่มี item ที่ถูก select จะ error

PXtoEM

admin — Fri, 28 Jan 2011 09:59:03 +0000

ในการทำเว็บไซต์จำเป็นต้องกำหนดขนาดของตัวอักษรให้แสดงผลตามที่ต้องการ

หน่วยที่ใช้วัดขนาดของตัวอักษรก็มีมากมาย…

px หรือ pixel เป็นหน่วยของการกำหนดค่าขนาดของตัวอักษร แบบกำหนดค่าที่แน่นอน ซึ่งจะไม่สามารถขยายหรือย่อได้ตามความต้องการ
em เป็นหน่วยแบบสัมพันธ์ ซึ่งจะต้องมีการกำหนดฐานว่าต้องการให้มีขนาดเท่าไร โดยที่ 1em จะมีขนาดเท่ากับตัวอักษรที่กำหนดเป็นฐาน การใช้หน่วย em นี้ เมื่อมีการขยายหรือย่อ ขนาดของตัวอักษรนั้นจะยืดหรือหดได้ตามต้องการ
% หรือ percent หน่วยนี้จะคล้ายๆ em คือ 100% จะมีค่าเท่ากับขนาดฐานที่กำหนดไว้
pt หรือ point มีขนาด 1/72 นิ้ว

16px = 1em = 100% = 12pt

ถึงแม้ว่าเบราเซอร์รุ่นใหม่ๆ สามารถย่อหรือขยายตัวอักษรได้เอง แม้ไม่ได้กำหนดเป็น em แต่เบราเซอร์เก่าๆ เช่น IE6 ยังไม่สามารถย่อหรือขยายได้ ดังนั้นการสร้างเว็บไซต์ที่ดีควรกำหนดขนาดตัวอักษรให้เป็น em

ในการออกแบบหน้าเว็บไซต์ส่วนใหญ่ Designer จะกำหนดมาให้เป็นหน่วย px ดังนั้นผู้พัฒนาเว็บไซต์จึงต้องทำการแปลงค่า pixel ให้เป็น em ซึ่งเว็บไซต์ PXtoEM.com เป็นตัวเลือกที่ดีในการแปลงค่ากลับไป กลับมา โดยที่เราไม่ต้องมานั่งคำนวณเองให้เสียเวลา การใช้งานเว็บ PXtoEM.com นั้นก็ง่ายแสนง่าย เชื่อหรือไม่ คลิกเข้าไปลองใช้กันได้เลย

นอกจากจะมีการแปลงค่าหน่วยของตัวอักษรแล้ว ในเว็บไซต์ PXtoEM.com ยังมีส่วนของ Get CSS ซึ่งเป็นการสร้าง CSS ตามขนาดของตัวอักษรที่เราเลือก

และสุดท้ายในส่วนของ Learn ยังมีความรู้อธิบายเกี่ยวกับหน่วยของขนาดตัวอักษรให้เราศึกษาอีกด้วย

กล่าวได้ว่า เว็บไซต์ PXtoEM.com ถือเป็นตัวช่วยสำคัญของผู้พัฒนาเว็บไซต์เลยทีเดียว

Color: Color Scheme Designer

admin — Wed, 26 Jan 2011 03:25:46 +0000

ในการออกแบบเว็บไซต์ เลือกสีสันให้กับ theme นั้น บางครั้งก็จะเจอปัญหาที่ว่า จะเลือกสีไหนดี สีไหนควรใช้คู่กับสีไหนดี เว็บไซต์ colorschemedesigner เป็นตัวช่วยในการเลือกสีได้เป็นอย่างดี

ภาพหน้าตาเว็บไซต์ colorschemedesigner เมื่อเลือกโทนสีแบบ monochromatic

สามารถดูตัวอย่างเว็บไซต์ที่ใช้สีตามที่เราเลือกได้ด้วย โดยคลิก Light page example หรือ Dark page example

ภาพตัวอย่างของ light page example เมื่อเลือกสีแดง โทน mono

ภาพตัวอย่างของ dark page example เมื่อเลือกสีแดง โทน mono

เมื่อเลือก Export > HTML+CSS จะได้สีพร้อมรหัสสีทั้งหมด สามารถนำไปสร้าง theme หรือ template ได้ตามต้องการ โดยไม่ต้องไปเปิดโปรแกรมอื่น เพื่อดูรหัสสี

ภาพตัวอย่างของหน้า export

ต่อจากนี้การเลือกใช้สีในการสร้าง theme หรือ template ก็เป็นแค่เรื่องง่ายๆ

Color

admin — Wed, 17 Nov 2010 02:40:26 +0000

ในการออกแบบเว็บไซต์ จำเป็นต้องมีสีเข้ามาเกี่ยวข้อง เนื่องจากสีเป็นตัวควบคุมความรู้สึกของผู้ที่เข้ามาชมเว็บไซต์

แม่สีทางศิลปะ มีด้วยกัน 3 สี คือ สีแดง สีเหลือง และสีน้ำเงิน เมื่อนำแม่สีทั้งหลายมาผสมกัน จะเกิดเป็นสีต่างๆ มากมาย ดูได้จากวงล้อสี

วงล้อสี

สีทั้งหลายแบ่งออกเป็น 2 กลุ่มตามความเข้มของสี (tone of color) ได้แก่

- สีวรรณะเย็น (cold tone color) ได้แก่ สีเหลือง ส้ม แดง ม่วง ทำให้เกิดความรู้สึก สุภาพ สงบ สดชื่น

- สีวรรณะร้อน (warm tone color) ได้แก่ สีเหลือง เขียว ฟ้า ม่วง ทำให้เกิดความรู้สึก ตื่นเต้น กระฉับกระเฉง มีพลัง ดึงดูดความสนใจได้ดี

*สีเหลือง และสีม่วง เป็นสีที่สามารถอยู่ได้ทั้งสองวรรณะ

การเลือกใช้โทนสี ก็แบ่งได้อีกหลายประเภท

1.Monochromatic เป็นการใช้สีเพียงแค่สีเดียวทั้งภาพ แต่จะใช้ความแตกต่างของความเข้ม และความสว่างของสี

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

3. Complementary
เป็นการใช้สีที่อยู่ตรงกันข้ามในวงล้อสี เช่น ฟ้าตรงข้ามกับส้ม แดงตรงข้ามกับเขียว ม่วงตรงข้ามกับเหลือง เป็นต้น ซึ่งการแสดงโดยใช้สีตรงข้ามนี้จะให้ความรู้สึกมีพลัง

4. Split-analogous เป็นการใช้สีโดยมีสีหลัง 1 สีและมีสีรอง 2 สี ซึ่งเป็นสีที่อยู่ห่างจากสีหลักในแต่ละข้าง 1 ช่องในวงล้อสี เช่น สีแดง ฟ้า ม่วง

5. Triadic เป็นการใช้สี 3 สีที่มีระยะห่างเท่าๆ กันในวงล้อสี เช่น สีแดง ฟ้า เหลือง

6. Tetradic color scheme เป็นการใช้สี 4 สีที่มีความสัมพันธ์กันในวงล้อสี เช่น การใช้สีที่ตรงข้ามกัน 2 คู่

อ่านรายละเอียดเพิ่มเติมได้ที่นี่ color scheme in wiki

Fail Whale by CSS ONLY!

admin — Fri, 25 Jun 2010 07:05:10 +0000

วันนี้มีสิ่งที่น่าสนใจมาให้ดูกัน เป็นภาพ Fail Whale ของ twitter

ซึ่งสิ่งที่จะได้เห็นต่อไปนี้ ทำจาก CSS ล้วนๆ เลย เจ๋งมากๆ

การแสดงผลของ chrome และ safari จะแสดงผลเป็นภาพเคลื่อนไหว เนื่องจากใช้ webkit ตัวเดียวกัน

firefox ก็ภาพสวยแต่ไม่เคลื่อนไหว ส่วน ie นั้นเหรอ ก็อย่างที่รู้ๆ กัน การแสดงผลค่อนข้างต่างจาก

browser ตัวอื่นๆ จากโลมากลายเป็นหุ่นยนต์ไปซะงั้น อิอิ

ยิ่งเจ้า ie6 ตัวดี นอกจากโลมาจะกลายเป็นหุ่นยนต์แล้ว นกที่แบกโลมาก็ดูท่าทางจะไม่ค่อยสบายด้วย

ขอบคุณเรื่องราวดีๆ จาก Pure CSS Twitter Fail Whale – By Steve Dennis

และสามารถดูการแสดงผลรวมทั้งโค้ดได้ที่ Pure CSS Twitter Fail Whale (CSS Version)

คลิกขวา view source ดูจะเห็น code เอาไว้ศึกษากันได้นะคะ

ภาพประกอบการทดสอบโดย browser ต่างๆ

1. Chrome : ภาพสวยสุด + เคลื่อนไหว (ทดสอบโดย chrome 5.0)

Fail Whale - Chrome

2. Firefox ภาพสวย เหมือน chrome แต่ไม่เคลื่อนไหว (ทดสอบโดย firefox 3.5.10)

Fail Whale - Firefox

3. safari ภาพสวยใช้ได้ แตกต่างจาก chrome ตรงบริเวณน้ำ แต่มีการเคลื่อนไหว

Fail Whale - Safari

4. Internet Explorer ภาพทั้งหมดแสดงเป็นเหลี่ยมๆ ทั้ง โลมา นก น้ำ และฉากสีฟ้า

Fail Whale - IE 8

Fail Whale - IE 7

Fail Whale - IE 6