Blog

[WordPress] แก้ปัญหา 404 ของตัว Pagination

วันก่อนเจอปัญหาว่า ในหน้าที่เป็น Category เวลาคลิ๊กลิงก์ของตัว Pagination (ที่เราเห็น 1, 2, 3, …, 10 อะไรพวกนั้นละครับ) แทนที่จะเป็นหน้าถัดไป มันดันขึ้นเป็นหน้า 404 พยายามหาวิธีแก้เลยไปเจอตัว Plugin ที่ใช้แก้ปัญหานี้ ถ้าใครเจอปัญหานี้ ลองโหลด Plugin ไปแก้ปัญหาดูนะครับ

Plugin : Category pagination fix
Plugin : Custom Post Type Category Pagination Fix

December 21, 2011
อยากเรียน Web Design ฟรี ดูใน iTunes ดิ

ใน iTunes นั้นจะมีส่วนของ Podcasts ซึ่งมีหลายเรื่องที่เราสนใจไว้ให้ได้ดู ได้ฟังแบบฟรีบ้าง เสียเงินบ้าง แต่เรามาหาแบบฟรีกันดีกว่า ลองไปดูว่ามีอันไหนบ้าง

Think Vitamin Radio

View in iTunes : Think Vitamin Radio

Web Designer Podcast

View in iTunes : Web Designer Podcast

Web Design TV

View in iTunes : Web Design TV

Sitepoint

View in iTunes : Sitepoint

This Week in Photography

View in iTunes : This Week in Photography

Web Design Tuts+

View in iTunes : Web Design Tuts+

Photoshop Webdesign.de

View in iTunes : Photoshop Webdesign.de

WebDevDesign

View in iTunes : WebDevDesign

Freelance Radio

View in iTunes : Freelance Radio

Mac Tips and Tricks

View in iTunes : Mac Tips and Tricks

MailChimp Academy

View in iTunes : MailChimp Academy

37signals Podcast

View in iTunes : 37signals Podcast

AppClinic – graphic design tutorials

View in iTunes : AppClinic – graphic design tutorials

Founders Talk

View in iTunes : Founders Talk

Web Design 101

View in iTunes : Web Design 101

CreativeXpert Design Interviews

View in iTunes : CreativeXpert Design Interviews

Voices of Design

View in iTunes : Voices of Design

Xcode Quick Tips

View in iTunes : Xcode Quick Tips

jQuery for Designers

View in iTunes : jQuery for Designers

Facebook 101

View in iTunes : Facebook 101

CSS-Tricks Screencast

View in iTunes : CSS-Tricks Screencast

Pragmatic Podcasts

View in iTunes : Pragmatic Podcasts

ที่มา : 22 Memorable Podcasts Focused on Web Design

December 20, 2011
[CSS] คำสั่งทั่วไปที่ใช้จัดการฟอนต์
หลังจากที่ทำความรู้จักกับคำสั่งที่ใช้จัดการข้อความแล้ว เรามาทำความรู้จักกับคำสั่งที่ใช้จัดการกับตัวอักษรกันนะครับ

CSS : font-family

