{ Winter Code Room }

ตอนที่ 66 : [Tip] การทำโค้ดไล่สี

  • เนื้อหานิยายตอนนี้เปิดให้อ่าน
  • View : 392
    จำนวนคนให้กำลังใจ : 2 ครั้ง
    21 เม.ย. 57

 
สวัสดีค่ะท่านผู้ชม หิหิ

เนื่องจากบทความแจกธีม Winter Dark Theme ของข้าพเจ้า เคยถูกนำโค้ดธีมไปดัดแปลงจนเหลือแต่พวกโค้ดไล่สี ...ทำให้ข้าพเจ้าเสียความรู้สึกมาก แต่คนทำก็ออกมาขอโทษแล้ว เรื่องราวจึงจบลงด้วยดี กลายเป็นมิตรที่ดีต่อกัน ...น่ารักอะ! =b

ข้าพเจ้าเลยคิดว่า เพื่อไม่ให้เกิดกรณีแบบนี้ขึ้นอีก ไรเตอร์จะสอนวิธีการทำโค้ดไล่สีแบบง่าย ๆ
โดยอาศัยเครื่องมือออนไลน์ ที่เรียกว่า Ultimate Css Gradient Generator ค่ะ

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

มา ๆ ร่ายมานานมากแล้ว มาเริ่มกันเลยดีกว่าเนอะ (((^_^)))

แต่ก่อนอื่นเลย เก็บลิงค์นี้ไว้ให้ดีนะจ้ะ >> Click <<


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






ทีนี้เรามาดูส่วนประกอบสำคัญที่ควรรู้จักของเจ้า Ultimate Css Gradient Generator กันดีกว่า







ส่วนที่ 1: เป็นรูปแบบสำเร็จให้เราเลือกว่าเราต้องการจะให้ไล่สีในลักษณะไหน
ส่วนที่ 2: เป็นส่วนสำคัญในการเลือกสีที่เราต้องการ แบบที่ไม่ต้องพึ่งส่วนประกอบส่วนที่ 3 เลยก็ยังได้
ส่วนที่ 3: เราสามารถเลือกสีหรือใส่โค้ดสีที่ต้องการได้โดยการคลิกที่ช่อง color ,
            ส่วนช่อง opacityที่อยู่ด้านบน ใช้ปรับค่าการมองเห็นว่าจะให้โปร่งใสมากหรือน้อย
ส่วนที่ 4: ตัวอย่างการแสดงผลเมื่อนำโค้ดไปใช้แล้ว
ส่วนที่ 5: โค้ดทั้งหมดที่ได้มา

++++++++++++++++++++++++++++++++++++++++++++++

วิธีการนำโค้ดไล่สีมาใช้

 
สมมติว่าเราได้เลือกสี เลือกรูปแบบการไล่สีตามที่เราต้องการได้หมดแล้ว เราก็ต้องทำการก๊อบโค้ดในส่วนที่ 5 มาใส่ในโค้ดที่มีคำสั่ง "background:" ค่ะ แต่ก่อนที่จะนำโค้ดมาใส่...





...ก่อนที่เราจะนำโค้ดมาใส่ ให้สังเกตคอมเม้นท์ (/*_____*/) ที่อยู่ด้านหลังของโค้ด background ในแต่ละอันก่อนค่ะ ดูรูปข้างบนเลย

...เค้าทำไฮไลท์สี ๆ เอาไว้

ตรงไฮไลท์สีแดงคือโค้ด background: ซึ่งเราจะต้องเอาโค้ดใน "background:" มาวางในส่วนใดของโค้ดในบทความของเราที่มี "background:" เหมือนกันก็ได้ ...โค้ด background-color, background-image ก็สามารถแก้ให้เป็น background เฉย ๆ ได้เหมือนกันนะคะ

ส่วนไฮไลท์สีเขียวก็คือคอมเม้นท์บอกข้อบ่งชี้ ว่าโค้ดตัวไหนใช้กับเบราเซอร์อะไรได้... แต่มันก็ไม่จริงเสมอไป บางอันก็ใช้ได้ บางอันก็ใช้ไม่ได้ ต้องลองดูนะ (แนะนำให้ใช้เบราเซอร์ของ Google Chrome ค่ะ เพราะจะเห็นหมดครบถ้วนเพราะการไล่สีแบบนี้ บางเบราเซอร์ยังไม่รองรับ โดยเฉพาะ Internet Explorer นี่ไม่แนะนำเลยค่ะ)

