หน้าแรก
หน้าแรก
ใช้คุณสมบัติ CSS background-origin เพื่อตั้งค่า padding-box ด้วยค่า padding-box ภาพพื้นหลังจะเริ่มจากมุมซ้ายบนของขอบ padding คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้ค่า padding-box: ตัวอย่าง <!DOCTYPE html> <html> <head> <style>
ใช้ ทิศทางภาพเคลื่อนไหว คุณสมบัติเพื่อเรียกใช้แอนิเมชั่นในทิศทางย้อนกลับ คุณสมบัตินี้ใช้กับ ย้อนกลับ ค่าแอนิเมชั่นเพื่อให้บรรลุสิ่งนี้ ตัวอย่าง <!DOCTYPE html> <html> <head> <style> div {
หากต้องการแสดงเนื้อหาที่ล้นขณะวางเมาส์เหนือองค์ประกอบ คุณสามารถลองเรียกใช้โค้ดต่อไปนี้: ตัวอย่าง <!DOCTYPE html> <html> <head> <style> div.demo { white-space: nowrap
คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อสร้างการหยุดสีที่มีระยะห่างต่างกันด้วยการไล่ระดับสีแบบเรเดียล: ตัวอย่าง <!DOCTYPE html> <html> <head> <style> #demo { height: 200
ใช้ ทิศทางภาพเคลื่อนไหว คุณสมบัติเพื่อเรียกใช้แอนิเมชั่นในทิศทางอื่น คุณสมบัตินี้ใช้กับ ภาพเคลื่อนไหวสำรอง เพื่อให้บรรลุสิ่งนี้ ตัวอย่าง <!DOCTYPE html> <html> <head> <style> div {
ในการตั้งค่าองค์ประกอบให้คงค่ารูปแบบที่กำหนดโดยคีย์เฟรมสุดท้าย ให้ใช้ animation-fill-mode คุณสมบัติที่มี มูลค่าย้อนหลัง ตัวอย่าง <!DOCTYPE html> <html> <head> <style> div {
ใช้ตัวเลือก [attribute =”value”] เพื่อเลือกองค์ประกอบที่มีแอตทริบิวต์และค่าที่ระบุ คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้ตัวเลือก CSS [attribute=value] ที่นี่เราได้พิจารณาแอตทริบิวต์เป็น rel , ตัวอย่าง <!DOCTYPE html> <html> <head> <style>
หากต้องการเพิ่มช่องว่างในช่องข้อความของแบบฟอร์ม ให้ใช้คุณสมบัติช่องว่างภายใน CSS คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อให้ได้สิ่งนี้: ตัวอย่าง <!DOCTYPE html> <html> <head> <style> input[type = text] {
หากต้องการจัดรูปแบบช่องป้อนข้อมูลของแบบฟอร์ม คุณสามารถลองเรียกใช้โค้ดต่อไปนี้ จัดรูปแบบ อินพุต: ตัวอย่าง <!DOCTYPE html> <html> <head> <style> input { width: 100%; &
ในการตั้งค่าเส้นขอบให้เป็นอินพุตของฟอร์ม ให้ใช้คุณสมบัติ CSS border คุณสามารถลองเรียกใช้รหัสต่อไปนี้เพื่อเพิ่มเส้นขอบ ตัวอย่าง <!DOCTYPE html> <html> <head> <style> input[type = text] {
หากต้องการกำหนดรูปแบบตัวเลือกใน คุณสามารถลองเรียกใช้โค้ดต่อไปนี้ ตัวอย่าง <!DOCTYPE html> <html> <head> <style> select { width: 100%; &n
หากต้องการเพิ่มสีพื้นหลังให้กับอินพุตของแบบฟอร์ม ให้ใช้ background-color ทรัพย์สิน คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้คุณสมบัติสีพื้นหลังในรูปแบบ ตัวอย่าง <!DOCTYPE html> <html> <head> <style> input[typ
ปุ่มประเภทอินพุตอาจเป็นปุ่มส่งหรือปุ่มรีเซ็ต ด้วย CSS เราสามารถกำหนดรูปแบบปุ่มต่างๆ บนหน้าเว็บได้ คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อกำหนดรูปแบบปุ่มประเภทอินพุต: ตัวอย่าง <!DOCTYPE html> <html> <head> <style> &n
ใช้การไล่ระดับสีเชิงเส้น () เพื่อเพิ่มมุมบนการไล่ระดับสีเชิงเส้น คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อนำไปใช้กับการตั้งค่ามุมเป็น 0, 90 และ -90 องศา ตัวอย่าง <!DOCTYPE html> <html> <head> <style> #demo1 { &nb
สำหรับการหยุดหลายสีในการไล่ระดับเชิงเส้น คุณสามารถลองเรียกใช้โค้ดต่อไปนี้: ตัวอย่าง <!DOCTYPE html> <html> <head> <style> #demo { height: 100px;
หากต้องการตั้งค่าแถบนำทางที่ด้านบน ให้ใช้ ตำแหน่ง:แก้ไข d คุณสมบัติด้วย top ทรัพย์สิน คุณสามารถลองเรียกใช้รหัสต่อไปนี้เพื่อใช้งานเมนูที่อยู่ด้านบน ตัวอย่าง <!DOCTYPE html> <html> <head> <style> ul {
หากต้องการตั้งค่าแถบการนำทางที่ด้านล่าง ใช้ตำแหน่ง:คุณสมบัติคงที่ พร้อมคุณสมบัติด้านล่าง . คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้งานเมนูที่อยู่ด้านล่าง ตัวอย่าง <!DOCTYPE html> <html> <head> <style> ul { &
ด้วย CSS คุณสามารถเพิ่มลูกศรขนาดเล็กลงในคำแนะนำเครื่องมือได้โดยใช้ :after จากนั้นจึงใช้คุณสมบัติเนื้อหาด้วย คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อเพิ่มลูกศรในคำแนะนำเครื่องมือ: ตัวอย่าง .mytooltip .mytext { การมองเห็น:ซ่อน; ความกว้าง:140px; พื้นหลังสี:สีฟ้า; สี:#fff; ดัชนี z:1; ด้านล่าง:100%; ซ้าย
หากต้องการสร้างแกลเลอรีรูปภาพที่ตอบสนองด้วย CSS คุณสามารถลองเรียกใช้โค้ดต่อไปนี้ ตัวอย่าง <!DOCTYPE html> <html> <head> <style> div.myGallery { border: 2px solid ora
เมื่อรวมรูปภาพไว้ในรูปภาพเดียว จะเรียกว่ารูปภาพสไปรท์ สิ่งนี้ทำเพื่อลดคำขอของเซิร์ฟเวอร์และโหลดภาพทันที สมมติว่าคุณต้องใช้รูปภาพ 4 รูปในหน้าเว็บของคุณ ในกรณีนั้น ให้เพิ่มภาพทั้งหมดในภาพเดียวและอัปโหลด ด้วยวิธีนี้ คุณสามารถบันทึกคำขอของเซิร์ฟเวอร์ได้