font-family นั้นใช้สำหรับกำหนดฟอนต์ของตัวอักษร ซึ่งตระกูลฟอนต์ที่เหมาะกับการใช้งานสำหรับเว็บไซต์นั้น ให้ดูที่ Web Safe Font Combinations ตัวอย่างในการใช้ font-family นั้นเป็นแบบนี้ครับ
```
font-family: 'Times New Roman', Times, serif;
```
font-family : “Times New Roman”, Times, serif
Tart bear claw cake. Halvah danish bear claw tootsie roll gummies. Sugar plum lollipop fruitcake lollipop cupcake pudding bear claw. Gingerbread sweet roll danish. Marzipan donut powder danish cheesecake bonbon. Danish cheesecake macaroon marzipan jujubes dessert.
font-family : Georgia, serif
Tart bear claw cake. Halvah danish bear claw tootsie roll gummies. Sugar plum lollipop fruitcake lollipop cupcake pudding bear claw. Gingerbread sweet roll danish. Marzipan donut powder danish cheesecake bonbon. Danish cheesecake macaroon marzipan jujubes dessert.
font-family : Arial, Helvetica, sans-serif
Tart bear claw cake. Halvah danish bear claw tootsie roll gummies. Sugar plum lollipop fruitcake lollipop cupcake pudding bear claw. Gingerbread sweet roll danish. Marzipan donut powder danish cheesecake bonbon. Danish cheesecake macaroon marzipan jujubes dessert.
font-family : Impact, Charcoal, sans-serif
Tart bear claw cake. Halvah danish bear claw tootsie roll gummies. Sugar plum lollipop fruitcake lollipop cupcake pudding bear claw. Gingerbread sweet roll danish. Marzipan donut powder danish cheesecake bonbon. Danish cheesecake macaroon marzipan jujubes dessert.
font-family : “Trebuchet MS”, Helvetica, sans-serif
Tart bear claw cake. Halvah danish bear claw tootsie roll gummies. Sugar plum lollipop fruitcake lollipop cupcake pudding bear claw. Gingerbread sweet roll danish. Marzipan donut powder danish cheesecake bonbon. Danish cheesecake macaroon marzipan jujubes dessert.
font-family : “Lucida Console”, Monaco, monospace
Tart bear claw cake. Halvah danish bear claw tootsie roll gummies. Sugar plum lollipop fruitcake lollipop cupcake pudding bear claw. Gingerbread sweet roll danish. Marzipan donut powder danish cheesecake bonbon. Danish cheesecake macaroon marzipan jujubes dessert.

ลองเลือก font-family ที่ถูกใจแล้วนำไปใช้ดูนะครับ

CSS : font-size

font-size เป็นการกำหนดขนาดของตัวอักษร
```
font-size: 16px;
```
อย่างเช่น

ตัวอย่างข้อความ font-size: 10px

ตัวอย่างข้อความ font-size: 20px

ตัวอย่างข้อความ font-size: 30px

ตัวอย่างข้อความ font-size: 1em

ตัวอย่างข้อความ font-size: 2em

ตัวอย่างข้อความ font-size: 1rem

ตัวอย่างข้อความ font-size: 2rem

CSS : font-style

font-style กำหนดลักษณะของตัวอักษร จะเป็นตัวธรรมดา หรือว่าตัวเอียง
- normal : ตัวธรรมดา
- italic : ตัวเอียง
```
font-style: italic;
```
ตัวอย่างข้อความ font-style: normal
ตัวอย่างข้อความ font-style: italic

CSS : font-variant

font-variant ทำให้ตัวอักษรที่เป็นตัวพิมพ์เล็ก กลายเป็นตัวพิมพ์ใหญ่ที่มีขนาดเล็ก
```
font-variant : small-caps;
```
ตัวอย่างนะครับ

font-variant: normal
font-variant: small-caps

CSS : font-weight

font-weight เป็นคำสั่งที่กำหนดความหนาของตัวอักษร ส่วนมากจะใช้อยู่แค่ normal และ bold
```
font-weight: bold;
```
ดูตัวอย่างนะครับ

ตัวอย่างข้อความ font-weight: normal
ตัวอย่างข้อความ font-weight: bold

Edited : 18/02/2022

สำหรับในปัจจุบัน จะเห็นว่าตัวอักษรนั้น มีน้ำหนักที่ใช้สำหรับเว็บไซต์หลากหลายมากขึ้น ดังนั้นค่าที่ใช้งาน ปัจจุบันความนิยมการใช้งานไม่ได้มีแค่ normal และ bold อีกแล้ว โดยน้ำหนักของตัวอักษร หรือความหนาของตัวอักษรนั้น ถ้าเป็นค่าตัวเลข จะมีค่าอยู่ระหว่าง 100 – 900

ค่าที่เราสามารถใช้กับ font-weight ได้นั้น มีดังนี้
```
font-weight: normal;
font-weight: bold;

/* ตัวเลขระบุน้ำหนักของตัวอักษร */
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400; // สำหรับ normal จะมีค่าน้ำหนักอยู่ที่ 400
font-weight: 500;
font-weight: 600;
font-weight: 700; // สำหรับ bold จะมีค่าน้ำหนักอยู่ที่ 700
font-weight: 800;
font-weight: 900;
```
December 19, 2011
[CSS] คำสั่งทั่วไปที่ใช้จัดการกับข้อความ
ข้อความต่าง ๆ ที่ปรากฎในหน้าเว็บของเรานั้น เราสามารถใช้ CSS กำหนดอะไรได้บ้าง ลองไปดูกันนะครับ

