Skip to content

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

CSS คืออะไร

CSS หรือเรียกกันแบบชื่อเต็มคือ Cascading Style Sheets เป็นภาษาที่ใช้ควบคุมรูปลักษณ์ของเว็บเพจ

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

ตัวอย่างการใช้งาน CSS

  • เปลี่ยนสีตัวอักษร
  • เปลี่ยนขนาดตัวอักษร
  • กำหนดรูปแบบตัวอักษร (เช่น bold, italic, underline)
  • กำหนดพื้นหลัง
  • จัดตำแหน่งเนื้อหา
  • กำหนดระยะห่าง
  • สร้างแอนิเมชั่น

คำสั่งพื้นฐาน

ปกติ CSS จะมีส่วนประกอบ 3 ส่วนหลัก ก็คือ Selector, Property และ Value ครับ

1. Selector
คือตัวเลือกใช้เพื่อระบุองค์ประกอบ HTML ที่ต้องการกำหนดรูปแบบ ตัวเลือกมีหลายประเภท เช่น

– ตัวเลือกตามแท็ก: ใช้ชื่อแท็ก HTML เช่น h1, h2, p, img
– ตัวเลือกตาม ID: ใช้ # ตามด้วย ID ขององค์ประกอบ เช่น #header
– ตัวเลือกตามคลาส: ใช้ . ตามด้วยชื่อคลาสขององค์ประกอบ เช่น .button
– ตัวเลือกตาม Attribute: ใช้ Attribute ขององค์ประกอบ เช่น a[href=”https://www.example.com”]

ตัวอย่าง Selector

2. Property
เป็นคุณสมบัติใช้ระบุลักษณะที่ต้องการเปลี่ยนแปลงขององค์ประกอบ คุณสมบัติมีหลากหลาย เช่น
– color: สีของตัวอักษร
– font-size: ขนาดตัวอักษร
– background-color: สีพื้นหลัง
– text-decoration: เส้นใต้ข้อความ
– margin: ระยะห่างรอบองค์ประกอบ
– padding: ระยะห่างระหว่างขอบองค์ประกอบกับเนื้อหา

ตัวอย่าง Property

3. Value

ค่าใช้ระบุค่าของคุณสมบัติ ค่าจะขึ้นอยู่กับคุณสมบัตินั้นๆ เช่น

– สี: สามารถใช้ชื่อสี รหัส Hexadecimal หรือ RGB
– ขนาด: สามารถใช้หน่วย px, em, rem, %
– ระยะห่าง: สามารถใช้หน่วย px, em, rem

ตัวอย่าง Value

โอเค ด้านบนก็เป็นตัวอย่างโค้ด CSS เบื้องต้นนะครับ ต่อไปเรามาดูว่า 10 คำสั่งที่เราอาจยังไม่รู้มีอะไรบ้าง

1. clip-path

Clip-path จะช่วยกำหนดขอบเขตของการตัดเพื่อเลือกแสดงส่วนต่างๆ ขององค์ประกอบ ทำให้ได้รูปทรงที่ซับซ้อนและสร้างสรรค์นอกเหนือจากสี่เหลี่ยมธรรมดา

ตัวอย่าง

div {

width: 200px;

height: 200px;

clip-path: polygon(50% 0%, 100% 25%, 100% 75%,

50% 100%, 0% 75%, 0% 25%);

}

2. Text-overflow

Text-overflow ช่วยควบคุมวิธีการแสดงข้อความที่ล้นเกินคอนเทนเนอร์ โดยมีตัวเลือกสำหรับจุดไข่ปลาหรือตัวบ่งชี้แบบ custom overflow

ตัวอย่าง

div {

width: 100px;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

border: 1px solid #000000;

}

3. image-rendering

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

ตัวอย่าง


image-rendering: auto;
image-rendering: crisp-edges;

image-rendering: pixelated;

image-rendering: smooth;

image-rendering: high-quality;

4. backdrop-filter

คุณสมบัตินี้ใช้เอฟเฟ็กต์กราฟิก เช่น การเบลอหรือการเปลี่ยนสีไปยังพื้นที่ด้านหลังเนื้อหาขององค์ประกอบ เหมาะอย่างยิ่งสำหรับการสร้างเอฟเฟกต์เบลอให้กับองค์ประกอบต่างๆ

ตัวอย่าง

div.transbox {

background-color: rgba(255, 255, 255, 0.4);

-webkit-backdrop-filter: blur(15px);

backdrop-filter: blur(15px);

}

5. text-align-last

Text-align-last เป็นการระบุว่าบรรทัดสุดท้ายของบล็อกหรือบรรทัดสุดท้าย จะเรียงอย่างไร

ตัวอย่าง

div {

text-align: justify;

text-align-last: center;

}

6. mask-image

Mask-image จะใช้ภาพหนึ่งมีหน้าที่เหมือนมาส์กเพื่อเปิดเผยบางส่วนของเนื้อหาขององค์ประกอบอีกภาพหนึ่ง ช่วยทำให้การออกแบบแลดูซับซ้อนและน่าสนใจมากขึ้น

ตัวอย่าง

.mask {

-webkit-mask-image: url(mymask.png);

mask-image: url(mymask.png);

-webkit-mask-repeat: no-repeat;

mask-repeat: no-repeat;

}

<div class=”mask”>

<img src=”myphoto.jpg” width=”600″ height=”400″>

</div>

7. mix-blend-mode

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

ตัวอย่าง

mix-blend-mode: normal;

mix-blend-mode: multiply;

mix-blend-mode: screen;

mix-blend-mode: overlay;

mix-blend-mode: darken;

mix-blend-mode: lighten;

mix-blend-mode: color-dodge;

mix-blend-mode: color-burn;

mix-blend-mode: hard-light;

mix-blend-mode: soft-light;

mix-blend-mode: difference;

mix-blend-mode: exclusion;

mix-blend-mode: hue;

mix-blend-mode: saturation;

mix-blend-mode: color;

mix-blend-mode: luminosity;

mix-blend-mode: plus-darker;

mix-blend-mode: plus-lighter;

8. counter-increment

การเพิ่มตัวนับ การเพิ่มตัวนับตั้งแต่หนึ่งตัวขึ้นไป ซึ่งเป็นวิธีการกำหนดหมายเลของค์ประกอบแบบไดนามิกหรือสร้างเนื้อหาตามค่าตัวนับ

ตัวอย่าง

body {

/* กำหนด “my-sec-counter” ให้มีค่าเท่ากับ 0 */

counter-reset: my-sec-counter;

}

h2::before {

/* เพิ่ม “my-sec-counter” ทีละ 1 */

counter-increment: my-sec-counter;
content: “No. ” counter(my-sec-counter) ” คือ “;

}

<h2>นายสมชาย</h2>

<h2>นายสมรักษ์</h2>

<h2>นางสมศรี</h2>

<h2>นางสมใจ</h2>

<h2>นางสมพร</h2>

<h2>นางสมน้ำหน้า</h2>

9. scroll-behavior

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

ตัวอย่าง

scroll-behavior: smooth;

10. user-select

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

ตัวอย่าง

user-select: none;

สรุป

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

Back To Top
Search