เมธอด scaleX(x) ใช้สำหรับการ transform แบบ scale บนแกน X รูปแบบไวยากรณ์ (Syntax): scaleX(x) ที่นี่ x เป็นตัวเลขที่แทนตัวคูณการปรับขนาดสำหรับพิกัด x (abscissa) ของแต่ละจุดขององค์ประกอบ ตัวอย่าง: div { width: 60px; height: 60px; background-color: yellow; } .scaled { transform: scaleX(0.5);

เมธอด scaleZ(z) ใช้สำหรับการ transform แบบ scale บนแกน Z รูปแบบไวยากรณ์ (Syntax): scaleZ(z) ที่นี่ z เป็นตัวเลขที่แทนตัวคูณการปรับขนาด (scaling factor) สำหรับพิกัด z ของแต่ละจุดขององค์ประกอบ ตัวอย่าง: div { width: 60px; height: 60px; background-color: black; } .perspective { transform: pers

คุณสมบัติ border-image-width ใช้เพื่อกำหนดความกว้างของภาพขอบ ลองรันโค้ดด้านล่างเพื่อใช้งานคุณสมบัติ border-image-width: ตัวอย่าง <html> <head> <style> #borderimg1 { border: 15px solid transparent; padding: 15px; border-image-source: url(https://

คุณสมบัติ resize ใน CSS3 มีค่าทั่วไป 3 ค่า ดังนี้: horizontal (ปรับขนาดแนวนอน) vertical (ปรับขนาดแนวตั้ง) both (ปรับขนาดทั้งสองทิศทาง) ตัวอย่าง ใช้ค่า both ในคุณสมบัติ resize: <html> <head> <style> div { border: 2px solid; padding: 20px;

Outline หมายถึงการวาดเส้นรอบองค์ประกอบด้านนอกของขอบ (border) ตัวอย่าง ลองรันโค้ดด้านล่างเพื่อใช้งานคุณสมบัติ outline-offset ของ CSS3: <html> <head> <style> div { margin: 20px; padding: 10px; width: 300px; height: 100px; border: 5

มาทำความเข้าใจความแตกต่างระหว่าง CSS2 sizing property และ CSS3 box-sizing property CSS2 Sizing Property (โมเดลกล่องแบบเดิม) <html> <head> <style> .div1 { width: 200px; height: 100px; border: 1px solid green; } .div2 { width: 200px; height: 100px; padding: 50px; b

คุณสมบัติ box-sizing ใช้เพื่อเปลี่ยนวิธีคำนวณความกว้างและความสูงขององค์ประกอบ ตั้งแต่ CSS2 กล่องจะทำงานดังนี้: width + padding + border = ความกว้างจริงที่แสดงของกล่ององค์ประกอบ height + padding + border = ความสูงจริงที่แสดงของกล่ององค์ประกอบ ตัวอย่าง เพื่อเข้าใจ box-sizing ให้ดูตัวอย่างด้านล่าง: &l

Media Queries ใช้สำหรับกำหนดกฎสไตล์ที่แตกต่างกันสำหรับอุปกรณ์ขนาดต่างๆ เช่น มือถือ เดสก์ท็อป เป็นต้น ลองรันโค้ดด้านล่างเพื่อใช้งาน Media Queries ด้วย CSS3: ตัวอย่าง <html> <head> <style> body { background-color: lightpink; } @media screen and (max-width: 420px) {

Responsive Web Design ให้ประสบการณ์การใช้งานที่ดีที่สุด อ่านง่าย นำทางง่าย โดยลดการปรับขนาดลงน้อยที่สุดบนอุปกรณ์ต่างๆ เช่น เดสก์ท็อป มือถือ และแท็บเล็ต มาดูว่าการออกแบบเว็บตอบสนอง (Responsive Web Design) คืออะไร:

เพื่อตั้งค่า Media Queries ให้ใช้กฎ CSS ต่างกันตามขนาดอุปกรณ์ สามารถลองรันโค้ดด้านล่างได้: ตัวอย่าง <html> <head> <style> body { background-color: lightpink; } @media screen and (max-width: 420px) { body { background-color: lightbl

CSS3 รองรับเทคโนโลยีการรวมฟอนต์ (Font Stack) ซึ่งหากเบราว์เซอร์ไม่รองรับฟอนต์ตัวแรก จะลองใช้ฟอนต์ตัวถัดไปตามลำดับ ตัวอย่างชุดฟอนต์ Sans-Serif:

CSS มีหน่วยหลายอย่างสำหรับคุณสมบัติต่างๆ เช่น width, margin, padding, font-size, border-width เป็นต้น ความยาวจะระบุด้วยค่าตัวเลขตามด้วยหน่วยความยาว เช่น px, dp, em ไม่อนุญาตให้มีช่องว่างระหว่างค่าตัวเลขและหน่วย หน่วยความยาวแบ่งออกเป็น 2 ประเภท: Relative units (หน่วยแบบสัมพัทธ์) Absolute units

ในหน่วยแบบสัมพัทธ์ ค่าความยาวจะคงที่และแสดงขนาดที่แท้จริงขององค์ประกอบ ให้ดูหน่วยต่างๆ ดังนี้: หน่วย (Units) ตัวย่อ (Abbreviation) Percent% Emem Exex Root emrem Viewport widthvw Viewport heightvh Viewport minvmin Characterch Gridgd

เอฟเฟกต์อนิเมชัน Swing ทำให้องค์ประกอบเคลื่อนไหวไปมาหรือซ้าย-ขวาเหมือนโต้ตอบจากแกนแขวน ตัวอย่าง <html> <head> <style> .animated { background-image: url(/css/images/logo.png); background-repeat: no-repeat; background-position: left top; p

ใช้ pseudo-element :first-letter เพื่อเพิ่มสไตล์พิเศษให้ตัวอักษรแรกของข้อความในเซлекเตอร์ ตัวอย่างด้านล่างแสดงวิธีใช้ :first-letter เพื่อเพิ่มเอฟเฟกต์พิเศษให้ตัวอักษรแรกขององค์ประกอบในเอกสาร ตัวอย่าง <html> <head> <style> p:first-letter { font-size: 5em;

ตัวอย่าง หากต้องการสร้างเอฟเฟกต์อนิเมชัน Tada ด้วย CSS สามารถทดลองรันโค้ดด้านล่างได้: <html> <head> <style> .animated { background-image: url(/css/images/logo.png); background-repeat: no-repeat; background-position: left top; padding-top

คุณสมบัติ border-image (shorthand) ใช้เพื่อเพิ่มขอบแบบภาพให้องค์ประกอบ ลองรันโค้ดด้านล่างเพื่อใช้งานคุณสมบัติ border-image: ตัวอย่าง <html> <head> <style> #borderimg1 { border: 15px solid transparent; padding: 15px; border-image: url(https://tut

คุณสมบัติ border-image ใน CSS ใช้เพื่อเพิ่มขอบแบบภาพให้กับองค์ประกอบ ลองรันโค้ดด้านล่างเพื่อตั้งค่าภาพเป็นขอบ: ตัวอย่าง <html> <head> <style> #borderimg1 { border: 10px solid transparent; padding: 15px; border-image-source: url(/css/images/borde

คุณสมบัติ border-image-source ใช้ใน CSS เพื่อกำหนดพาธของภาพ สามารถลองรันโค้ดด้านล่างเพื่อตั้งค่าพาธภาพได้: ตัวอย่าง <html> <head> <style> #borderimg1 { border: 15px solid transparent; padding: 15px; border-image-source: url(https://tutorialspoin

คุณสมบัติ border-image-slice ใช้เพื่อตัด (slice) ภาพขอบใน CSS ลองรันโค้ดด้านล่างเพื่อใช้งานคุณสมบัติ border-image-slice: ตัวอย่าง <html> <head> <style> #borderimg1 { border: 15px solid transparent; padding: 15px; border-image-source: url(https:/