CSS : color

อย่างแรกคงเป็นสีของข้อความ โดยคำสั่งที่ใช้ก็คือ color โดยเราสามารถกำหนดค่าสีได้ 3 แบบหลัก ๆ ก็คือ
- ใช้ค่า HEX เช่น #ff0000
- ใช้ค่า RGB เช่น rgb(255,0,0)
- ใช้ชื่อสี เช่น red โดยชื่อสีนั้นไปดูได้ที่ ชื่อสีต่าง ๆ
ตัวอย่างการใช้งานก็เช่น
```
<p style="color: #7d007d;">ทดสอบการใช้ Color</p>
<p style="color: rgb(125, 50, 75);">ทดสอบการใช้ Color</p>
<p style="color: hotpink;">ทดสอบการใช้ Color</p>
```
ผลลัพธ์ที่ได้จะเป็นลักษณะแบบนี้ครับ

ทดสอบการใช้ Color

ทดสอบการใช้ Color

ทดสอบการใช้ Color

จะถนัดใช้แบบไหนก็เลือกเอาเลยครับ ต่อมาเราจะกำหนดการจัดข้อความ

CSS : text-align

ในการจัดข้อความนั้น เราสามารถจัดข้อความได้ 4 แบบดังนี้
- left : การจัดข้อความให้ชิดด้านซ้าย ซึ่งค่านี้จะเป็นค่าพื้นฐานของการจัดข้อความ
- right : การจัดข้อความให้ชิดด้านขวา
- center : การจัดข้อความให้อยู่ตรงกลาง
- justify : การจัดข้อความให้ชิดทั้งสองด้าน
ลองมาดูตัวอย่างกันนะครับ

text-align:left

Dessert dragée topping. Bonbon muffin ice cream brownie cupcake soufflé gingerbread. Tart ice cream pie icing chocolate chocolate.Topping powder gummi bears pie pastry. Donut marshmallow tiramisu liquorice gummi bears ice cream biscuit. Sugar plum croissant applicake muffin icing fruitcake muffin muffin brownie.

text-align:right

Dessert dragée topping. Bonbon muffin ice cream brownie cupcake soufflé gingerbread. Tart ice cream pie icing chocolate chocolate.Topping powder gummi bears pie pastry. Donut marshmallow tiramisu liquorice gummi bears ice cream biscuit. Sugar plum croissant applicake muffin icing fruitcake muffin muffin brownie.

text-align:center

Dessert dragée topping. Bonbon muffin ice cream brownie cupcake soufflé gingerbread. Tart ice cream pie icing chocolate chocolate.Topping powder gummi bears pie pastry. Donut marshmallow tiramisu liquorice gummi bears ice cream biscuit. Sugar plum croissant applicake muffin icing fruitcake muffin muffin brownie.

text-align:justify

Dessert dragée topping. Bonbon muffin ice cream brownie cupcake soufflé gingerbread. Tart ice cream pie icing chocolate chocolate.Topping powder gummi bears pie pastry. Donut marshmallow tiramisu liquorice gummi bears ice cream biscuit. Sugar plum croissant applicake muffin icing fruitcake muffin muffin brownie.

CSS : text-decoration

text-decoration นั้นสำหรับเพิ่มลูกเล่นนิดหน่อยให้กับข้อความ โดยจะมีค่าดังนี้
- none : ก็ตามชื่อเลยครับ ไม่ทำอะไรกับข้อความ
- underline : ขีดเส้นใต้ข้อความ
- overline : ขีดเส้นเหนือข้อความ
- line-through : ขีดเส้นทับข้อความ
- blink : ข้อความกระพริบ
ซึ่งส่วนใหญ่เราจะใช้ text-decoration กับตัว tag a เพื่อให้ตัวลิงก์ของเราไม่ขีดเส้นใต้ครับ

ตัวอย่างในแต่ละแบบนะครับ

text-decoration:none
text-decoration:underline
text-decoration:overline
text-decoration:line-through
text-decoration:blink

CSS : text-transform

