หน้าแรก
หน้าแรก
คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้การไล่ระดับจากซ้ายไปขวาใน CSS3 ตัวอย่าง <html> <head> <style> #grad1 { height: 100px; back
คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้การไล่ระดับสีจากบนลงล่างใน CSS3 - ตัวอย่าง <html> <head> <style> #grad1 { height: 100px; b
การไล่ระดับสีจะแสดงการผสมกันของสีตั้งแต่สองสีขึ้นไป ต่อไปนี้เป็นประเภทของการไล่ระดับสี: ประเภทของการไล่ระดับสี การไล่ระดับสีเชิงเส้น (ลง/ขึ้น/ซ้าย/ขวา/แนวทแยง) การไล่ระดับสีแบบเรเดียล ตัวอย่าง ให้เราดูตัวอย่างของการไล่ระดับสีในแนวรัศมี: <html> <head>
คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อหมุน div ด้วยแกน x เอียงโดยใช้ CSS - ตัวอย่าง <html> <head> <style> div { width: 300px; heig
คุณสมบัติ CSS border-image-repeat ใช้เพื่อตั้งค่ารูปภาพเส้นขอบให้โค้งมน ทำซ้ำ และยืดออก ตัวอย่าง คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้คุณสมบัติ border-image-repeat - <html> <head> <style> #borderimg1 { &
CSS3 มีคุณสมบัติสีเพิ่มเติมดังนี้ - สี RGBA สี HSL สี HSLA มาดูกันว่าสี HSL คืออะไร: HSL ย่อมาจาก hue , ความอิ่มตัว , ความเบา . ในที่นี้ Huge คือระดับของวงล้อสี ความอิ่มตัวและความสว่างเป็นค่าเปอร์เซ็นต์ระหว่าง 0 ถึง 100% ไวยากรณ์ตัวอย่างของ HSL ดังแสดงด้านล่าง: #g1 {background-color: hsl(120,
RGBA ย่อมาจาก แดง เขียว น้ำเงิน อัลฟ่า . เป็นส่วนขยายของ CSS2 Alpha ระบุความทึบของสีและหมายเลขพารามิเตอร์เป็นตัวเลขระหว่าง 0.0 ถึง 1.0 ตัวอย่าง ตัวอย่างต่อไปนี้แสดงคุณสมบัติสี rgba - <html> <head> <style> #p1 {b
ใช้วิธีการหมุนX(มุม) เพื่อหมุนเปลี่ยนองค์ประกอบโดยใช้แกน x ด้วย CSS3 - ตัวอย่าง <html> <head> <style> div { width: 200px; height:
ใช้วิธีการหมุน (มุม) เพื่อหมุนเปลี่ยนองค์ประกอบโดยใช้แกน y ด้วย CSS3 - ตัวอย่าง <html> <head> <style> div { width: 200px; height:
HSLA ย่อมาจาก hue, saturation, lightness และ alpha ค่าอัลฟาจะระบุความทึบตามที่แสดง RGBA ตัวอย่าง ตัวอย่างต่อไปนี้แสดงคุณสมบัติของสี HSLA - <html> <head> <style> #d1 {background-color:hsla(120,100%,50%,0.3);}
ความทึบเป็นสีทินเนอร์ที่ต้องเพิ่มสีดำเพื่อเพิ่มความทึบ ตัวอย่างต่อไปนี้แสดงคุณสมบัติความทึบ CSS3 - ตัวอย่าง <html> <head> <style> #m1 {background-color:rgb(255,0,0);opacity:0.6;} #m2 {background-color:rgb(0,255,0);opacity:0.6;} #m3 {backgrou
การไล่ระดับสีเชิงเส้นใช้เพื่อจัดเรียงสีตั้งแต่ 2 สีขึ้นไปในรูปแบบเชิงเส้น เช่น บนลงล่าง ตัวอย่าง คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้การไล่ระดับสีเชิงเส้นใน CSS3 - <html> <head> <style> #grad1 {
คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อหมุน div ด้วยแกน y เอียงโดยใช้ CSS - ตัวอย่าง <html> <head> <style> div { width: 300px;
ต่อไปนี้คือหน่วยสัมบูรณ์ใน CSS: หน่วย ตัวย่อ Pixels Px Points Pt นิ้ว ใน เซนติเมตร Cm Picas Pc
คุณสมบัติ CSS border-image-slice ใช้เพื่อแบ่งรูปภาพเส้นขอบ ตัวอย่าง คุณสามารถลองเรียกใช้รหัสต่อไปนี้เพื่อใช้คุณสมบัติ border-image-slice - <html> <head> <style> #borderimg1 { &n
คุณสมบัติ CSS border-mage-source ใช้สำหรับกำหนดเส้นทางของภาพ คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้งาน border-image-source คุณสมบัติ: ตัวอย่าง <html> <head> <style> #borderimg1 {
ในการสร้างเอฟเฟกต์ภาพเคลื่อนไหวแบบหมุนออกด้วย CSS คุณสามารถลองเรียกใช้โค้ดต่อไปนี้ - ตัวอย่าง <html> <head> <style> .animated { background-image: url(/css/images/logo.png);
หากต้องการสร้างเอฟเฟกต์ภาพเคลื่อนไหวแบบหมุนขึ้นด้านซ้ายด้วย CSS คุณสามารถลองใช้โค้ดต่อไปนี้ - ตัวอย่าง <html> <head> <style> .animated { background-image: url(/css/images/l
หากต้องการสร้างเอฟเฟกต์ภาพเคลื่อนไหวแบบหมุนขึ้นด้วย CSS คุณสามารถลองเรียกใช้โค้ดต่อไปนี้ - ตัวอย่าง <html> <head> <style> .animated { background-image: url(/css/images/logo
วิธี scaleY(y) ใช้เพื่อปรับขนาดการแปลงองค์ประกอบโดยใช้แกน y ให้เราดูไวยากรณ์ − scaleY(y) ในที่นี้ y คือตัวเลขที่แทนตัวคูณมาตราส่วนเพื่อใช้กับพิกัดของแต่ละจุดขององค์ประกอบ เรามาดูตัวอย่างกัน − div { width: 60px; height: 60px; background-color: yellow; } .scal