CSS Style 3D

ถ้าหากต้องการแต่งตัวอักษรให้มีสีสวยงามดูมีมิติ ซึ่ง CSS ก็สามารถทำได้ง่ายๆ เพียงแค่เรานำ Style นี้ไปใช้ ตัวอักษรเราก็จะมีเอฟเฟค
เป็นเงา 3D แล้วครับ ตัวอย่างของ 3D CSS ตามรูปตัวอย่างนี้เลยครับมาดูการใช้งานกันนะครับ อยากแรกนำโค๊ด CSS ไปใช้กันก่อนนะครับตามตัวอย่างนี้เลยครับ
อย่างแรกเรามาสร้าง Style กันก่อนนะครับ โดยถ้าใครเขียน Css แยกไว้ก็นำ Style ไปเขียนที่ไฟล์นั้นตามนี้เลยนะครับ

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

h1 {
  text-shadow: 0 1px 0 #ccc, 
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
 
 
}

แต่ถ้าใครไม่ได้แยก CSSออก ให้แทรกไว้ในส่วนของ แท็ก head นะครับ นำโค๊ดนี้ไปแทรกระหว่างแท็ก head นะครับ

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

 
<style type="text/css">
 
h1 {
  text-shadow: 0 1px 0 #ccc, 
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
 
 
}
</style>

แค่นี้เราก็ได้ Style 3D ให้ตัวอักษรเราแล้วครับ จากตัวอย่างโค๊ด CSS นี้ตรง h1 ถ้าเราเรียกใช้แท็กนี้ ตัวอักษรก็จะเป็น Style 3D แล้วครับ ตัวอย่างการเรียกใช้ Style นะครับ

1

<h1>ทดสอบการใช้ CSS 3D</h1>

ในส่วนของ h1 ราสามารถเปลี่ยนได้นะครับ ไม่ว่าจะเป็นแท็ก B H2 H3.... หรือจะสร้าง คลาสหรือ ไอดี ก็ได้นะครับ

ที่มา : http://www.sadung.com/?p=6074

“ขนาด  851×315  pixel”

 คราวนี้ลองมาทำ effect สายฟ้า ไว้สำหรับตกแต่งภาพกันครับ วิธีทำไม่ยากเลยครับ ลองทำตามดูได้เลยนะครับ

        1.  สร้าง New Document ขึ้นมา กำหนดขนาดตามต้องการนะครับ

          2.เลือกเครื่องมือ Gradient Tool คลิ๊กเม้าส์ซ้ายค้าง ลากจากด้านซ้ายไปด้านขวา

          3. เลือก Filter > Render > Clouds

        4.  เลือก Filter > Render > Difference Clouds

        จะได้ภาพออกมาเป็นเส้นของสายฟ้าประมาณนี้

        5. กด  Ctrl+I เพื่อ Invert สี ภาพจะออกมาสีขาวๆแบบนี้

       

         7.  สามารถเปลี่ยนสีได้โดยการกด Ctrl+ U แล้วปรับระดับสีได้ตามต้องการเลยครับ

         8. จะได้ภาพสายฟ้าสำหรับไปตกแต่งภาพอื่นๆแล้วครับ

         ภาพที่ตกแต่งโดย effect สายฟ้า ครับ

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