สำหรับ text-transform นั้น จะทำให้ข้อความเรานั้นเป็นตัวพิมพ์เล็กหมด ตัวพิมพ์ใหญ่หมด หรือเฉพาะตัวแรกเป็นตัวพิมพ์ใหญ่เท่านั้น
- none : ก็ตามชื่อเลยครับ ไม่ทำอะไรกับข้อความ
- capitalize : เปลี่ยนตัวอักษรตัวแรกเป็นตัวพิมพ์ใหญ่
- uppercase : เปลี่ยนข้อความให้เป็นตัวพิมพ์ใหญ่
- lowercase : เปลี่ยนข้อความให้เป็นตัวพิมพ์เล็ก
มาดูตัวอย่างกันนะครับ โดยข้อความตัวอย่างผมจะใช้แบบนี้นะครับ

Example teXt-transForm

ลองมาดู text-transform ในแต่ละแบบกัน

text-transform:none
Example teXt-transForm
text-transform:capitalize
Example teXt-transForm
text-transform:uppercase
Example teXt-transForm
text-transform:lowercase
Example teXt-transForm

CSS : text-indent

เหมือนเป็นการย่อหน้าให้บทความ โดยเราสามารถใส่ค่าให้ได้ 2 แบบคือ
- เป็น % อย่างเช่น text-indent:25%; เป็นต้น
- เป็นค่าตัวเลข อย่างเช่น text-indent:10px; เป็นต้น
โดยค่าทั้งสองแบบ เราสามารถใส่ให้เป็นจำนวนติดลบได้ มาดูตัวอย่างกันนะครับ

text-indent:0;

Dessert dragée topping. Bonbon muffin ice cream brownie cupcake soufflé gingerbread. Tart ice cream pie icing chocolate chocolate.

Topping powder gummi bears pie pastry. Donut marshmallow tiramisu liquorice gummi bears ice cream biscuit. Sugar plum croissant applicake muffin icing fruitcake muffin muffin brownie.

text-indent:20px;

Dessert dragée topping. Bonbon muffin ice cream brownie cupcake soufflé gingerbread. Tart ice cream pie icing chocolate chocolate.

Topping powder gummi bears pie pastry. Donut marshmallow tiramisu liquorice gummi bears ice cream biscuit. Sugar plum croissant applicake muffin icing fruitcake muffin muffin brownie.

text-indent:50px;

Dessert dragée topping. Bonbon muffin ice cream brownie cupcake soufflé gingerbread. Tart ice cream pie icing chocolate chocolate.

Topping powder gummi bears pie pastry. Donut marshmallow tiramisu liquorice gummi bears ice cream biscuit. Sugar plum croissant applicake muffin icing fruitcake muffin muffin brownie.

text-indent:20%;

Dessert dragée topping. Bonbon muffin ice cream brownie cupcake soufflé gingerbread. Tart ice cream pie icing chocolate chocolate.

Topping powder gummi bears pie pastry. Donut marshmallow tiramisu liquorice gummi bears ice cream biscuit. Sugar plum croissant applicake muffin icing fruitcake muffin muffin brownie.

text-indent:50%;

Dessert dragée topping. Bonbon muffin ice cream brownie cupcake soufflé gingerbread. Tart ice cream pie icing chocolate chocolate.

Topping powder gummi bears pie pastry. Donut marshmallow tiramisu liquorice gummi bears ice cream biscuit. Sugar plum croissant applicake muffin icing fruitcake muffin muffin brownie.

text-indent:-50px;

Dessert dragée topping. Bonbon muffin ice cream brownie cupcake soufflé gingerbread. Tart ice cream pie icing chocolate chocolate.

Topping powder gummi bears pie pastry. Donut marshmallow tiramisu liquorice gummi bears ice cream biscuit. Sugar plum croissant applicake muffin icing fruitcake muffin muffin brownie.

text-indent:-10%;

Dessert dragée topping. Bonbon muffin ice cream brownie cupcake soufflé gingerbread. Tart ice cream pie icing chocolate chocolate.

Topping powder gummi bears pie pastry. Donut marshmallow tiramisu liquorice gummi bears ice cream biscuit. Sugar plum croissant applicake muffin icing fruitcake muffin muffin brownie.

CSS : line-height

