ลองรันโค้ดด้านล่างเพื่อใช้งานไล่สีจากซ้ายไปขวา (Left to Right) ใน CSS3: ตัวอย่าง <html> <head> <style> #grad1 { height: 100px; background: -webkit-linear-gradient(left, red, blue); background: -o-linear-gradient(right, red, blue); backgr

ลองรันโค้ดด้านล่างเพื่อใช้งานไล่สีจากบนลงล่าง (Top to Bottom) ใน CSS3: ตัวอย่าง <html> <head> <style> #grad1 { height: 100px; background: -webkit-linear-gradient(pink, green); background: -o-linear-gradient(pink, green); background: -moz

Gradients แสดงการผสมผสานของสี 2 สีขึ้นไป ประเภทของ Gradients มีดังนี้: Types of gradients Linear Gradients (ไล่สีเชิงเส้น: ลง/ขึ้น/ซ้าย/ขวา/ทแยง) Radial Gradients (ไล่สีแบบรัศมี) ตัวอย่าง ตัวอย่าง Radial Gradients: <html> <head> <style> #grad1 { height: 1

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

คุณสมบัติ border-image-repeat ใน CSS ใช้เพื่อกำหนดการแสดงภาพขอบให้เป็น rounded, repeated หรือ stretched ตัวอย่าง ลองรันโค้ดด้านล่างเพื่อใช้งานคุณสมบัติ border-image-repeat: <html> <head> <style> #borderimg1 { border: 15px solid transparent; padding: 15p

CSS3 มีคุณสมบัติสีเพิ่มเติม ดังนี้: RGBA colors HSL colors HSLA colors มาดูว่า HSL colors คืออะไร: HSL ย่อมาจาก Hue (สี), Saturation (ความอิ่มตัว), Lightness (ความสว่าง) โดย Hue เป็นองศาบนวงสี saturation และ lightness เป็นค่าเปอร์เซ็นต์ 0-100% ตัวอย่างไวยากรณ์ HSL: #g1 { background-color: h

RGBA ย่อมาจาก Red Green Blue Alpha เป็นส่วนขยายของ CSS2 ค่า Alpha ระบุความทึบแสงของสี โดยค่าตัวเลขอยู่ระหว่าง 0.0 ถึง 1.0 ตัวอย่าง ตัวอย่างด้านล่างแสดงคุณสมบัติสี RGBA: <html> <head> <style> #p1 { background-color: rgba(255,0,0,0.3); } #p2 { background-color: rgb

ใช้เมธอด rotateX(angle) เพื่อหมุน transform องค์ประกอบบนแกน X ด้วย CSS3 ตัวอย่าง <html> <head> <style> div { width: 200px; height: 100px; background-color: pink; border: 1px solid black; } div#myDiv { -webkit-transfor

ใช้เมธอด rotateY(angle) เพื่อหมุน transform องค์ประกอบบนแกน Y ด้วย CSS3 ตัวอย่าง <html> <head> <style> div { width: 200px; height: 100px; background-color: pink; border: 1px solid black; } div#yDiv { -webkit-transform

HSLA ย่อมาจาก Hue (สี), Saturation (ความอิ่มตัว), Lightness (ความสว่าง), Alpha (ความทึบแสง) ค่า Alpha ระบุความทึบแสง เช่นเดียวกับ RGBA ตัวอย่าง ตัวอย่างด้านล่างแสดงคุณสมบัติสี HSLA: <html> <head> <style> #d1 { background-color: hsla(120, 100%, 50%, 0.3); } #d2 {

Opacity (ความทึบแสง) ควบคุมความโปร่งใสขององค์ประกอบ ค่าอยู่ระหว่าง 0.0 (โปร่งใสเต็มที่) ถึง 1.0 (ทึบแสงเต็มที่) ตัวอย่างด้านล่างแสดงคุณสมบัติ CSS3 Opacity: ตัวอย่าง <html> <head> <style> #m1 { background-color: rgb(255,0,0); opacity: 0.6; } #m2 { background-color

Linear Gradients ใช้จัดเรียงสี 2 สีขึ้นไปในรูปแบบเชิงเส้น เช่น จากบนลงล่าง ตัวอย่าง ลองรันโค้ดด้านล่างเพื่อใช้งาน Linear Gradients ใน CSS3: <html> <head> <style> #grad1 { height: 100px; background: -webkit-linear-gradient(pink, green); backgroun

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

ต่อไปนี้คือหน่วยแบบคงที่ (Absolute Units) ใน CSS: หน่วย (Units) ตัวย่อ (Abbreviation) Pixelspx Pointspt Inchesin Centimeterscm Picaspc

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

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

ตัวอย่าง หากต้องการสร้างเอฟเฟกต์อนิเมชันหมุนออกไปทางขวาล่าง (Rotate Out Down Right) ด้วย CSS สามารถทดลองรันโค้ดด้านล่างได้: <html> <head> <style> .animated { background-image: url(/css/images/logo.png); background-repeat: no-repeat; background-p

ตัวอย่าง หากต้องการสร้างเอฟเฟกต์อนิเมชันหมุนออกไปทางซ้ายบน (Rotate Out Up Left) ด้วย CSS สามารถทดลองรันโค้ดด้านล่างได้ (แก้ไขข้อผิดพลาดในโค้ดต้นฉบับแล้ว): <html> <head> <style> .animated { background-image: url(/css/images/logo.png); background-repeat:

ตัวอย่าง หากต้องการสร้างเอฟเฟกต์อนิเมชันหมุนออกไปทางขวาบน (Rotate Out Up Right) ด้วย CSS สามารถทดลองรันโค้ดด้านล่างได้: <html> <head> <style> .animated { background-image: url(/css/images/logo.png); background-repeat: no-repeat; background-posit

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