.css

selector {
  property: function();
}

Anchor

ใช้เพื่อเพิ่มเนื้อหาหลังจากลิงก์ <a> โดยใช้ ::after pseudo-element

a::after {
  content: " (anchor)";
  color: blue;
}

Animation

สร้างการเคลื่อนไหวที่เรียกว่า slide ซึ่งทำให้เริ่มจากซ้ายและเคลื่อนที่ไปที่ตำแหน่งปกติ

@keyframes slide {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.animated {
  animation: slide 2s ease-in-out;
}

Color

ตั้งค่าสีของข้อความให้เป็นสีแดงด้วย rgb()

element {
  color: rgb(255, 0, 0); /* Red color */
}

Counter

ใช้สำหรับนับลำดับในรายการ <ol> และแสดงตัวเลขก่อนเนื้อหา

ol {
  counter-reset: list;
}

li {
  counter-increment: list;
}

li::before {
  content: counter(list) ". ";
}

Easing

กำหนดความเร็วการเปลี่ยนแปลงการเคลื่อนไหวด้วย cubic-bezier สำหรับการเปลี่ยนแปลงที่ราบรื่น

.element {
  transition: transform 0.5s cubic-bezier(0.42, 0, 0.58, 1);
}

Filter

ใช้ฟิลเตอร์ grayscale() เปลี่ยนภาพเป็นขาวดำ

img {
  filter: grayscale(100%);
}

Font

กำหนดฟอนต์ของเอกสารให้ใช้ "Arial" หรือฟอนต์ sans-serif อื่น ๆ

body {
  font-family: "Arial", sans-serif;
}

Grid

ใช้ระบบกริดเพื่อจัดเรียงองค์ประกอบเป็นคอลัมน์ 3 คอลัมน์ โดยมีระยะห่าง 10px

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

Image

ใช้ background-image เพื่อกำหนดรูปภาพพื้นหลังสำหรับองค์ประกอบ

.element {
  background-image: url('image.jpg');
}

Math

ใช้ calc() สำหรับคำนวณขนาดความกว้างขององค์ประกอบ

.element {
  width: calc(100% - 20px);
}

Overview

Overview ไม่ใช่ฟังก์ชัน CSS แต่เป็นแนวคิดหรือหมวดหมู่ในเอกสาร

/* Overview is not a CSS function, but a concept or section. */

Reference

Reference ไม่ใช่ฟังก์ชัน CSS แต่เป็นแนวคิดหรือหมวดหมู่ในเอกสาร

/* Reference is not a CSS function, but a concept or section. */

Shape

ใช้ clip-path เพื่อสร้างรูปร่างเป็นวงกลม

.element {
  clip-path: circle(50%);
}

Transform

ใช้ transform เพื่อหมุนองค์ประกอบตามมุมที่กำหนด

.element {
  transform: rotate(45deg);
}