วิธีย่อ/ขยายเพิ่มพื้นที่รอบๆ ภาพ

          1. เลือกคำสั่ง Image  Canvas Size (canvas คือผืนผ้าใบของศิลปินที่ใช้วาดรูป)

          2. กำหนดค่า และออปชั่นต่าง ๆ แล้วคลิกปุ่ม OK

           Width/Height : กำหนดความกว้าง และความสูงใหม่ตามต้องการ (กำหนดค่าเพิ่มขึ้นเพื่อเพิ่มพื้นที่ของภาพ หรือกำหนดค่าลดลงเพื่อลดพื้นที่ภาพ)

           Relative : เมื่อเลือกออปชั่นนี้ ค่า Width และ Height จะหมายถึง ขนาดที่เพิ่มขึ้นจากเดิม เช่น ถ้าให้ Width = 20 pixels รูปภาพจะกว้างขึ้น 20 pixel

           Anchor : ให้คลิกในช่องสี่เหลี่ยมช่องใดช่องหนึ่ง เพื่อกำหนดทิศทางการขยายตัวของพื้นที่ โดยช่องที่ถูกเลือกจะหมายถึงพื้นที่เดิม และภาพจะขยายออกตามทิศทางของลูกศรในช่องอื่นๆ

           Canvas extension color : ถ้าในภาพมีเลเยอร์ Background ให้เลือกว่าจะเติมพื้นที่ส่วนที่ขยาย้วยสีอะไร ดังตัวอย่างเลือกเป็นสีน้ำเงิน ก็จะได้สีส่วนขยายตามนั้น

ทีม Joomla! Project ได้ปล่อย Joomla! CMS 3.1.1 Stable ออกมาให้ได้ดาวน์โหลดกันแล้ว โดยรุ่นนี้ไม่ได้มีการแก้ไขปัญหาเรื่องความปลอดภัย แต่ได้ทำการแก้ไขปัญหาที่มีคนพบ หลังจากที่ได้ปล่อยรุ่น 3.1.0 ไปครับ ซึ่งเป็นไปตามเป้าหมายที่ยิ่งใหญ่ของทีมผ่ายผลิต คือการให้ความช่วยเหลือชุมชน Joomla อย่างสม่ำเสมอ โดยท่านสามารถเรียนรู้เพิ่มเติมเกี่ยวกับ Joomla! Developement ที่เว็บไซต์นักพัฒนา ครับ

โปรดทราบว่า การอัพเกรดจาก Joomla 3.0 ไป 3.1 นั้น สามารถทำได้เพียงคลิกเดียว โดยส่วนเสริมต่างๆ จะยังสามารถทำงานเข้ากันได้ และไม่จำเป็นต้องทำการไมเกรตระบบ เช่นเดียวกัน กรณีที่มีรุ่นต่างๆ ที่ออกตามมาอีก ใน Joomla ชุดที่ 3 ในขณะที่เราเอง ก็กำลังใช้งานเว็บไซต์ด้วย Joomla 3.0 ก็สามารถทำการปรับปรุงได้ด้วยการคลิกเพียงครั้งเดียว เพราะ Joomla 3.1 จะมีคุณสมบัติใหม่ และการแก้ไขข้อบกพร่องล่าสุดให้ใช้งานกัน

หมายเหตุ : กรุณาอ่านคำแนะนำด้านล่าง

ต้องการจะทดสอบ Joomla! ทดลอง ตัวอย่างออนไลน์ หรือบน Joomla JumpBox. เอกสารอ้างอิงสำหรับผู้เริ่มต้นมือใหม่.

โปรดทราบว่าคุณควรสำรองข้อมูลเว็บไซต์ของคุณเสมอ ก่อนทำการอัพเกรด.

คลิกที่ หมายเหตุ คำถามของ รุ่น Joomla 3.1.1 เพื่ออ่านรายละเอียดที่สำคัญ และสิ่งเป็นประโยชน์หลังจากได้ออกรุ่นนี้มา.

ดู http://developer.joomla.org/version-3-1-1-release-notes.html รายการของปัญหาที่ถูกแก้ไข

ขอขอบคุณทีม Joomla Bug Squad ที่ได้ทุ่มเทความพยายามในการตรวจสอบรายงานที่ได้รับ, การแก้ไขปัญหา, และการทำตัวแพทช์เพื่อปรับปรุงแก้ไข Joomla!. ถ้าหากท่านพบว่ามีบั๊กในการใช้งาน Joomla! โปรดรายงานจุดบกพร่องนั้นที่ CMS Issue Tracker.

