เริ่มต้นกับโค้ดยอดฮิตใน CSS3

() translation by (you can also view the original English article)

CSS3 นั้นเป็นหนึ่งในเทคโนโลยีจุดเจ๋งที่ให้เราได้ใช้กันในขณะนี้ ด้วยฟีเจอร์หลากหลายที่มันมีให้ มันเป็นไปได้ที่จะสร้างเอฟเฟกต์ที่คุณเคยสร้างได้ใน Photoshop โดยใช้โค้ด CSS ข้อดีของมันนั้นคือจัดการได้มากกว่า โหลดได้รวดเร็วกว่า และเข้ากับเทรนด์ทำเว็บยุคใหม่ได้ดีกว่าด้วย เพื่อที่จะเรียนเกี่ยวกับโค้ดยอดฮิตเหล่านี้ คุณจะสามารถรวมพวกมันเข้าด้วยกันเพื่อสร้างสุดยอดกราฟิกเอฟเฟกต์ เชิญอ่านถัดไปได้เลย

CSS3 นั้นมีลูกเล่นที่หลากหลาย แต่ด้วยบางส่วนของพวกมันนั้น มันจำเป็นอย่างยิ่งที่ต้องเรียนรู้ถ้าคุณกำลังสร้างเลียนแบบเอฟเฟกต์ของ Photoshop ให้ได้ มันเลยได้เป็น "โค้ดยอดฮิต" (The power tools) อย่างไงหล่ะ โดยพวกมันจะทำสิ่งเหล่านี้ได้

การสร้างขอบมน (Border Radius)
การสร้างเงา (Box Shadow)
การสร้างเงาตัวอักษร (Text Shadow)
การสร้างเกร์เดียนท์ (Gradient)
ใส่ Background หลายๆ อันในที่เดียว (Multiple Backgrounds)

ในแต่ละลูกเล่นเหล่านี้สามารถช่วยเราทดแทนการใช้ image จากเดิมที่คุณต้องสร้างใน Photoshop มาก่อนในอดีต ด้วยการทำสิ่งเหล่านี้ คุณสามารถสร้างเว็บไซต์ของคุณที่สามารถจัดการได้ง่าย ตั้งแต่คุณสามารถเปลี่ยน property ด้วยการเปลี่ยนที่ CSS file แทนที่จะแก้ไขรูปภาพโดยใช้ Photoshop คุณยังสามารถสร้างเว็บไซต์ของคุณให้โหลดได้รวดเร็วขึ้น เพราะ image นั้นกิน bandwidth จำนวนมาก มาเริ่มสำรวจลูกเล่นเหล่านี้ทีละอันกันเลย

โค้ดที่ 1: Border Radius

บราวเซอร์ที่รองรับ

Safari: 3.2+
Firefox: 3.0+
Chrome: 3.0+
Opera: 10.5+
Internet Explorer: 9.0+

ถ้าคุณเขียน CSS เป็นระดับหนึ่ง คุณคงได้ยินคำว่า border-radius มาเป็นล้านครั้งแล้วหล่ะ มันง่ายมากๆ ที่จะใช้มันและใช้งานได้ในทุกๆ บราวเซอร์รุ่นปัจจุบันได้แล้ว การใช้ border radius นั้นคือวิธีการสร้างมุมมนด้วย CSS แน่นอน ไม่ต้องใช้ image จากภายนอก ลองมองดูที่ syntax เหล่านี้สิ

1
2	-webkit-border-radius: size;
3	-moz-border-radius: size;
4	border-radius: size;

มี 3 syntax ที่คุณต้องใช้ อันแรกสำหรับบราวเซอร์ Webkit เช่น Safari, Chrome และอันที่สองสำหรับบราวเซอร์ Mozilla เช่น Firefox และ สุดท้ายคือ un-prefixed เวอร์ชัน สำหรับบราวเซอร์ตัวอื่นๆ ที่ยังพอใช้มันได้บ้างเช่น IE9, Opera และ Safari 5

ลองใส่ 10 pixel border radius ไปที่ div เพื่อสร้างเอฟเฟกต์ดังต่อไปนี้

โอเค มันง่ายมากใช่ไหมหล่ะ งั้นมาดูโค้ดอันต่อกันเลย

โค้ดที่ 2: Box Shadow

