ค่าสี HSLA ย่อมาจาก Hue (สี), Saturation (ความอิ่มตัว), Lightness (ความสว่าง) และ Alpha (ความทึบแสง) Alpha เป็นตัวเลข 0.0 - 1.0 โดย 0.0 = โปร่งใสทั้งหมด, 1.0 = ทึบแสงเต็มที่ ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style>    #demo1 {background-color: hsla(140,

ฟังก์ชัน rotate() ใน CSS ใช้สำหรับหมุน element พารามิเตอร์กำหนดมุมการหมุน สามารถใช้หน่วยองศา (deg), เรเดียน (rad), กราด (grad), หรือ turn ได้ ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> #demo1 {background-color: hsla(140, 100%, 50%, 0.8);} #demo2 {background-color: h

Element ที่ตั้งค่า position: fixed จะคงที่อยู่ที่ตำแหน่งเดิมแม้จะเลื่อนหน้าเว็บ (scroll) ไป ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> div.demo1 {    position: relative;    color: white;    background-color: orange;    border:

CSS มีคุณสมบัติมากมายสำหรับจัดรูปแบบข้อความ ได้แก่ สีข้อความ, การประดับข้อความ, ความสูงบรรทัด, ทิศทางข้อความ, การจัดตำแหน่งข้อความ เป็นต้น 1. Text Alignment (การจัดตำแหน่งข้อความ) ใช้ text-align จัดข้อความใน block container text-align: left | right | center | justify | start | end | initial | inher

ฟังก์ชัน scale() ใน CSS Transform ใช้ขยายหรือย่อ element บน 2D plane โดยไม่กระทบ layout ของ element อื่น (ไม่ทำ reflow) รูปแบบไวยากรณ์ transform: scale(sx, sy); /* sx = scale X, sy = scale Y */ transform: scale(s); /* sx = sy = s (uniform scaling) */ transform: scaleX(sx); /* แค่แกน X */

หน่วย em เป็นหน่วยสัมพัทธ์ (relative unit) เทียบกับ font-size ของ element ตัวเอง (หรือสืบทอดจาก parent) โดยค่าเริ่มต้นของบราวเซอร์คือ 1em = 16px ตัวอย่างที่ 1: กำหนด font-size 1.3em <!DOCTYPE html> <html> <head> <style> .demo { text-decoration: overline;

คุณสมบัติ text-decoration-line ใช้กำหนดประเภทของเส้นประดับข้อความ (ประเภทเส้น) แยกจากสีและรูปแบบ ค่าที่ใช้ได้ text-decoration-line: none | underline | overline | line-through | blink | initial | inherit; none: ไม่มีเส้น (default) underline: เส้นใต้ overline: เส้นบน line-through: เส้นทับกล

ทุก HTML element มีค่า display เริ่มต้น (default) ตัวอย่างเช่น <div> = block, <span> = inline, <li> = list-item เราสามารถเปลี่ยนค่าเริ่มต้นนี้ได้เพื่อจัด layout ตามต้องการ ตัวอย่าง: ทำให้ <li> แสดงแนวนอน (Horizontal Menu) <!DOCTYPE html> <html> <head> <

คุณสมบัติ display: block ทำให้ element แสดงผลแบบ block-level เริ่มบรรทัดใหม่ และกว้างเต็มพื้นที่ container (available width) ตัวอย่างที่ 1: แปลง <p> (block by default) ให้ชัดเจน + inline-block <!DOCTYPE html> <html> <head> <style> p { background-color: orange; co

คุณสมบัติ text-decoration-style ใช้กำหนดรูปแบบเส้นประดับข้อความ (underline, overline, line-through) ค่าที่ใช้ได้ text-decoration-style: solid | double | dotted | dashed | wavy | initial | inherit; ตัวอย่างที่ 1: Line-through สีน้ำเงิน + Underline สีแดงแบบ double <!DOCTYPE html> <html>

คุณสมบัติ grid-template เป็น shorthand ของ grid-template-rows, grid-template-columns, และ grid-template-areas ใช้กำหนด grid tracks และ areas พร้อมกัน รูปแบบไวยากรณ์ grid-template: none | <grid-template-rows> / <grid-template-columns> | <grid-template-areas> | initial | inherit; ต

คุณสมบัติ grid-template-areas ใช้กำหนด layout ของ CSS Grid โดยใช้ชื่อพื้นที่ (named areas) ทำให้โค้ดอ่านง่ายและจินตนาการ layout ได้ง่าย ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> .demo { grid-area: newArea; } .grid-container { display: grid; gri

คุณสมบัติ hyphens ควบคุมการขีดคั่นคำ (hyphenation) เมื่อข้อความ wrap ไปบรรทัดใหม่ ช่วยให้ข้อความจัดเรียงสวยงามขึ้น (justified text) ค่าที่ใช้ได้ hyphens: none | manual | auto | initial | inherit; none: ไม่ขีดคั่นคำเลย (คำยาวจะล้นออกไป) manual (default): ขีดคั่นเฉพาะที่มี &hyphen; (soft hy

คุณสมบัติ isolation ใช้บังคับให้ element สร้าง stacking context ใหม่ (new stacking context) แยกจาก context ของ parent ป้องกันการผสมผสาน blending mode ระหว่าง element ภายในและภายนอก รูปแบบไวยากรณ์ isolation: auto | isolate | initial | inherit; auto (default): สร้าง stacking context เฉพาะเมื่อจำเ

คุณสมบัติ object-position ใช้กำหนดตำแหน่งของเนื้อหาที่แทรกเข้ามา (<img>, <video>, <iframe>) ภายในกล่องของมัน (content box) ใช้ร่วมกับ object-fit ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> img.demo { width: 200px; height: 200px;

HSL ย่อมาจาก Hue (สีพื้นฐาน), Saturation (ความอิ่มตัว), Lightness (ความสว่าง) เป็นโมเดลสีที่เข้าใจง่ายและปรับแต่งได้โดยตรงกว่า RGB ช่วงค่า Hue: 0 ถึง 360 องศา (0/360=แดง, 120=เขียว, 240=น้ำเงิน) Saturation: 0% (เทา) ถึง 100% (สีเต็มที่) Lightness: 0% (ดำ) ถึง 100% (ขาว) - 50% = สีปกติ ตัวอ

คุณสมบัติ rest-after ใน CSS Speech Module ใช้กำหนดระยะหยุดพัก (pause) หลัง element เมื่ออ่านออกเสียง รูปแบบไวยากรณ์ rest-after: <time> | none | x-weak | weak | medium | strong | x-strong Time: 15ms, 200ms, 1s เป็นต้น Strength keywords: none (ไม่หยุด), x-weak, weak, medium, strong, x-str

ตัวอย่างการสร้างแอนิเมชันเปลี่ยน vertical-align ของรูปภาพภายในบรรทัดข้อความ ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> img { vertical-align: 80px; animation: myanim 3s; } @keyframes myanim { 50% { vertical-align: 120px; }

คุณสมบัติ transform เป็นหนึ่งในคุณสมบัติที่เหมาะสมที่สุดสำหรับการสร้างแอนิเมชัน เพราะได้รับ GPU acceleration (รันบน Compositor Thread) ไม่ทำให้เกิด layout reflow หรือ repaint ทั้งหน้า ตัวอย่างโค้ด: การหมุน (Rotate) <!DOCTYPE html> <html> <head> <style> div { marg

ตัวอย่างพื้นฐานของการสร้างแอนิเมชันเปลี่ยนความกว้าง (width) ของ element ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> div { width: 300px; height: 250px; background-color: maroon; color: white; animation: myanim 3s; } @keyframe