หน้าแรก
หน้าแรก
หากต้องการสร้างมุมโค้งมน ให้ใช้คุณสมบัติ border-radius ใน CSS3 ต่อไปนี้เป็นรหัสสำหรับสร้างมุมโค้งมน - ตัวอย่าง <!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } div { display: inlin
ในการสร้างภาพเส้นขอบใน CSS ให้ใช้คุณสมบัติ border-image ต่อไปนี้เป็นรหัสสำหรับสร้างภาพเส้นขอบใน CSS - ตัวอย่าง <!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .border1 { border: 1
หากต้องการเพิ่มพื้นหลังหลายรายการ ให้ใช้คุณสมบัติ background-image ใน CSS ต่อไปนี้เป็นรหัสสำหรับเพิ่มพื้นหลังหลายอัน - ตัวอย่าง <!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } div { &nb
ในการกำหนดรูปร่างของการไล่ระดับสีในแนวรัศมี ให้ใช้ฟังก์ชัน radial-gradient() ฟังก์ชันนี้ตั้งค่าการไล่ระดับแนวรัศมีเป็นภาพพื้นหลัง พารามิเตอร์แรกในฟังก์ชันจะถูกกำหนดเป็นรูปร่างที่คุณต้องการดังแสดงด้านล่าง - background-image: radial-gradient(ellipse,rgb(217, 255, 0),rgb(255, 0, 0),rgb(14, 239, 255));
เมื่อใช้การแปลง 3 มิติ เราสามารถย้ายองค์ประกอบไปยังแกน x แกน y และแกน z ต่อไปนี้เป็นวิธีการบางอย่างของการแปลง CSS3 3D - วิธีการด้านล่างใช้เพื่อเรียกการแปลง 3 มิติ - ซีเนียร์ คุณค่าและรายละเอียด 1 matrix3d(น น น น น น น น น น น น น น น น น น ) ใช้เพื่อแปลงองค์ประกอบโดยใช้ค่าเมทริกซ์ 16 ค่า 2 แ
ในการสร้างเอฟเฟกต์การเปลี่ยน CSS3 ให้ใช้คุณสมบัติการเปลี่ยน ต่อไปนี้เป็นรหัสสำหรับสร้างเอฟเฟกต์การเปลี่ยนภาพโดยใช้ CSS3 - ตัวอย่าง <!DOCTYPE html> <html> <head> <style> .container div { width: 300px; height: 100px; background: rgb(25, 0,
ในการกำหนดขนาดของการไล่ระดับสีในแนวรัศมี ให้ใช้ฟังก์ชัน radial-gradient() ฟังก์ชันนี้ตั้งค่าการไล่ระดับแนวรัศมีเป็นภาพพื้นหลัง พารามิเตอร์ที่สองในฟังก์ชันจะถูกกำหนดเป็นขนาดที่คุณต้องการดังตัวอย่างด้านล่าง − background-image: radial-gradient(40% 50px at center,rgb(30, 255, 0),rgb(0, 195, 255),rgb(128
คุณสมบัติ text-overflow ใช้ใน CSS3 เพื่อกำหนดว่าเนื้อหาที่ล้นที่ไม่ได้แสดงนั้นส่งสัญญาณไปยังผู้ใช้อย่างไร ต่อไปนี้เป็นรหัสสำหรับจัดการข้อความล้นใน CSS3 - ตัวอย่าง <!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Ver
ข้อได้เปรียบหลักของการใช้ภาพสไปรท์คือการลดจำนวนคำขอ http ที่ทำให้โหลดไซต์ของเราเร็วขึ้น ต่อไปนี้เป็นรหัสสำหรับแสดงไอคอนจากเทพดารูปภาพโดยใช้ CSS - ตัวอย่าง <!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sa
ใช้รูปภาพสไปรท์เพื่อลดจำนวนคำขอ http ที่ทำให้โหลดไซต์ของเราเร็วขึ้น ต่อไปนี้เป็นรหัสสำหรับสร้างเมนูการนำทางโดยใช้ CSS ภาพเทพดา - ตัวอย่าง <!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
สีสำรองใช้เพื่อระบุสีสำหรับสถานการณ์เมื่อเบราว์เซอร์ไม่สนับสนุนสี RGBA เบราว์เซอร์บางตัวที่ไม่รองรับสีทางเลือก ได้แก่ โอเปร่า 9 และต่ำกว่า IE 8 และต่ำกว่า เป็นต้น ระบุสีทึบก่อนสี RGBA เพื่อให้สีทึบยังคงทำงานได้หากเบราว์เซอร์ไม่รองรับสี RGBA ต่อไปนี้เป็นรหัสสำหรับการประกาศสีทางเลือกใน CSS - ตัวอย่าง
นำสไตล์ไปใช้กับองค์ประกอบ HTML ที่มีแอตทริบิวต์เฉพาะโดยใช้ตัวเลือกแอตทริบิวต์ใน CSS มีการใช้กฎต่อไปนี้กับตัวเลือกแอตทริบิวต์ p[lang] − เลือกองค์ประกอบย่อหน้าทั้งหมดที่มีแอตทริบิวต์ lang p[lang=fr] − เลือกองค์ประกอบย่อหน้าทั้งหมดที่มีแอตทริบิวต์ lang มีค่าเท่ากับ fr p[lang~=fr] − เลือกองค์ปร
การไล่ระดับสีจะแสดงการผสมสีตั้งแต่สองสีขึ้นไป การไล่ระดับสีเชิงเส้นใช้เพื่อจัดเรียงสีตั้งแต่สองสีขึ้นไปในรูปแบบเชิงเส้น เช่น บนลงล่าง การไล่ระดับสีแบบเรเดียลจะปรากฏที่กึ่งกลาง ต่อไปนี้เป็นรหัสที่แสดงการใช้การไล่ระดับสีเชิงเส้นและแนวรัศมีใน CSS3 - ตัวอย่าง <!DOCTYPE html> <html> <head
สำหรับการควบคุมที่ชัดเจนมากขึ้นทิศทางของการไล่ระดับสี ให้กำหนดมุมตามรูปแบบด้านล่าง − background-image: linear-gradient(angle, color-stop1, color-stop2); ต่อไปนี้เป็นรหัสสำหรับกำหนดทิศทางของการไล่ระดับสีเชิงเส้นโดยใช้มุมใน CSS − ตัวอย่าง <!DOCTYPE html> <html> <head> <style>
ในการสร้างการไล่ระดับสีเชิงเส้นโดยใช้สต็อปหลายสี โค้ดจะเป็นดังนี้ − ตัวอย่าง <!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } div { height: 200px; width: 100%;
การไล่ระดับสีเชิงเส้นใช้เพื่อจัดเรียงสีตั้งแต่สองสีขึ้นไปในรูปแบบเชิงเส้น เช่น บนลงล่าง หากต้องการเพิ่มความโปร่งใส ให้ใช้ฟังก์ชัน RGBA() และกำหนดจุดหยุดสี ต่อไปนี้เป็นรหัสสำหรับตั้งค่าการไล่ระดับสีเชิงเส้นแบบโปร่งใสโดยใช้ CSS3 - ตัวอย่าง <!DOCTYPE html> <html> <head> <style>
ในการสร้างเอฟเฟกต์ CSS3 Box และ Text Shadow ให้ใช้คุณสมบัติ box-shadow และ text-shadow ตามลำดับ ต่อไปนี้เป็นรหัสสำหรับสร้างกล่อง CSS3 และเอฟเฟกต์เงาข้อความ - ตัวอย่าง <!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva,
การแปลง 2D ใช้เพื่อเปลี่ยนโครงสร้างองค์ประกอบใหม่เป็นการแปล หมุน ปรับขนาด และเอียง ต่อไปนี้เป็นฟังก์ชันการแปลง 2 มิติบางส่วน - ซีเนียร์ คุณค่าและรายละเอียด 1 เมทริกซ์(n,n,n,n,n,n) ใช้เพื่อกำหนดการแปลงเมทริกซ์ด้วยค่าหกค่า 2 แปล(x,y) ใช้เพื่อแปลงองค์ประกอบพร้อมกับแกน x และแกน y 3 แปลX(n) ใ
ในการแทนที่สีการเลือกข้อความเริ่มต้นด้วย CSS โค้ดจะเป็นดังนี้ ตัวอย่าง <!DOCTYPE html> <html> <head> <style> ::-moz-selection { color: rgb(255, 255, 255); background: rgb(118, 69, 231); } ::selec
CSS3 มีโหมดเลย์เอาต์กล่องแบบยืดหยุ่น ซึ่งเรียกกันทั่วไปว่า Flexbox Flexbox (กล่องแบบยืดหยุ่น) เป็นโหมดเลย์เอาต์ของ CSS3 เมื่อใช้โหมดนี้ คุณสามารถสร้างเค้าโครงสำหรับแอปพลิเคชันที่ซับซ้อนและหน้าเว็บได้อย่างง่ายดาย ประกอบด้วยคอนเทนเนอร์ รายการแบบยืดหยุ่น ฯลฯ คอนเทนเนอร์มีคุณสมบัติดังต่อไปนี้ − ทิศทา