Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS

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

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called CSS3 Mastery.
The 30 CSS Selectors You Must Memorize
Quick Tip: Mimic Equal Columns with CSS3 Gradients

Thai (ภาษาไทย) translation by Porrapat Petchdamrongskul (you can also view the original English article)

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

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

  1. การสร้างขอบมน (Border  Radius)
  2. การสร้างเงา (Box Shadow)
  3. การสร้างเงาตัวอักษร (Text Shadow)
  4. การสร้างเกร์เดียนท์ (Gradient)
  5. ใส่ 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 เหล่านี้สิ

มี 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 ของมันจะเป็นแบบนี้

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

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

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


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

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

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

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

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

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

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

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 นั้นค่อนข้างง่าย

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

Syntax สำหรับ Mozilla

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

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

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

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

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

ใน 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 แบบง่ายๆ และใช้ได้จริง จากตัวอย่าง เกร์เดียนท์วิ่งจากมุมบนซ้ายไปมุมล่างซ้าย (หรือวิ่งจากบนลงล่างนั้นแหละ) จากสีแดงไปหาสีขาว

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

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

Radial Gradient

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

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

สำหรับ 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 เพื่อเติมกล่องนั้นให้เต็ม

ถ้าคุณใส่ 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

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


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

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

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

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

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

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

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

มันค่อนข้างใช้โค้ดเยอะพอสมควรเลยทีเดียว ซึ่งส่วนมากเป็นโค้ดที่เราเรียนกันไปแล้ว ยกเว้น 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

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

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

เมื่อปุ่มถูกกดลงไป เราจะเปลี่ยนตัวเลขบางสิ่งบางอย่าง อย่างแรกเลย เราจะตั้งค่า 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 หรือเขียนข้อคิดเห็นได้ที่กล่องคอมเม้นต์ได้เลย

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.