บราวเซอร์ที่รองรับ

Safari: 3.2+
Firefox: 3.5+
Chrome: 3.0+
Opera: 10.5+
Internet Explorer: 9.0+

Box shadow ก็เป็นอีกหนึ่งที่บราวเซอร์หลายตัวให้การ support แล้ว syntax ของมันจะเป็นแบบนี้

1
2	-webkit-box-shadow: offset_x offset_y blur_radius color;
3	-moz-box-shadow: offset_x offset_y blur_radius color;
4	box-shadow: offset_x offset_y blur_radius color;

อีกครั้งที่เราใช้ vendor prefix สำหรับ Webkit และ Mozilla พารามิเตอร์ตัวแรกและตัวที่สองของพร้อพเพอร์ตี้ box-shadow จะให้ค่า offset จากด้านซ้ายและด้านบนเทียบกับอิลิเมนต์ ตั้งค่า Positive value ไปที่พร้อพเพอร์ตี้เหล่านี้เพื่อทำให้แสงเงาถูกเลื่อนไปทางขวาและล่างเทียบกับอิลิเมนต์ และใส่ค่าติดลบเพื่อจะทำให้เงาเคลื่อนที่ไปทางซ้ายและทางด้านบนเทียบกับอิลิเมนต์ ค่า blur_radius คือปริมาณความเบลอที่คุณต้องการ (ค่ามากเบลอมากค่าน้อยเบลอน้อย) และสำหรับพารามิเตอร์ตัวสุดท้ายคือสี ด้วยการเพิ่มเงาเข้าไป อิลิเมนต์ที่เราเคยสร้างขึ้นมาจากโค้ดที่ 1 ก็จะสร้างเอฟเฟ็กต์ที่สวยงาม

1
2	-webkit-box-shadow: 5px 5px 10px #555;
3	-moz-box-shadow: 5px 5px 10px #555;
4	box-shadow: 5px 5px 10px #555;

นอกจากนี้ฟีเจอร์ยอดเยี่ยมของ box-shadow คือการใช้ inset เมื่อคำสั่ง inset ได้ถูกใช้ เงาจะถูก render ภายใต้ box แทนที่จะเป็นข้างนอก นี่สามารถสร้างกล่องที่ดูดี โดยเฉพาะอย่างยิ่งสำหรับปุ่มต่างๆ นี่คือสิ่งที่ div ของเราจะเป็นเมื่อใช้เงาแบบ inset แทน

1
2	-webkit-box-shadow: 0 0 20px #333 inset;
3	-moz-box-shadow: 0 0 20px #333 inset;
4	box-shadow: 0 0 20px #333 inset;

ฟีเจอร์สุดท้ายของ box shadow ที่ควรค่าแก่การกล่าวถึงมากที่สุดคือความสามารถที่จะมีเงาหลายเงาซ้อนกัน (mutiple shadows) บนอิลิเมนต์เดียวกันได้ อันนี้จะมีประโยชน์และสามารถลดมาร์คอัพจำนวนมากใน HTML ลง เพียงแค่ใส่เงาเข้าไปเพิ่มเติมเท่านั้น สิ่งที่คุณต้องทำคือเขียนคำสั่งให้แยกกันด้วยคอมม่า ดังตัวอย่าง

1
2	-webkit-box-shadow: 0 0 20px #333 inset,
3	20px 15px 30px yellow,
4	-20px 15px 30px lime,
5	-20px -15px 30px blue,
6	20px -15px 30px red;
7
8	-moz-box-shadow: 0 0 20px #333 inset,
9	20px 15px 30px yellow,
10	-20px 15px 30px lime,
11	-20px -15px 30px blue,
12	20px -15px 30px red;
13
14	box-shadow: 0 0 20px #333 inset,
15	20px 15px 30px yellow,
16	-20px 15px 30px lime,
17	-20px -15px 30px blue,
18	20px -15px 30px red;

โค้ดที่ #3: Text Shadow (สร้างเงาตัวอักษร)

บราวเซอร์ที่รองรับ

Safari: 3.2+
Firefox: 3.5+
Chrome: 3.0+
Opera: 10.1+
Internet Explorer: หวังว่าจะใช้ได้ในเร็วๆ นี้!