สมาชิกที่ทำงานในปัจจุบันของทีมแก้ไขด้านจุดบกพร่องของ Joomla! ใน 3 เดือนที่ผ่านมา ได้แก่: Akarawuth Tamrareang, Aleksander Linkov, Alonzo Turner, Andrea Tarr, Andrew Matthew, Angelika Reisiger, Artur Alves, Arunas Mazeika, Ashan Fernando, Ashwin Date, Ben Tasker, Benjamin Trenkle, Brian Teeman, Chad Windnagle, Chris Smith, Constantin Romankiewicz, David Hurley, Dennis Hermacki, Don Gilbert, Edgars Piruška, Elijah Madden, Elin Waring, Emerson Rocha Luiz, George Wilson, Harald Leithner, Jacques Rentzke, Janich Rasmussen, Javier Gómez, Jean-Marie Simonet, Jon Neubauer, Julien Vonthron, Jurian Even, Kevin Griffiths, Khai Vu Dinh, Lu Nguyen, marco dings, Marijke Stuivenberg, Mark Dexter, Michael Babker, Mihàly Marti, Mihir Chhatre, Mike Biolsi, Nick Savov, Ofer Cohen, Parth Lawate, Patrick Alt, Peter van Westen, Piotr Konieczny, Ram Tripathi, Richard McDaniel, Robert Deutz, Robert Gastaud, Roberto Segura, Roland Dalmulder, Ruth Cheesley, sajal soni, Seth Warburton, Stefania Gaianigo, Tessa Mero, Thomas Hunziker, Thomas Jackson, Tobias Zulauf, Tom Hutchison, Valentin Despa, Yannick Gaultier.

หัวหน้าทีมด้านการรายงานข้อบกพร่อง: Mark Dexter และ Nick Savov, Co-Coordinators. Super-star contributors และ leaders by example: Jean-Marie Simonet, Elin Waring, David Hurley, และ Brian Teeman.

ขอขอบคุณทีม Joomla! Security Strike Team เป็นอย่างมากที่ได้ทุ่มเทความพยายามในการตรวจสอบรายงานที่ได้รับ, การแก้ไขปัญหาด้านความปลอดภัยใน Joomla!. โดยสมาชิกที่ทำงานได้แก่: Airton Torres, Alan Langford, Andrea Tarr, Bill Richardson, David Hurley, Elin Waring, Gary Brooks, Jason Kendall, Jean-Marie Simonet, Marijke Stuivenberg, Mark Boos, Mark Dexter, Michael Babker, Nick Savov, Pushapraj Sharma, Rouven Weßling.

ในการออกรุ่นนี้ เป็นผลมาจากการทำงานหลายพันชั่วโมงของอาสาสมัครหลายสิบท่าน ขอบคุณมากๆ เลยสำหรับการทำ Joomla CMS ที่ดีที่สุดในโลก!

ข่าวที่ดีคือ คุณไม่จำเป็นต้องเป็นนักพัฒนาที่จะช่วยสร้าง Joomla ทีมแก้ไขจุดบกพร่องของ Joomla เป็นหนึ่งในทีมงานที่มากที่สุดในกระบวนการพัฒนา Joomla และมักจะมองหาคน (ที่ไม่ใช่นักพัฒนา) ที่จะช่วยด้วยการเรียงลำดับรายงานข้อผิดพลาด จากการเขียนโปรแกรมแพทช์และการทดสอบโซลูชั่น ซึ่งเป็นวิธีที่ดีสำหรับการเพิ่มความรู้ในการทำงานของคุณจาก Joomla และยังเป็นวิธีที่ดี เพื่อให้คนจากทั่วทุกมุมโลกได้ร่วมกันพัฒนา

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

นอกจากนี้คุณยังสามารถช่วยในการพัฒนา Joomla ด้วยการขอบคุณผู้ที่เกี่ยวข้องในหลายส่วนของกระบวนการ