คุณสมบัติ column-rule (shorthand) ใช้กำหนดเส้นแบ่งคอลัมน์ในบรรทัดเดียว รวม width, style, color ลองรันโค้ดด้านล่างเพื่อใช้งาน column-rule property ใน CSS3: ตัวอย่าง <html> <head> <style> .multi { /* Column count property */ -webkit-column-count: 4;

คุณสมบัติ column-fill ใน CSS3 Multi-column ใช้ตัดสินใจวิธีการเติมเนื้อหาลงในคอลัมน์ ตัวอย่าง ลองรันโค้ดด้านล่างเพื่อใช้งาน column-fill property: <html> <head> <style> .multi { /* Column count property */ -webkit-column-count: 4; -moz-column-coun

คุณสมบัติ column-gap ใน Multi-column ใช้กำหนดช่องว่างระหว่างคอลัมน์ ตัวอย่าง ลองรันโค้ดด้านล่างเพื่อใช้งาน column-gap property: <html> <head> <style> .multi { /* Column count property */ -webkit-column-count: 4; -moz-column-count: 4; col

คุณสมบัติ column-rule-color ใช้กำหนดสีของเส้นแบ่งคอลัมน์ ลองรันโค้ดด้านล่างเพื่อใช้งาน rule-color property ใน CSS3: ตัวอย่าง <html> <head> <style> .multi { /* Column count property */ -webkit-column-count: 4; -moz-column-count: 4; column

คุณสมบัติ column-span ใช้กำหนดการข้ามคอลัมน์ (span across columns) ลองรันโค้ดด้านล่างเพื่อใช้งาน column-span ด้วย CSS: ตัวอย่าง <html> <head> <style> .multi { /* Column count property */ -webkit-column-count: 4; -moz-column-count: 4; col

ใช้เมธอด translate(x, y) เพื่อย้ายองค์ประกอบตามแกน X และ Y พร้อมกัน รูปแบบไวยากรณ์: translate(x, y) ที่นี่ x เป็นความยาวแทนพิกัด X ของเวกเตอร์การย้าย y เป็นความยาวแทนพิกัด Y ของเวกเตอร์การย้าย ตัวอย่าง: div { width: 50px; height: 50px; background-color: orange; } .trans { transform: transla

ใช้เมธอด translateX(n) เพื่อย้ายองค์ประกอบตามแกน X รูปแบบไวยากรณ์: translateX(n) ที่นี่ n เป็นความยาวแทนพิกัด X ของเวกเตอร์การย้าย ตัวอย่าง: div { width: 50px; height: 50px; background-color: black; } .trans { transform: translateX(20px); background-color: orange; }

ใช้เมธอด translateY(n) เพื่อย้าย (transform) องค์ประกอบตามแกน Y รูปแบบไวยากรณ์: translateY(n) ที่นี่ n เป็นความยาวแทนพิกัด Y ของเวกเตอร์การย้าย ตัวอย่าง ตัวอย่างการใช้งาน: div { width: 50px; height: 50px; background-color: black; } .trans { transform: translateY(20px); background-color: o

ใช้เมธอด scaleX() เพื่อเปลี่ยนความกว้างขององค์ประกอบด้วย CSS รูปแบบไวยากรณ์: scaleX(n); ที่นี่ n เป็นตัวเลขแทนตัวคูณการปรับขนาด (scaling factor) ตัวอย่าง: div { width: 40px; height: 50px; background-color: black; } .myScaled { transform: scaleX(0.9); background-color: orange; }

ใช้เมธอด scaleY() เพื่อเปลี่ยนความสูงขององค์ประกอบด้วย CSS รูปแบบไวยากรณ์: scaleY(n); ที่นี่ n เป็นตัวเลขแทนตัวคูณการปรับขนาด (scaling factor) ตัวอย่าง: div { width: 40px; height: 50px; background-color: black; } .myScaled { transform: scaleY(0.9); background-color: orange; }

ใช้เมธอด scale() เพื่อเปลี่ยนความกว้างและความสูงขององค์ประกอบด้วย CSS รูปแบบไวยากรณ์: scale(x, y); ที่นี่ x เป็นตัวเลขแทนเวกเตอร์การปรับขนาดแกน X (abscissa) y เป็นตัวเลขแทนเวกเตอร์การปรับขนาดแกน Y (ordinate) ตัวอย่าง: div { width: 40px; height: 50px; background-color: black; } .myScaled { t

มาเรียนรู้วิธีหมุนองค์ประกอบตามมุมที่กำหนด ตัวอย่าง <html> <head> <style> div { width: 300px; height: 100px; background-color: pink; border: 1px solid black; } div#myDiv { /* IE 9 */ -ms-transform: rotate(20de

ลองรันโค้ดด้านล่างเพื่อใช้งาน Skew Transforms ตามแกน X ใช้ CSS: ตัวอย่าง <html> <head> <style> div { width: 300px; height: 100px; background-color: pink; border: 1px solid black; } div#skewDiv { /* IE 9 */ -ms

ลองรันโค้ดด้านล่างเพื่อกำหนด Skew Transforms ตามแกน Y ใช้ CSS: ตัวอย่าง <html> <head> <style> div { width: 300px; height: 100px; background-color: pink; border: 1px solid black; } div#skewDiv { /* IE 9 */ -ms-

Keyframes (เฟรมสำคัญ) ควบคุมขั้นตอนกลางของอนิเมชันใน CSS3 ตัวอย่างแสดง height, width, color, name, และ duration ของอนิเมชันพร้อมไวยากรณ์ keyframes: @keyframes animation { from { background-color: pink; } to { background-color: green; } } div { width: 100px; height: 100px; background-color

คุณสมบัติ text-overflow ใช้กำหนดวิธีแสดงสัญญาณเมื่อข้อความล้นและไม่แสดงทั้งหมด ตัวอย่าง ลองรันโค้ดด้านล่างเพื่อใช้งาน text-overflow ใน CSS: <html> <head> <style> p.text1 { white-space: nowrap; width: 200px; border: 1px solid #000000; ove

ใช้คุณสมบัติ word-break เพื่อตัดบรรทัดตามคำด้วย CSS ลองรันโค้ดด้านล่างเพื่อใช้งาน word-break ใน CSS: ตัวอย่าง <html> <head> <style> p.text1 { width: 140px; border: 1px solid #000000; word-break: keep-all; } p.text2 { width: 1

ใช้คุณสมบัติ word-wrap (ปัจจุบันคือ overflow-wrap) เพื่อตัดคำและขึ้นบรรทัดใหม่ ลองรันโค้ดด้านล่างเพื่อใช้งาน word-wrap ใน CSS: ตัวอย่าง <!DOCTYPE html> <html> <head> <style> div { width: 200px; border: 2px solid #000000; } div.b {

Web Fonts ใช้เพื่ออนุญาตให้ใช้ฟอนต์ใน CSS ที่ไม่ได้ติดตั้งบนระบบท้องถิ่น (Local System) ตัวอย่าง โค้ดด้านล่างแสดงตัวอย่าง @font-face: <html> <head> <style> @font-face { font-family: myFirstFont; src: url(/css/font/SansationLight.woff); } div

2D Transforms ใช้เพื่อเปลี่ยนโครงสร้างองค์ประกอบ เช่น translate, rotate, scale, และ skew ตารางด้านล่างแสดงค่าทั่วไปที่ใช้ใน 2D Transforms: ลำดับ ค่า & คำอธิบาย 1matrix(n,n,n,n,n,n)กำหนด matrix transforms ด้วย 6 ค่า 2translate(x,y)ย้ายองค์ประกอบตามแกน X แล