เงาตัวอักษรนั้นเหมือนกับ box shadow ยกเว้นแต่ว่าเงาของพวกมันนั้นสำหรับตัวอักษรแทนที่จะใช้สำหรับอิลิเมนต์ทั่วๆ ไป โชคยังดีที่ไม่ต้องใช้ vendor prefix อื่นๆ สำหรับ text shadow

1
2	text-shadow: offset_x offset_y blur_radius color;

การตั้งค่าสำหรับ text shadow นั้นเหมือนกับ box-shadow ยกเว้นแต่ไม่มีการใช้ inset ซึ่ง text shadow นั้นยังไม่รองรับ นี่คือตัวอย่างที่สร้างข้อความแนวล่องหนไว้บนหน้าเพจ

1
2	color: #fff /* text color to white */
3	text-shadow: 0 0 50px #333;

มันจะสร้างเอฟเฟกต์ดังรูป

เหมือนกับ box shadow มันเป็นไปได้ที่จะมีเงาหลายอันซ้อนกันเช่นกัน (multiple text shadows) เพียงแต่คั่นแต่ละอันด้วยเครื่องหมายคอมม่า นี่คือตัวอย่างที่สร้างเอฟเฟกต์ตัวอักษรไฟ

1
2	text-shadow: 0 0 4px #ccc,
3	0 -5px 4px #ff3,
4	2px -10px 6px #fd3,
5	-2px -15px 11px #f80,
6	2px -18px 18px #f20;

Text Shadow สามารถสร้างเอฟเฟกต์บางอย่างที่น่าตื่นตาตื่นใจได้และสามารถผสมกับเอฟเฟกต์อื่นได้เป็นอย่างดี

โค้ดที่ #4: Gradient (เกร์เดียนท์)

บราวเซอร์ที่รองรับ

Safari: 4+
Firefox: 3.6+
Chrome: 5+
Opera: หวังว่าจะใช้ได้ในเร็วๆนี้!
Internet Explorer: หวังว่าจะใช้ได้ในเร็วๆนี้!

Gradient คือหนึ่งในคำสั่งที่ทรงพลังที่สุดที่สามารถนำมาสร้างเอฟเฟกต์ที่สุดยอดได้ ขณะที่บราวเซอร์หลายรุ่นให้การซัพพอร์ตแล้ว คุณยังสามารถเขียนโค้ด fallback ไว้เผื่อรุ่นเก่าๆ ได้ด้วย จำไว้ว่า เว็บไซต์นั้นไม่จำเป็นต้องดูเหมือนกันสำหรับทุกบราวเซอร์ มีเกรเดียนท์สองแบบที่คุณสามารถสร้างได้คือ linear gradient และ radial gradient ตามที่เข้าใจกันเลย linear gradient เป็นการสร้างเกร์เดียนท์แบบเส้นตรงส่วน radial gradient เป็นการสร้างเกร์เดียนท์วงกลมจากจุดศูนย์กลาง Gradient สามารถใช้ที่ไหนก็ได้ คุณสามารถใส่มันแทนที่ image เดิม หรืออาจจะเป็น background border-image หรือแม้แต่ list-bullet ก็ตามที

โชคไม่ค่อยดี สำหรับ Web Developer มันต้องใช้ Syntax ทั้งสองแบบ อย่างหนึ่งสำหรับ Mozilla และ อีกอันสำหรับ Webkit

Syntax สำหรับ Webkit

ทั้ง Safari และ Chrome มันจะเป็น syntax เดียวกันเสมอเพราะมันใช้เอนจิ้น Webkit สำหรับการ render ซึ่ง syntax นั้นค่อนข้างง่าย

1
2	-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

Webkit ใช้ syntax เดียวกันสำหรับ linear และ radial เกร์เดียนท์ แค่เปลี่ยนพารามิเตอร์ type เท่านั้นเอง

Syntax สำหรับ Mozilla

Firefox ใช้ syntax ที่ต่างกันออกไปทั้งสำหรับ linear และ radial ซึ่งต่างกับของ Webkit

1
2	-moz-linear-gradient( [<point> \|\| <angle>,]? <stop>, <stop> [, <stop>]*)
3	-moz-radial-gradient( [<position> \|\| <angle>,]? [<shape> \|\| <size>,]? <stop>, <stop>[, <stop>]*)