line-height คือระยะห่างระหว่างแนวตั้ง สำหรับ line-height เราสามารถกำหนดค่าได้
- เป็นจำนวน เช่น 1.2, 1.5, 3.4 เป็นต้น โดยจะนำค่านี้ไปคูณกับขนาดของตัวอักษร เพื่อให้ได้มาเป็น line-height อย่างเช่น ข้อความมีขนาด 14px แล้วเรากำหนด line-height:1.5 แสดงว่า line-height มีค่าเท่ากับ 14 คูณ 1.5 เท่ากับ 21px
- เป็นค่าตัวเลขพร้อมหน่วย เช่น 14px, 1.5em เป็นต้น
- เป็น % เช่น 90%, 120%, 150% โดยจะนำ % ไปคูณกับขนาดของตัวอักษรเหมือนกับการกำหนดค่าเป็นจำนวน
มาดูตัวอย่างกันนะครับ

line-height : normal
Pudding ice cream croissant cotton candy sweet chocolate bar. Marshmallow pie tootsie roll sesame snaps pie jelly biscuit lemon drops cupcake. Toffee jelly tootsie roll halvah bonbon donut chocolate cake cupcake marshmallow. Icing sweet roll jelly-o croissant ice cream chocolate bar dragée tootsie roll. Wafer chocolate sugar plum jelly beans pastry dragée halvah. Candy powder oat cake bonbon gummi bears bonbon caramels applicake muffin.
line-height : 1
Pudding ice cream croissant cotton candy sweet chocolate bar. Marshmallow pie tootsie roll sesame snaps pie jelly biscuit lemon drops cupcake. Toffee jelly tootsie roll halvah bonbon donut chocolate cake cupcake marshmallow. Icing sweet roll jelly-o croissant ice cream chocolate bar dragée tootsie roll. Wafer chocolate sugar plum jelly beans pastry dragée halvah. Candy powder oat cake bonbon gummi bears bonbon caramels applicake muffin.
line-height : 1.5
Pudding ice cream croissant cotton candy sweet chocolate bar. Marshmallow pie tootsie roll sesame snaps pie jelly biscuit lemon drops cupcake. Toffee jelly tootsie roll halvah bonbon donut chocolate cake cupcake marshmallow. Icing sweet roll jelly-o croissant ice cream chocolate bar dragée tootsie roll. Wafer chocolate sugar plum jelly beans pastry dragée halvah. Candy powder oat cake bonbon gummi bears bonbon caramels applicake muffin.
line-height : 3
Pudding ice cream croissant cotton candy sweet chocolate bar. Marshmallow pie tootsie roll sesame snaps pie jelly biscuit lemon drops cupcake. Toffee jelly tootsie roll halvah bonbon donut chocolate cake cupcake marshmallow. Icing sweet roll jelly-o croissant ice cream chocolate bar dragée tootsie roll. Wafer chocolate sugar plum jelly beans pastry dragée halvah. Candy powder oat cake bonbon gummi bears bonbon caramels applicake muffin.
line-height : 0px
Pudding ice cream croissant cotton candy sweet chocolate bar. Marshmallow pie tootsie roll sesame snaps pie jelly biscuit lemon drops cupcake. Toffee jelly tootsie roll halvah bonbon donut chocolate cake cupcake marshmallow. Icing sweet roll jelly-o croissant ice cream chocolate bar dragée tootsie roll. Wafer chocolate sugar plum jelly beans pastry dragée halvah. Candy powder oat cake bonbon gummi bears bonbon caramels applicake muffin.
line-height : 14px
Pudding ice cream croissant cotton candy sweet chocolate bar. Marshmallow pie tootsie roll sesame snaps pie jelly biscuit lemon drops cupcake. Toffee jelly tootsie roll halvah bonbon donut chocolate cake cupcake marshmallow. Icing sweet roll jelly-o croissant ice cream chocolate bar dragée tootsie roll. Wafer chocolate sugar plum jelly beans pastry dragée halvah. Candy powder oat cake bonbon gummi bears bonbon caramels applicake muffin.
line-height : 28px
Pudding ice cream croissant cotton candy sweet chocolate bar. Marshmallow pie tootsie roll sesame snaps pie jelly biscuit lemon drops cupcake. Toffee jelly tootsie roll halvah bonbon donut chocolate cake cupcake marshmallow. Icing sweet roll jelly-o croissant ice cream chocolate bar dragée tootsie roll. Wafer chocolate sugar plum jelly beans pastry dragée halvah. Candy powder oat cake bonbon gummi bears bonbon caramels applicake muffin.
line-height : 42px
Pudding ice cream croissant cotton candy sweet chocolate bar. Marshmallow pie tootsie roll sesame snaps pie jelly biscuit lemon drops cupcake. Toffee jelly tootsie roll halvah bonbon donut chocolate cake cupcake marshmallow. Icing sweet roll jelly-o croissant ice cream chocolate bar dragée tootsie roll. Wafer chocolate sugar plum jelly beans pastry dragée halvah. Candy powder oat cake bonbon gummi bears bonbon caramels applicake muffin.
line-height : 50%
Pudding ice cream croissant cotton candy sweet chocolate bar. Marshmallow pie tootsie roll sesame snaps pie jelly biscuit lemon drops cupcake. Toffee jelly tootsie roll halvah bonbon donut chocolate cake cupcake marshmallow. Icing sweet roll jelly-o croissant ice cream chocolate bar dragée tootsie roll. Wafer chocolate sugar plum jelly beans pastry dragée halvah. Candy powder oat cake bonbon gummi bears bonbon caramels applicake muffin.
line-height : 100%
Pudding ice cream croissant cotton candy sweet chocolate bar. Marshmallow pie tootsie roll sesame snaps pie jelly biscuit lemon drops cupcake. Toffee jelly tootsie roll halvah bonbon donut chocolate cake cupcake marshmallow. Icing sweet roll jelly-o croissant ice cream chocolate bar dragée tootsie roll. Wafer chocolate sugar plum jelly beans pastry dragée halvah. Candy powder oat cake bonbon gummi bears bonbon caramels applicake muffin.
line-height : 150%
Pudding ice cream croissant cotton candy sweet chocolate bar. Marshmallow pie tootsie roll sesame snaps pie jelly biscuit lemon drops cupcake. Toffee jelly tootsie roll halvah bonbon donut chocolate cake cupcake marshmallow. Icing sweet roll jelly-o croissant ice cream chocolate bar dragée tootsie roll. Wafer chocolate sugar plum jelly beans pastry dragée halvah. Candy powder oat cake bonbon gummi bears bonbon caramels applicake muffin.
line-height : 200%
Pudding ice cream croissant cotton candy sweet chocolate bar. Marshmallow pie tootsie roll sesame snaps pie jelly biscuit lemon drops cupcake. Toffee jelly tootsie roll halvah bonbon donut chocolate cake cupcake marshmallow. Icing sweet roll jelly-o croissant ice cream chocolate bar dragée tootsie roll. Wafer chocolate sugar plum jelly beans pastry dragée halvah. Candy powder oat cake bonbon gummi bears bonbon caramels applicake muffin.
December 18, 2011
[CSS] วิธีใช้ background เบื้องต้น
มาทำความเข้าใจการใช้งานคำสั่ง background สำหรับ css กันนะครับ เพราะเชื่อว่านี่เป็น 1 ในคำสั่งที่ใช้บ่อยเป็นอันดับต้น ๆ และคนหัดทำ css น่าจะรู้จักมันไว้

