หน้าแรก
หน้าแรก
ใช้ การเปลี่ยนแปลง คุณสมบัติที่จะทำงานกับ CSS Transitions คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้การเปลี่ยนใน CSS: ตัวอย่าง <!DOCTYPE html> <html> <head> <style> div { &n
หากต้องการสร้างวงกลมที่มีการไล่ระดับสีแบบรัศมี คุณสามารถลองเรียกใช้โค้ดต่อไปนี้ ตั้งค่าพารามิเตอร์อื่นในการไล่ระดับแนวรัศมีสำหรับรูปร่างเช่นวงกลม ตัวอย่าง <!DOCTYPE html> <html> <head> <style> #demo {
ใช้ CSS box-shadow คุณสมบัติเพื่อเพิ่มเงาให้กับองค์ประกอบโดยใช้ CSS คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้คุณสมบัติ box-shadow: ตัวอย่าง <!DOCTYPE html> <html> <head> <style> h2 { &nbs
ในการสร้างเอฟเฟกต์การเปลี่ยน ให้ตั้งค่าคุณสมบัติสำหรับเอฟเฟกต์การเปลี่ยน และยังกำหนดระยะเวลาของเอฟเฟกต์ได้อีกด้วย transition: height 5s; คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อสร้างเอฟเฟกต์การเปลี่ยนแปลง ตัวอย่าง <!DOCTYPE html> <html> <head> <st
การสร้างแกลเลอรีรูปภาพด้วย CSS นั้นค่อนข้างง่าย คุณสามารถลองเรียกใช้รหัสต่อไปนี้เพื่อให้บรรลุเป้าหมายนี้ แกลเลอรี่ 3 ภาพถูกสร้างขึ้นที่นี่ ตัวอย่าง <!DOCTYPE html> <html> <head> <style> div.myGallery {
ใช้ transform-origin คุณสมบัติเพื่อเปลี่ยนตำแหน่งบนองค์ประกอบที่แปลงด้วย CSS ตัวอย่าง คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อเรียนรู้วิธีทำงานกับคุณสมบัติ transform-origin ด้วย CSS <!DOCTYPE html> <html> <head> <style> &nb
ใช้ CSS background-origin คุณสมบัติเพื่อตั้งค่ากล่องเนื้อหา ด้วยค่ากล่องเนื้อหา ภาพพื้นหลังจะเริ่มจากมุมซ้ายบนของเนื้อหา คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้ค่ากล่องเนื้อหา: ตัวอย่าง <!DOCTYPE html> <html> <head> <style> &n
หากต้องการเปลี่ยนตำแหน่งองค์ประกอบที่แปลงด้วย CSS ให้ใช้ transform-origin ทรัพย์สิน คุณสามารถลองเรียกใช้รหัสต่อไปนี้เพื่อเปลี่ยนตำแหน่ง: ตัวอย่าง <!DOCTYPE html> <html> <head> <style> .demo1 {
ใช้คุณสมบัติรูปแบบการแปลง เพื่อกำหนดวิธีการแสดงองค์ประกอบที่ซ้อนกันในพื้นที่ 3 มิติ คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้งาน transform-style ทรัพย์สิน ตัวอย่าง <!DOCTYPE html> <html> <head> <style> .dem
หากต้องการระบุวิธีการแสดงองค์ประกอบที่ซ้อนกันในพื้นที่ 3 มิติ ให้ใช้ รูปแบบการแปลง คุณสมบัติใน CSS คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้คุณสมบัติ transform-style: ตัวอย่าง <!DOCTYPE html> <html> <head> <style>
ในการระบุเปอร์สเปคทีฟเกี่ยวกับวิธีการดูองค์ประกอบ 3 มิติ ให้ใช้คุณสมบัติเปอร์สเปคทีฟ CSS คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อทำงานกับคุณสมบัติเปอร์สเปคทีฟ: ตัวอย่าง <!DOCTYPE html> <html> <head> <style> .de
ใช้คุณสมบัติเปอร์สเปคทีฟ CSS เพื่อระบุเปอร์สเปคทีฟเกี่ยวกับวิธีการดูองค์ประกอบ 3 มิติ คุณสามารถลองเรียกใช้รหัสต่อไปนี้เพื่อให้ได้สิ่งนี้ ตัวอย่าง <!DOCTYPE html> <html> <head> <style> .demo1 {
ใช้คุณสมบัติต้นทางเปอร์สเปคทีฟเพื่อระบุตำแหน่งด้านล่างขององค์ประกอบ 3 มิติ คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้คุณสมบัติเปอร์สเปคทีฟ-ออริจิน: ตัวอย่าง <!DOCTYPE html> <html> <head> <style> .demo1 { &nbs
ในการเลือกองค์ประกอบที่มีแอตทริบิวต์ ให้ใช้ตัวเลือก CSS [แอตทริบิวต์] ตัวอย่างเช่น แอตทริบิวต์ alt หรือแอตทริบิวต์เป้าหมาย เป็นต้น คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้ตัวเลือก CSS[attribute] ตัวอย่าง <!DOCTYPE html> <html> <head> <style>
ใช้ตัวเลือก [attribute=”value”] เพื่อเลือกองค์ประกอบที่มีแอตทริบิวต์และค่าที่ระบุ คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้ตัวเลือก CSS [attribute=value] ในที่นี้ เราได้พิจารณาแอตทริบิวต์เป็น rel ตัวอย่าง <!DOCTYPE html> <html> <head> <style>
ในการสร้างเอฟเฟกต์การซีดจางด้วย CSS ให้ใช้ c คุณสามารถลองเรียกใช้โค้ดต่อไปนี้สำหรับเอฟเฟกต์การซีดจาง: ตัวอย่าง <!DOCTYPE html> <html> <head> <style> #demo { height: 1
ใช้ตัวเลือก [attribute|=”value”] เพื่อเลือกองค์ประกอบที่มีแอตทริบิวต์ที่ระบุโดยเริ่มจากค่าที่ระบุ คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้ตัวเลือก CSS [attribute|=”value”] ตัวอย่าง <!DOCTYPE html> <html> <head> <style> &
หากต้องการเพิ่มสีให้กับเงา ให้ใช้ box-shadow คุณสมบัติและกำหนดสีด้วยความสูงและความกว้าง คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อตั้งค่าสีเป็นเงา: ตัวอย่าง <!DOCTYPE html> <html> <head> <style> h2 { &nbs
ปุ่มประเภทอินพุตอาจเป็นปุ่มส่งหรือปุ่มรีเซ็ต ด้วย CSS เราสามารถกำหนดรูปแบบปุ่มต่างๆ บนหน้าเว็บได้ คุณสามารถลองเรียกใช้รหัสต่อไปนี้เพื่อกำหนดรูปแบบการป้อนข้อมูลส่ง: ตัวอย่าง <!DOCTYPE html> <html> <head> <style> &n
หากต้องการเพิ่มเอฟเฟกต์เบลอให้กับเงา ให้ใช้คุณสมบัติ box-shadow คุณสามารถลองเรียกใช้รหัสต่อไปนี้เพื่อเพิ่มเอฟเฟกต์เบลอ ตัวอย่าง <!DOCTYPE html> <html> <head> <style> h2 { &