ลองพิจารณาดู syntax ทั้งสองแยกจากกัน

Linear เกร์เดียนท์

ง่ายที่สุดเลย นี่คือ Webkit syntax สำหรับสร้าง linear gradient

1
2	-webkit-gradient(linear, start_x start_y, end_x end_y, stop, stop...)

Firefox syntax จะเป็นประมาณนี้

1
2	-moz-linear-gradient(angle start_x start_y, stop, stop...)

ใน Webkt syntax ค่าพารามิเตอร์ start_x และ start_y จะระบุถึงตำแหน่งเริ่มต้นของ gradient และ end_x และ end_y จะระบุถึงตำแหน่งสิ้นสุดของเกร์เดียนท์ คุณสามารถใช้ค่า CSS dimension ทั่วไปได้อย่างเช่นค่า percentage หรือ keyword ต่างๆ เช่น left, top, bottom, right และ center สำหรับพารามิเตอร์ position เหล่านี้ พารามิเตอร์ Stop คือ วิธีสำหรับคุณที่จะระบุจุดหยุดสีเฉพาะตำแหน่งสำหรับ gradient คุณสามารถมีสีหลายๆ จุด stop ตราบเท่าที่คุณต้องการ แต่คุณต้องมีอย่างน้อย 2 จุด คือ จุดเริ่มต้นและจุดสิ้นสุด สำหรับจุด stop เพิ่มเติมอื่นๆ คุณสามารถใช้คำสั่ง color-stop() ฟังก์ชันที่ให้ค่าเป็นเปอร์เซ็นต์ตั้งแต่ 0 ถึง 1 เหมือนกับ color ยกตัวอย่าง color-stop(50%, black) นั้นจะสร้างจุด Stop สีดำในตำแหน่งกึ่งกลางของ gradient พอดิบพอดี แทนที่จะเขียน 0% และ 100% สำหรับจุดเริ่มต้นและสิ้นสุด มันจะสะดวกกว่าที่จะใช้ function from() และ to() ที่มีอยู่แล้วแทน ทั้งหมดที่คุณต้องใส่ไปคือค่าสีที่คุณต้องการ

syntax ของ Firefox จะตรงไปตรงมามากกว่า และมีหลายวิธีที่จะทำเป้าหมายเดียวกันให้สำเร็จ มีเพียงสิ่งเดียวที่เหมือนกันเกี่ยวกับ syntax คือ color stop ที่ซึ่ง color ตามด้วยตำแหน่งในรูปแบบเปอร์เซ็นต์ สำหรับตำแหน่งเริ่มต้นและตำแหน่งสิ้นสุด คุณสามารถเว้น 0% และ 100% ออกไป และถ้าคุณเว้นตำแหน่งที่ว่านั้น Color Stop อื่นๆ จะกระจายไปเท่าๆ กันแทนทั่ว gradient ไม่เหมือนกับ Webkit syntax ที่ Syntax ของ Firefox จะไม่มีจุดสิ้นสุด มีเพียงแค่จุดเริ่มต้นและค่ามุม gradient นั้นจะวิ่งออกนอกจุดเริ่มต้นและจุดสิ้นสุดภายใต้ค่ามุมที่กำหนด ถ้าคุณไม่ได้ใส่ค่ามุม มันจะวิ่งจากจุดนั้น ถ้าคุณไม่ใส่จุดเริ่มต้นทั้งหมด gradient จะวิ่งจากด้านบนไปด้านล่าง Syntax ดังกล่าวค่อนข้างสับสนและไม่ยืดหยุ่น

นี่คือโค้ด CSS gradient แบบง่ายๆ และใช้ได้จริง จากตัวอย่าง เกร์เดียนท์วิ่งจากมุมบนซ้ายไปมุมล่างซ้าย (หรือวิ่งจากบนลงล่างนั้นแหละ) จากสีแดงไปหาสีขาว

1
2	-webkit-gradient(linear, left top, left bottom, from(red), to(white));
3	-moz-linear-gradient(red, white)

ตั้งค่าพวกนี้ในพร้อพเพอร์ตี้ background ของอิลิเมนต์ div แล้วเราจะได้ผลลัพธ์ดังต่อไปนี้