CSS : background

มาดูกันก่อนนะครับ ว่า background นั้น มันมีแบ่งย่อยอะไรบ้าง เพื่อเราจะได้รู้ว่า เราสามารถกำหนดอะไรให้คำสั่ง background ได้
- background-color : สีของพื้นหลัง
- background-image : รูปที่นำมาใช้เป็นพื้นหลัง
- background-repeat : คำสั่งนี้จะคู่กับ background-image เพื่อจะสั่งให้พื้นหลังนำรูปมาใช้ซ้ำ
- background-attachment : คำสั่งนี้ก็ใช้คู่กับ background-image เหมือนกัน เพื่อจะกำหนดรูปว่าให้อยู่กับที่ หรือเคลื่อนตาม
- background-position : คำสั่งนี้ก็ใช้คู่กับ background-image เช่นเดียวกัน โดยเป็นการกำหนดตำแหน่งเริ่มต้นที่รูปนี้จะไปอยู่
คราวนี้ เรามาดูวิธีการใช้ในแต่ละคำสั่งกันนะครับ

background-color

background-color นั้นใช้งานไม่ยากเลย มีวิธีการกำหนดสีหลัก ๆ อยู่ 3 แบบ ได้แก่
- ใช้ค่า HEX เช่น #ff0000
- ใช้ค่า RGB เช่น rgb(255,0,0)
- ใช้ชื่อสี เช่น red โดยชื่อสีนั้นไปดูได้ที่ ชื่อสีต่าง ๆ
มาดูตัวอย่างกันนะครับ อย่างเช่นแบบนี้
```
<p style="background-color:#FF0000;">พื้นหลังสีแดง</p>
<p style="background-color:rgb(0,0,255);">พื้นหลังสีน้ำเงิน</p>
<p style="background-color:yellow">พื้นหลังสีเหลือง</p>
```
พื้นหลังสีแดง

