Rabbitinblack

Tag: color

  • วิธีการใช้สีใน CSS

    วิธีการใช้สีใน CSS

    ในการเขียนเว็บไซต์ CSS เป็นตัวตกแต่งหน้าตาของเว็บไซต์ ซึ่งส่วนหนึ่งในนั้น ก็คือสามารถปรับเปลี่ยนสีต่าง ๆ ในเว็บไซต์ได้ด้วย CSS

    โดยวิธีการใช้สีใน CSS นั้น มีอยู่หลายวิธี แต่จะขอพูดถึง 4 รูปแบบที่ใช้งานกันบ่อย ๆ ดังนี้

    • ใช้ชื่อสี โดยสามารถดูรายชื่อสีได้ที่ W3C Color Keyword
    • ใช้ Hex Code ตัวอย่างเช่น #FFF, #DE3D58
    • ใช้ RGB ตัวอย่างเช่น rgb(255,255,255), rgb(125,90,52)
    • ใช้ HSL ตัวอย่างเช่น hsl(100, 50%, 50%), hsl(240, 20%, 80%)

    จะเห็นว่า ทุกรูปแบบแสดงผลสีเดียวกันทั้งหมด

    วิธีการใช้สีใน CSS แบบใช้ชื่อสี

    วิธีนี้ไม่ได้มีอะไรซับซ้อนมากมาย แค่เรานำชื่อสีไปใส่เพื่อใช้งาน เช่น

    Black
    Gray
    Hotpink
    Yellowgreen

    วิธีการใช้สีใน CSS แบบใช้ Hex Code

    โดยในการใช้ Hex Code นั้น มีวิธีการใช้งานโดยมองแยกแบบนี้

    #RRGGBB // โดย R คือสีแดง G คือสีเขียว และ B คือสีน้ำเงิน
    #b91c1c
    #facc15

    ค่าของ RGB นั้นจะมีค่าอยู่ระหว่าง 00 – FF ในเลขฐาน 16 รวมถึงใน Browser version ใหม่ ๆ นั้นจะสนับสนุนการใช้งานสีแบบกำหนดความโปร่งใสได้ด้วย

    #RRGGBBAA // โดย A คือค่าความโปร่งใส มีค่าอยู่ระหว่าง 00 - FF
    #b91c1c99
    #facc1599

    วิธีการใช้สีใน CSS แบบใช้ RGB

    โดยในการใช้ RGB นั้น มีวิธีการใช้งานโดยมองแยกแบบนี้

    rgb(255,255,255) // โดยค่าที่ใส่ลงไปจะมีค่าระหว่าง 0 - 255
rgba(255,255,255,1) // โดยตัวสุดท้ายจะใช้ค่าที่อยู่ระหว่าง 0 - 1
    rgb(37, 99, 235)
    rgb(190, 18, 60)
    rgb(37, 99, 235, 0.5)
    rgba(190, 18, 60, 0.5)

    โดยตัวแรกจะเป็นค่าสีแดง ตัวถัดไปเป็นสีเขียว และตัวสุดท้ายเป็นสีน้ำเงิน รวมถึงใน Browser version ใหม่ เราสามารถใช้ rgb ในการใช้งานแบบโปร่งใสได้เลยแบบนี้ โดยไม่ต้องใส่ลูกน้ำ

    rgb(255 255 255)
rgb(255 255 255 / 1) // โดยใช้ / คั่นระหว่าง 3 ค่ากับค่าของความโปร่งใส
    rgb(21 128 61)
    rgb(21 128 61 / 0.5)

    วิธีการใช้สีใน CSS แบบใช้ HSL

    โดยในการใช้ HSL นั้น มีวิธีการใช้งานโดยมองแยกแบบนี้

    hsl(360, 100%, 100%)
hsla(360, 100%, 100%, 1)
    hsl(221, 83%, 53%)
    hsl(345, 83%, 41%)
    hsl(221, 83%, 53%, 0.5)
    hsl(345, 83%, 41%, 0.5)

    โดยค่าแต่ละตัวคือ

    • Hue (เนื้อสี) ค่ามีตั้งแต่ 0 – 360
    • Saturation (ความอิ่ม) ค่าเป็นเปอร์เซ็นต์ตั้งแต่ 0 – 100
    • Lightness (ความสว่าง) ค่าเป็นเปอร์เซ็นต์ตั้งแต่ 0 – 100
    • Alpha (ค่าความโปร่งใส) ค่าอยู่ระหว่าง 0 – 1

    รวมถึงใน Browser version ใหม่ เราสามารถใช้ hsl ในการใช้งานแบบโปร่งใสได้เลยแบบนี้ โดยไม่ต้องใส่ลูกน้ำ แต่ใช้ / ในการคั่น

    hsl(360 100% 100%)
hsla(360 100% 100% / 1)
    hsl(142 72% 29%)
    hsl(142 72% 29% / 0.5)

    หลายคนคงสงสัยว่า แล้วความแตกต่างของ rgb กับ hsl ว่ามันแตกต่างกันอย่างไร

    • ระบบของ rgb สามารถแทนจำนวนสีได้มากกว่า hsl โดยสังเกตง่าย ๆ ว่า rgb มันสามารถแทนสีได้ 256 x 256 x 256 ซึ่งเท่ากับ 16,777,216 สี ในขณะที่ hsl นั้นแทนสีได้ 360 x 100 x 100 ซึ่งเท่ากับ 3,600,000 สี
    • แต่ระบบ hsl นั้นง่ายในการสื่อสารสำหรับการปรับแต่ง เช่น ขอสีแดงที่สว่างกว่านี้ อยากได้สีน้ำเงินที่อิ่มกว่านี้ หรืออยากได้โทนสีอื่น ที่ยังสว่างแบบเดิม
  • [CSS] คำสั่งทั่วไปที่ใช้จัดการกับข้อความ

    [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.