ด้วยการเพิ่ม color stop และ เปลี่ยนค่า angle ของ gradient เราจะพบกับเอฟเฟกต์ที่เปลี่ยนไป

1
2	-webkit-gradient(linear, left top, right bottom, from(red), color-stop(50%, white), to(red));
3	-moz-linear-gradient(left top, red, white, red);

Radial Gradient

นี่คือ syntax สำหรับ radial gradient สำหรับ Webkit

1
2	-webkit-gradient(radial, inner_circle_center_x inner_circle_center_y, inner_circle_radius,
3	outer_circle_center_x outer_circle_center_y, outer_circle_radius,
4	stop, stop...)

Syntax สำหรับ Firefox จะเป็นประมาณนี้

1
2	-moz-radial-gradient(center_x center_y, shape size, stop, stop...)

สำหรับ syntax ของ Webkit นั้นค่อนข้างซับซ้อนกว่า syntax ของ linear gradient แต่หลักการเดียวกันยังใช้ได้ Radial gradient ใน Webkit จะมีวงกลมสองอัน วงกลมเริ่มต้นและวงกลมสิ้นสุด คุณสามารถระบุตำแหน่งจุดศูนย์กลาง X และ Y สำหรับแต่ละวงกลมพร้อมกับค่ารัศมี สุดท้ายคุณสามารถระบุตำแหน่งของ color stop ในแบบเดียวกับที่ใช้ใน linear gradient

สำหรับ syntax ใน Firefox ของ radial gradient นั้นจะเหมือนกับ linear gradient ทั้งหมด ยกเว้นส่วนของ color stop นั้นจะไม่มี คุณสามารถระบุตำแหน่งศูนย์กลาง X และ Y ของ gradient เหมือนกับในตำแหน่ง inner circle ใน Webkit Syntax แต่จะไม่มีวงกลมด้านนอกสำหรับ Firefox ยกเว้นแต่คุณสามารถระบุรูปร่างและขนาดของเกร์เดียนท์ รูปทรงสามารถเป็นได้ทั้งวงกลมและวงรี นอกนั้นรูปทรงอื่นๆ จะทำไม่ได้ใน Webkit สำหรับค่า size นั้นจะยอมรับคีย์เวิร์ดที่หลากหลาย แต่ไม่ใช่ขนาด pixel เหมือนที่คุณคาดไว้ คุณสามารถอ่านเกี่ยวกับค่าคงที่เหล่านี้ได้ใน Mozilla Developer Center สำหรับบทความนี้ เราจะใช้เพียงแค่ค่าดีฟอลต์ อีกครั้ง ถ้าคุณไม่ต้องการใส่ค่าตำแหน่งศูนย์กลาง X และ Y มันจะถูกสมมุติว่าเป็นจุดศูนย์กลางของวัตถุที่คุณใส่เกร์เดียนท์ไว้แทน ถ้าคุณเอาค่า shape และ size ออก เกร์เดียนท์นั้นจะถูกสมมุติว่าใช้ค่า circle เพื่อเติมกล่องนั้นให้เต็ม

1
2	-webkit-gradient(radial, center center, 0, center center, 50, from(white), to(red));
3	-moz-radial-gradient(white, red)

ถ้าคุณใส่ gradient ไปที่พื้นหลังของ div นี่คือสิ่งที่เราจะได้รับ

โค้ดที่ #5: Multiple Backgrounds

บราวเซอร์ที่รองรับ

Safari: 3.2+
Firefox: 3.6+
Chrome: 3.0+
Opera: 10.5+
Internet Explorer: 9.0+

Mutiple backgrounds ทำให้มันง่ายที่จะสร้างเอฟเฟกต์ซับซ้อนใน CSS โดยไม่ต้องสร้าง Markup ใหม่ใน HTML การมีข้อสนับสนุนนี้หมายถึงอิลิเมนต์สามารถมีเกร์เดียนท์หลายๆ อัน และ background ที่เป็น image ควบคู๋กันไปด้วยกับ background color ที่เป็นพื้นฐานอันเดิมอยู่แล้ว มันไม่มีความต่างระหว่าง syntax ของ multiple background จาก single background แค่เพียงใช้คอมม่าในการแยกพวกมันออกเท่านั้น จากนั้นคุณก็ลุยได้เลย