พื้นหลังสีน้ำเงิน

พื้นหลังสีเหลือง

ทีนี้เวลาเราอยากให้ div หรือ element ไหนเรามีสีพื้นหลัง ก็ใช้ background-color ได้เลยครับ

background-image

สำหรับคำนี้เป็นเหมือนคำสั่งที่เชื่อมไปยังคำสั่งอื่น ๆ ที่เหลือ ถ้าไม่ได้สั่ง background-image คำสั่งที่เหลือยกเว้น background-color ก็ไม่มีความจำเป็น แล้ว background-image มันใช้งานยังไงละ
```
background-image:url('รูปภาพที่จะใช้งาน');
```
ทีนี้ปัญหาของบางคนคือ แล้วเราจะใส่ในส่วน “รูปภาพที่จะใช้งาน” ยังไงเหรอ ลองดูตัวอย่างนี้นะครับ

โดยเรามีรูป facebook อยู่สองรูป รูปที่อยู่ด้านนอกชื่อ out-facebook.png และรูปที่อยู่ใน folder images ชื่อ in-facebook.png ถ้าเราต้องการใช้งานรูป facebook ที่อยู่ด้านนอกให้สั่งใน css ว่า
```
background-image:url('out-facebook.png');
```
แต่ถ้าจะใช้รูปใน folder images ละ ซึ่งใน folder images นั้นก็มีรูป facebook ซึ่งมีชื่อรูปว่า in-facebook.png ดังนั้นเราก็ต้องสั่งว่า
```
background-image:url('images/in-facebook.png');
```
คราวนี้ผมย้ายตัว style.css เข้าไปไว้ใน folder css ละ ถ้าเราต้องการใช้งาน out-facebook.png ละต้องสั่งยังไง
```
background-image:url('../out-facebook.png');
```
การใส่ ../ คือ เหมือนออกมาจาก folder css ซึ่งเราก็จะมาเจอ out-facebook.png ดังนั้นถ้าต้องการใช้งาน in-facebook.png เราก็ต้องทำคล้าย ๆ คือ ออกจาก folder css ก่อน แล้วจึงเข้าไปยัง folder images ก็ต้องสั่งแบบนี้
```
background-image:url('../images/in-facebook.png');
```
ข้อสังเกตคือ ให้ยึดหลักว่าไฟล์ css ของเราอยู่ไหน แล้วเราก็จะทราบว่าต้อง url(‘XXXXX’) อย่างไร

แต่ถ้าเป็นในกรณีที่เราต้องการรูปจากเว็บอื่น หรือรูปที่เราทราบ url ก็ให้ใส่ส่งไปได้เลย อย่างเช่น

ผมจะใช้รูปยูริด้านบนมาเป็นพื้นหลัง โดย url ของรูปคือ https://rabbitinblack.com/wp-content/uploads/2011/12/yuri.jpg ดังนั้นผมก็ต้องสั่งว่า
```
background-image:url('https://rabbitinblack.com/wp-content/uploads/2011/12/yuri.jpg');
```
เราก็จะได้ผลลัพธ์ออกมาเป็นแบบนี้ครับ

จะเห็นว่ากล่องขนาดกว้าง 600px สูง 500px ถูกปูพื้นหลังด้วยรูปของยูริ แต่ถ้าเราต้องการแค่รูปเดียวละ ไม่ได้ต้องการให้ปูเต็มแบบนี้ ไปดูหัวข้อต่อไปเลยครับ

background-repeat

การที่ตัวอย่างหัวข้อที่แล้ว มีรูปของยูริปูเต็ม div นั้นเพราะว่าค่าพื้นฐานของ background-repeat ก็คือ repeat แล้ว background-repeat มีค่าอะไรให้เราใช้งานบ้างละ
- repeat : รูปจะถูกใช้ปูจนเต็ม
- repeat-x : รูปจะถูกใช้ปูจนเต็มในแนวนอน
- repeat-y : รูปจะถูกใช้ปูจนเต็มในแนวตั้ง
- no-repeat : รูปจะถูกใช้ครั้งเดียว
- inherit : สืบทอดค่ามา ทำความเข้าใจ inherit เพิ่มเติมได้ที่ inherit คืออะไร
เรามาดูตัวอย่างกันครับ ว่าแต่ละค่านั้นให้ผลลัพธ์ออกมาเป็นยังไง
```
background-repeat : repeat;
background-repeat : repeat-x;
background-repeat : repeat-y;
background-repeat : no-repeat;
```
repeat