***ย้ำอีกรอบ อย่าก๊อบโค้ดทุกตัวมาแปะหมดนะคะ เพราะบางอันมันก็ใช้ไม่ได้นา ...แนะนำโค้ดตรงคอมเม้นท์ที่เขียนว่า /*Chrome, Safari4+*/ กับ 
/*Chrome10+,Safari5.1+*/ ค่ะ สองตัวนี้ก็ต้องดูอีกทีเหมือนกันนะ ว่าใช้ได้จริงรึเปล่า ถ้าอันใดอันหนึ่งใช้ไม่ได้ ก็ลองอีกอันจะใช้ได้ค่ะ
 
++++++++++++++++++++++++++++++++++++++++++++++++++


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

โค้ดเดิม


<style type="text/css">
/*เปลี่ยนสีพื้นหลังกล่องคอมเม้นท์-Sakurai Winter*/
.comment-setbubble {
background-color: #โค้ดสี;
border: none; /*ลบเส้นขอบ*/
}
/*เปลี่ยนสีแถบใต้กล่องคอมเม้นท์-Sakurai Winter*/
.comment-action {
background-color: #โค้ดสี;}
</style>



โค้ดที่ดัดแปลงมาใช้โค้ดไล่สีแล้ว

<style type="text/css">
/*เปลี่ยนสีพื้นหลังกล่องคอมเม้นท์-Sakurai Winter*/
.comment-setbubble {
background-webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f5fd), color-stop(49%,#f293ea), color-stop(100%,#f8f5fd)); /* Chrome,Safari4+ */;
border: none; /*ลบเส้นขอบ*/
}
/*เปลี่ยนสีแถบใต้กล่องคอมเม้นท์-Sakurai Winter*/
.comment-action {
background-webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f5fd), color-stop(49%,#f293ea), color-stop(100%,#f8f5fd)); /* Chrome,Safari4+ */;}
</style>

 
+++++++++++++++++++++++++++++++++++++++++++++

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

 
++++++++++++++++++++++++++++++++++++++++++++

 
หวังว่า How to นี้จะเป็นประโยชน์กับทุกคนไม่มากก็น้อยนะคะ (((^_^)))

 
Sakurai Winter


 

 

 

ให้กำลังใจนักเขียน
นักเขียนได้รับกำลังใจแล้ว!
นักเขียนได้รับกำลังใจแล้ว 2 ครั้ง

391 ความคิดเห็น

  1. #337 +ployjai (@ployjai97) (จากตอนที่ 66)
    วันที่ 13 พฤษภาคม 2559 / 21:23
    ขอบคุณมากๆค่า
    #337
    0
  2. #252 Butterfly in love (@honey-blacklist) (จากตอนที่ 66)
    วันที่ 12 พฤษภาคม 2558 / 10:25
    ขอบคุณค่าาาา 
    #252
    0
  3. #223 Mr.Korea (@exokexomexol) (จากตอนที่ 66)
    วันที่ 18 มกราคม 2558 / 18:40
    ขอบคุณงามคึ !
    #223
    0
  4. #132 pingแม่น้ำ (@pingpong200842) (จากตอนที่ 66)
    วันที่ 21 เมษายน 2557 / 15:15
    ขอบคุณค่ะ ^[]^
    #132
    0
  5. #131 สตาร์'ลาละบาย (@starlullaby) (จากตอนที่ 66)
    วันที่ 21 เมษายน 2557 / 13:17
    กริ๊สสส
    ถึงว่า...ทำไมเราไล่ได้แค่สองสี แกน x,y แถมได้เบราเซอร์เดียว...
    พี่สาวเจ๋งมากค่ะ^0^
    #131
    0
  6. #128 Kacarron (@8018-8059) (จากตอนที่ 66)
    วันที่ 21 เมษายน 2557 / 09:57
    ขอขอบพระคุณเป็นอย่างสูงค่ะ T_T

    ทำได้แล้วววววววววว >_<


    แก้ไขครั้งที่ 1 เมื่อ 21 เมษายน 2557 / 10:16
    #128
    0
  7. #127 `ChAnKHiM.827△ (@plengkhim) (จากตอนที่ 66)
    วันที่ 21 เมษายน 2557 / 09:22
    wowๆๆๆ นับถือมากเลยค่าขอบคุณน้าา
    #127
    0
  8. #126 Sakurai Winter (@sakurai-winter) (จากตอนที่ 66)
    วันที่ 21 เมษายน 2557 / 00:22
    ตัวอย่างโค้ดไล่สี ที่ใส่ลงในพื้นคอมเม้นท์ค่ะ
    #126
    0