เพื่อตั้งค่าช่องว่างระหว่างคำ ให้ใช้คุณสมบัติ word-spacing ค่าที่ใช้ได้มีดังนี้: word-spacing: normal | length | initial | inherit; ตัวอย่างที่ 1: normal vs 10px <!DOCTYPE html> <html> <head> <style> p.demo1 {    word-spacing: normal; } p.demo2 {    word-

คุณสมบัติ mix-blend-mode ใช้สำหรับกำหนดว่าเนื้อหาขององค์ประกอบควรผสานกับพื้นหลังของพ่อโดยตรงอย่างไร ค่าที่ใช้ได้มีดังนี้: mix-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | difference | exclusion | hue | saturation | color | luminosity; ตัวอย่างที่

เพื่อจัดตำแหน่งข้อความด้วย CSS ให้ใช้คุณสมบัติ text-align ค่าที่เป็นไปได้มีดังนี้: text-align: left | right | center | justify | initial | inherit; ตัวอย่างที่ 1: text-align: justify พร้อม columns <!DOCTYPE html> <html> <head> <style> .demo {    -webkit-columns: au

สำหรับการตกแต่งข้อความใน CSS ให้ใช้คุณสมบัติ text-decoration เป็น shorthand สำหรับคุณสมบัติต่อไปนี้: text-decoration-line text-decoration-color text-decoration-style ตัวอย่างที่ 1: ใช้ shorthand overline underline <!DOCTYPE html> <html> <head> <style> .demo {    te

เพื่อจัดรูปแบบทั้งรายการไม่มีลำดับ (ul) และมีลำดับ (ol) ให้ใช้คุณสมบัติ list-style-type, list-style-image, และ list-style-position ตัวอย่างที่ 1: จัดรูปแบบ ul ด้วย square <!DOCTYPE html> <html> <head> <style> ul {    list-style-type: square; } </style> </h

รายการมี 2 ประเภท: ลำดับ (ordered/ol) และไม่มีลำดับ (unordered/ul) ด้วย CSS สามารถตั้งค่าตัวหมายเลข (list markers) หรือใช้ภาพแทนได้ พร้อมกับกำหนดตำแหน่งของตัวหมายเลข 1. list-style-type - ประเภทตัวหมายเลข ใช้กำหนดประเภทของตัวหมายเลขรายการ ตัวอย่าง: ul ใช้ upper-roman <!DOCTYPE html> <html&

สำหรับการจัดสไตล์ตารางด้วย CSS สามารถตั้งค่าขอบ, รวมขอบ, ความกว้าง, ความสูง, padding, การจัดตำแหน่งข้อความ ฯลฯ มาดูตัวอย่าง: ตัวอย่างที่ 1: เพิ่มขอบตาราง <!DOCTYPE html> <html> <head> <style> table, th, td {    border: 2px dashed orange; } </style> </head&

เพื่อตั้งค่าช่องว่างระหว่างคอลัมน์ใน CSS3 ให้ใช้คุณสมบัติ column-gap ตั้งค่าได้ดังนี้: column-gap: length | normal | initial | inherit; ตัวอย่างที่ 1: กำหนด column-gap 25px <!DOCTYPE html> <html> <head> <style> .demo {    column-count: 4;    -webkit-colum

หน่วยความยาวแบบสัมบูรณ์ (Absolute Length Units) มีค่าคงที่สัมพันธ์กัน ใช้เมื่อรูปแบบเอาต์พุททราบล่วงหน้า หน่วยหลักมีดังนี้: ลำดับหน่วยและคำอธิบาย 1cm - เซนติเมตร 2mm - มิลลิเมตร 3in - นิ้ว (1in = 96px = 2.54cm) 4px - พิกเซล (1px = 1/96 ของ 1in) * หน่วยหลักสำหรับหน้าจอ

ใช้คุณสมบัติ columns ใน CSS3 เพื่อตั้งค่าจำนวนคอลัมน์และความกว้าง เป็น shorthand ของ column-width และ column-count ตั้งค่าได้ดังนี้: columns: auto | column-width column-count | initial | inherit; ตัวอย่างที่ 1: ตั้งค่า column-count (จำนวนคอลัมน์) <!DOCTYPE html> <html> <head> <

เพื่อตั้งค่าความสว่างของภาพใน CSS ให้ใช้ filter: brightness(%) จำไว้ว่า: ค่า 0% ทำให้ภาพสีดำทั้งหมด ค่า 100% เป็นภาพต้นฉบับ (ค่าเริ่มต้น) ค่า มากกว่า 100% จะทำให้ภาพสว่างขึ้น ตัวอย่าง: brightness 120% <!DOCTYPE html> <html> <head> <style> img.demo {    filt

ค่าสี RGBA ย่อมาจาก Red, Green, Blue และ Alpha (ความทึบแสง) ค่าอัลฟาอยู่ระหว่าง 0.0 ถึง 1.0 โดย 1.0 = ทึบเต็มที่ ตัวอย่างความแตกต่างของความทึบแสง: ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> #demo1 {background-color:rgba(108,111,35,0.6);} #demo2 {background-color:rg

เพื่อแปลงภาพเป็นขาวดำ (Grayscale) ใน CSS3 ให้ใช้ค่า grayscale() สำหรับคุณสมบัติ filter ตัวอย่าง: grayscale 130% พร้อม brightness และ contrast <!DOCTYPE html> <html> <head> <style> img.demo {    filter: brightness(120%);    filter: contrast(120%);   &

เพื่อหมุนสี (hue rotation) ในภาพด้วย CSS3 ให้ใช้ค่า hue-rotate() สำหรับคุณสมบัติ filter ตัวอย่าง: hue-rotate 45 องศา <!DOCTYPE html> <html> <head> <style> img.demo {    filter: hue-rotate(45deg); } </style> </head> <body> <h1>Learn Spring Fr

เพื่อปรับความทึบแสงของภาพด้วย CSS3 ให้ใช้ค่า opacity() สำหรับคุณสมบัติ filter ตัวอย่าง: opacity 60% <!DOCTYPE html> <html> <head> <style> img.demo {    filter: opacity(60%); } </style> </head> <body> <h1>Learn Spring Framework</h1> <

ฟังก์ชัน matrix() ใน CSS ใช้สำหรับกำหนดเมทริกซ์การแปลง 2D แบบสม่ำเสมอ (homogeneous 2D transformation matrix) กำหนดการแปลงเชิงเส้นเป็นพารามิเตอร์ ตัวอย่างที่ 1 <!DOCTYPE html> <html> <head> <style> .demo {    transform: matrix(2, 1, -1, 1, 190, 100); } .skew_img { &

คุณสมบัติ right ใช้สำหรับกำหนดตำแหน่งแนวนอนขององค์ประกอบ ตั้งค่าได้ดังนี้: right: auto | length | initial | inherit; ตัวอย่างที่ 1: ใช้ right: 90px กับ position: absolute <!DOCTYPE html> <html> <head> <style> div {    text-align: justify;    text-justify:

ฟังก์ชัน linear-gradient() ใช้สำหรับกำหนดไล่สีเส้นตรง (linear gradient) เป็นภาพพื้นหลัง: background-image: linear-gradient(direction, color-stop1, color-stop2, ...); กำหนดจุดเริ่มต้นและทิศทาง พร้อมสีหยุด (color stops) เพื่อสร้างการเปลี่ยนสีเรียบเนียน ตัวอย่างที่ 1: ไล่สีทแยงมุม (to bottom right) &l

CSS3 รองรับการกำหนดสีหลายรูปแบบ ได้แก่ RGBA, HSL, และ HSLA 1. RGBA (Red, Green, Blue, Alpha) ค่าสี RGBA ประกอบด้วย แดง, เขียว, น้ำเงิน และอัลฟา (ความทึบแสง) ค่าอัลฟาอยู่ระหว่าง 0.0 ถึง 1.0 โดย 1.0 = ทึบเต็มที่ ตัวอย่างความแตกต่างของความทึบแสง: ตัวอย่างโค้ด RGBA <!DOCTYPE html> <html>

คุณสมบัติ font-variant ใน CSS เป็น shorthand สำหรับคุณสมบัติต่อไปนี้: font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures, และ font-variant-east-asian มีค่าหลักดังนี้: font-variant: normal | small-caps | initial | inherit; ตัวอย่างที่ 1: ใช้ค่า normal (ค่าเริ่มต