repeat-x

repeat-y

no-repeat

background-attachment

สำหรับ background-attachment นั้นมีค่าให้ใช้งาน 3 ค่า คือ
- scroll: รูปจะเลื่อนไปตามการ scroll ซึ่งจะเป็นค่าพื้นฐานของคำสั่งนี้
- fixed : รูปจะไม่เลื่อนไปไหน จะอยู่กับที่
- inherit : สืบทอดค่ามา
มาดูตัวอย่างดีกว่าครับ น่าจะเข้าใจกันง่ายกว่า

scroll

fixed

จะเห็นว่า ถ้าใช้ scroll เมื่อเราเลื่อน scroll bar ด้านข้างแล้ว ยูริจะหายไป T-T
แต่ถ้าอยากให้ยูริยังอยู่กับเราที่เดิม ก็ให้ใช้ fixed แทนครับ \(^o^)/

background-position

มาถึงคำสั่งสุดท้ายแล้วครับ กับ background-position เราสามารถใส่ค่าให้มันได้หลัก ๆ 3 แบบ
- ใส่ค่าซ้าย ขวา กลาง เช่น background-position:left top คือให้รูปที่เป็นพื้นหลังอยู่ซ้ายบน
- ใส่เป็น % เช่น background-position:10% 30% คือจะคำนวนให้รูปอยู่ในตำแหน่งห่างจากด้านซ้ายมา 10% และจากด้านบนมา 30%
- ใส่เป็นค่าตัวเลข เช่น background-position:5px 10px คือให้รูปเริ่มต้นที่ตำแหน่งนับจากซ้ายมา 5px และจากด้านบนมา 10px
มาดูตัวอย่างกันนะครับ
```
background-position: right center;
background-position: 50% 50%;
background-position: 20px 40px;
```
background-position: right center;

background-position: 50% 50%;

background-position: 20px 40px;

วิธีใช้ background เบื้องต้นน่าจะมีเท่านี้ ยังไงก็ลองศึกษาแล้วนำไปประยุกต์ใช้งานดูนะครับ ^^
December 17, 2011
[HTML CSS] ขี้เกียจเขียน Form โว้ย FormBakery ช่วยด้วย

ไม่รู้ว่าหลาย ๆ คนเป็นเหมือนผมหรือเปล่า แต่ผมเนี่ยโคตรขี้เกียจจะเขียน Code HTML ที่มันเกี่ยวกับ Form ยังไงก็ไม่รู้บอกไม่ถูก เวลาตัดเว็บแล้วเจอ Form เนี่ยจะตัดช้าลงไปอย่างไม่น่าเชื่อ แล้วผมก็ไปเจอเว็บนี้ FormBakery ลองไปดูว่า FormBakery มันทำอะไรเกี่ยวกับ Form ให้เรานะครับ

FormBakery

มาเริ่มต้นอบ Form จากเตากัน จะเห็นมีส่วนผสม 5 อย่างให้เราเลือก

เราอยากได้ส่วนผสมไหน ก็ลากมาวางเลยครับ

เราสามารถปรับเปลี่ยนข้อความต่าง ๆ รวมถึง options ให้กับส่วนผสมเราได้

หลังจากที่ปรับแต่งจนเราพอใจแล้ว ก็กด Export เลยครับ

เราจะได้ Code HTML CSS ออกมาให้ใช้งานแล้วครับ

แต่ถ้าเป็นส่วนของ javascript และ php นั้นเราต้องจ่ายเงินเพิ่ม เพื่อที่จะรับ Code ในส่วนนั้น

แต่สำหรับผม ผมต้องการแค่ HTML CSS ดังนั้น FormBakery ก็ช่วยในสิ่งที่ผมต้องการครบแล้ว

ถ้าอยากจะไปลองอบ Form ของตัวเองดู ก็ไปที่ : FormBakery เลยครับ

December 16, 2011