นี่คือตัวอย่างของ div ที่ใช้กับ gradient background และเอฟเฟกต์ text สวยๆ ที่ใช้ image

1
2	background: url(noise.png), -webkit-gradient(linear, left top, left bottom, from(#999), to(#333));
3	background: url(noise.png), -moz-linear-gradient(#999, #333);

เราจำเป็นต้องประกาศมันสองครั้ง ตั้งแต่ที่เราเรียนมา นี่คือข้อแตกต่างระหว่างเกร์เดียน syntax สำหรับบราวเซอร์แต่ละตัว นี่จะสร้างเอฟเฟกต์ดังต่อไปนี้

รวมความรู้ที่ได้มาทั้งหมด มาสร้าง CSS3 Button สวยๆ กัน

และแล้วเราก็ได้เรียนรู้โค้ดคำสั่งสำคัญๆ ทั้ง 5 แบบไปแล้ว เริ่มจับมันสร้างเอฟเฟกต์สวยๆ ที่ใช้งานได้จริงกันเถอะ

มีรูปแบบปุ่มจำนวนมากมายที่คุณสามารถเลือกมาทำได้ ง่ายที่สุดเลย ลองลอกแบบที่มันมีอยู่แล้ว ปุ่มสไตล์ Mac OS X ไง

เราจะเริ่มด้วยโค้ด HTML ดังตัวอย่างด้านล่าง มันค่อนข้างเรียบง่าย แค่ div สองอันและ text อีกเล็กน้อย

1
2	<div class="panel">
3	<div class="button">Button</div>
4	</div>

และเราจะเริ่มด้วย CSS พื้นฐาน เริ่มแรกที่โดยการใส่สไตล์ panel ก่อน


.panel {
    background: -webkit-gradient(linear, left top, left bottom, from(#bbbcbb), to(#959695));
    background: -moz-linear-gradient(#bbbcbb, #959695);
    background-color: #b7b9b7;
    width: 100px;
}

panel นั้นเป็นแค่ที่ครอบสวยๆ ให้กับปุ่มของเรา มันมีเกร์เดียนจากด้านบนสู่ด้านล่างระหว่างสีเทาทั้งสอง สำหรับบราวเซอร์ที่ไม่สนับสนุนการใช้เกร์เดียนท์ โค้ด fallback background เลยจำเป็นที่จะต้องใส่เข้าไปด้วย

และแล้ว มาดู CSS สำหรับตัวปุ่มกัน


.button {
    display: inline-block;
    margin: 20px;

    padding: 3px 6px;
    font-family: 'Lucida Grande', Arial, sans-serif;
    font-size: 13px;

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;

    border: 1px solid rgba(0, 0, 0, 0.6);

    background: -webkit-gradient(linear, left top, left bottom, from(#fbfcfb), to(#9d9e9d));
    background: -moz-linear-gradient(#fbfcfb, #9d9e9d);
    background-color: #c0c2c0;

    text-shadow: rgba(255, 255, 255, 0.4) 0px 1px;

    -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 1px;
    -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 1px;
    box-shadow: rgba(255, 255, 255, 0.4) 0 1px;

    -webkit-user-select: none;
    -moz-user-select: none;
    cursor: default;
}

มันค่อนข้างใช้โค้ดเยอะพอสมควรเลยทีเดียว ซึ่งส่วนมากเป็นโค้ดที่เราเรียนกันไปแล้ว ยกเว้น multiple background โค้ดนั้นแบ่งเป็นส่วนสำคัญๆ หลายส่วน ที่ซึ่งเราจะมาดูกันทีละอัน สำหรับสองบรรทัดแรกนั้นแค่การจัด layout การทำให้ปุ่มนั้น display: inline-block นั้นจะทำให้มันขยายตามขนาดของเนื้อหาที่อยู่ด้านใน ไม่ว่าจะมีข้อความอยู่มากมายแค่ไหนภายในปุ่ม ถัดไปคือการใส่ข้อมูล font สุดท้าย ใน section ที่สาม เราจะใช้สิ่งที่เรียนรู้มาอันแรกเลยคือเรื่อง border radius ในกรณีนี้สำหรับปุ่มที่แสนน่ารักของเรา เราจะใส่ค่า radius ให้มัน 3px ถัดไปเราก็ใส่ border ให้กับปุ่ม สังเกตว่าเราจะใช้ rgba เป็นค่าสีที่นี่ มันจะช่วยให้เราใส่สีที่โปร่งแสงได้ (transparent) อย่างที่เราต้องการ สร้างสีเทาสวยๆ ในโค้ดส่วนถัดไป เราจะตั้งค่าพื้นหลังของปุ่ม เราจะใส่เกร์เดียนท์ให้พื้นหลัง เหมือนกันกับสีเรียบๆ เป็นสี fallback ในกรณีที่บราวเซอร์นั้นไม่สนับสนุนการใช้เกร์เดียนท์ ถัดไปเราจะใช้ text shadow เพื่อสร้างข้อความที่ดูลึกเข้าไปในปุ่ม และอีกครั้ง เราจะใช้ rgba ที่นี่เพื่อทำให้เกิดการโปร่งแสงสีขาวสำหรับ text shadow เป็นส่วนที่เป็นท่าไม้ตายในการสร้าง box shadow เลย และแล้ว มันก็ยังดูไม่เหมือนเงาเสียทีเดียว มันค่อนข้างดูเหมือน border อันที่สอง แต่มันก็ใส่ไฮไลท์เข้าไปในปุ่มเพื่อให้มันดูลึกเข้าไปในพื้นหลังและตัดกันกับสีของ border นี่เป็นทริคที่สำคัญที่คุณต้องรู้เลยถ้าคุณต้องการบางสิ่งบางอย่างที่ดูเหมือน border หลายๆ ชั้นซ้อนกัน ผู้เขียนเองได้ใช้มันหลายครั้งเลยทีเดียว ใน CSS ส่วนสุดท้าย คือทริคเจ๋งๆ ที่ป้องกันการ select ในบราวเซอร์ที่ใช้เอนจิ้นท์ Webkit และ Firefox และตั้งค่า cursor เป็นลูกศรแบบดีฟอลต์แทนที่จะเป็น cursor ที่ใช้สำหรับการ select

และแล้ว โค้ดนั้นจะทำให้ปุ่มนั้นเป็นแบบนี้

โอเค มันก็ดูไม่แย่นะ งั้นเราจะใส่โค้ดในกรณีที่ปุ่มถูกกดไปแล้วกัน มาดูโค้ดกรณีที่ปุ่มถูกกดไปแล้วดังนี้

1
2	.button:active {
3	background: #B5B5B5;
4	-webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 1px,
5	black 0px 1px 3px inset,
6	rgba(0, 0, 0, 0.4) 0px -5px 12px inset;
7
8	-moz-box-shadow: rgba(255, 255, 255, 0.4) 0 1px,
9	black 0px 1px 3px inset,
10	rgba(0, 0, 0, 0.4) 0px -5px 12px inset;
11
12	box-shadow: rgba(255, 255, 255, 0.4) 0 1px,
13	black 0px 1px 3px inset,
14	rgba(0, 0, 0, 0.4) 0px -5px 12px inset;
15
16	text-shadow: rgba(255, 255, 255, 0.3) 0px 1px;
17	}

เมื่อปุ่มถูกกดลงไป เราจะเปลี่ยนตัวเลขบางสิ่งบางอย่าง อย่างแรกเลย เราจะตั้งค่า background ไปที่สีเรียบๆ และก็เอาเกร์เดียนท์ที่เราเพิ่งเคย set ไปก่อนออก นี่เพราะว่าเราต้องการสร้างหน้าตาสำหรับปุ่มที่ถูกกดไปแล้วด้วย box shadow แทนการใช้ gradient สิ่งถัดไปที่เราจะต้องทำ คือการใช้เงานั้น หรือเงาหลายๆ อันซ้อนกัน เงาแรกในรายการคือนั้นเหมือนกับอันที่เราใช้กับสถานะปกติ - ที่ไฮไลต์ใต้ปุ่ม และอันที่สองและเงาที่สามคืออันที่ทำให้ปุ่มเราดูเหมือนถูกกด อันแรกของสิ่งเหล่านี้คือเงา inset สีดำ ที่ตั้งค่า down จากด้านบน 1 pixel และ มี 3 pixels สำหรับค่าความเบลอ มันค่อนข้างเป็นเงาที่ดูมืด และเงาอันสุดท้ายนั่นก็มีสีดำเหมือนกัน แต่ค่อนข้างเป็นสีดำโปร่งแสงที่ติดตั้งจากด้านล่าง 5 pixel ด้วยค่าความเบลอ 12 pixel มันจะสร้างมุมมองแบบมืดๆ บนใต้ของปุ่มเมื่อถูกกด และสิ่งสุดท้ายที่เราต้องการทำนั่นก็คือเมื่อปุ่มนี้ถูกกดลง มันก็จะลดค่า opacity ของ text shadow ด้วยสัมผัสเดียว ดังนั้นมันจะไม่แสดงออกมาเหมือนกับนิ้วที่เจ็บ

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

สรุป

การแทนที่ image ด้วย CSS3 ส่งผลดีหลายประการ มันช่วยให้งานของคุณในฐานะนักพัฒนาเว็บไซต์ง่ายขึ้นตั้งแต่คุณไม่ต้องเปิด Photoshop ทุกเวลาตอนที่คุณต้องการเปลี่ยนแปลง user interface มันทำให้เว็บไซต์หรือเว็บแอพพลิเคชันนั้นโหลดได้เร็วขึ้นเพราะมันไม่ต้องโหลดรูปขนาดใหญ่จำนวนมาก และมันยังช่วยให้เราสร้างประสบการณ์ที่อินเทอร์แอคทีฟ น่าตื่นตาตื่นใจสำหรับผู้ใช้ ทำให้พวกเขาอยากกลับมาเยี่ยมเราบ่อยขึ้น

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

ภาพ iPhone ที่ถูกสร้างด้วย CSS3 ล้วนๆ

ตัวอย่างแรก ถูกสร้างโดย Jeff Batterton เป็นภาพ iPhone สร้างด้วย CSS3 ล้วนๆ ไม่มี image เจือปนเลย มันค่อนข้างน่าประทับใจ โดยการใช้ CSS gradient, text shadow, box shadow, transition และ transform โชคไม่ค่อยดี ปัจจุบันมันจะใช้ได้เพียงแค่บราวเซอร์ที่เป็น Webkit เท่านั้น เช่น Chrome หรือ Safari เป็นต้น เป็นการบ้านให้คุณสร้างแบบที่มันทำงานได้เป็น Firefox แล้วหล่ะ

ไอคอน iOS ที่สร้างด้วย CSS3 ล้วนๆ

อีกตัวอย่างหนึ่ง บางทีจะน่าตื่นตาตื่นใจมากขึ้น มันถูกเขียนโดย Louis Harboe มันจะเป็นการสร้างบางสิ่งของ iOS ไอคอนในรูปแบบ CSS ล้วนๆ และเป็นจริงและการสร้างซ้ำสำหรับมันนั่นแหละ เดโมมันนี้ยังทำงานได้ใน Webkit บราวเซอร์เท่านั้น ถ้าคุณต้องการเรียนรู้เพิ่มเติมว่า ทำอย่างไรจึงจะสร้าง icon แบบนี้ได้ คุณต้องรีบไปที่บล็อคของ Louis Harboe ที่ๆ ซึ่งเขา อธิบาย กระบวนการไว้

ผู้เขียนหวังว่าคุณจะชื่นชอบบทความนี้นะ สามารถติดต่อผู้เขียนบทความต้นฉบับได้ที่ Twitter หรือเขียนข้อคิดเห็นได้ที่กล่องคอมเม้นต์ได้เลย

เริ่มต้นกับโค้ดยอดฮิตใน CSS3 - Power Tools

โค้ดที่ 1: Border Radius

โค้ดที่ 2: Box Shadow

โค้ดที่ #3: Text Shadow (สร้างเงาตัวอักษร)

โค้ดที่ #4: Gradient (เกร์เดียนท์)

Syntax สำหรับ Webkit

Syntax สำหรับ Mozilla

Linear เกร์เดียนท์

Radial Gradient

โค้ดที่ #5: Multiple Backgrounds

รวมความรู้ที่ได้มาทั้งหมด มาสร้าง CSS3 Button สวยๆ กัน

สรุป

ภาพ iPhone ที่ถูกสร้างด้วย CSS3 ล้วนๆ

ไอคอน iOS ที่สร้างด้วย CSS3 ล้วนๆ