วิธี scaleX(x) ใช้เพื่อปรับขนาดการแปลงองค์ประกอบโดยใช้แกน x ให้เราดูไวยากรณ์ − scaleX(x) ในที่นี้ x คือตัวเลขที่แทนตัวคูณมาตราส่วนเพื่อใช้กับ abscissa ของแต่ละจุดขององค์ประกอบ เรามาดูตัวอย่างกัน − div { width: 60px; height: 60px; background-color: yellow; }
วิธี scaleZ(z) ใช้เพื่อปรับขนาดการแปลงองค์ประกอบโดยใช้แกน Z ให้เราดูไวยากรณ์ − scaleZ(z) ในที่นี้ z คือตัวเลขที่แทนตัวคูณมาตราส่วนเพื่อใช้กับพิกัด z ของแต่ละจุดขององค์ประกอบ เรามาดูตัวอย่างกัน − div { width: 60px; height: 60px; background-color: black; } .pe
คุณสมบัติ border-image-width ใช้เพื่อกำหนดความกว้างของรูปภาพเส้นขอบ คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้งาน border-image-width ทรัพย์สิน − ตัวอย่าง <html> <head> <style> #borderimg1 {
คุณสมบัติการปรับขนาด CSS3 มีค่าทั่วไปสามค่าดังที่แสดงด้านล่าง - แนวนอน แนวตั้ง ทั้งสองอย่าง ตัวอย่าง การใช้ทั้งสองค่าในคุณสมบัติการปรับขนาดในอินเทอร์เฟซผู้ใช้ CSS3: <html> <head> <style> div { &nbs
เค้าร่างหมายถึงการวาดเส้นรอบองค์ประกอบที่ด้านนอกของเส้นขอบ ตัวอย่าง คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้งาน CSS3 outline-offset ทรัพย์สิน − <html> <head> <style> div { &nb
ให้เราเข้าใจความแตกต่างระหว่างคุณสมบัติการกำหนดขนาด CSS2 และคุณสมบัติการปรับขนาดกล่อง CSS3 คุณสมบัติการปรับขนาด CSS2 <html> <head> <style> .div1 { width: 200px; &nbs
คุณสมบัติการปรับขนาดกล่องใช้เพื่อเปลี่ยนความสูงและความกว้างขององค์ประกอบ ตั้งแต่ CSS2 คุณสมบัติของกล่องก็ทำงานดังที่แสดงด้านล่าง - width + padding + border = actual visible/rendered width of an element's box height + padding + border = actual visible/rendered height of an element's box ตัวอย
ข้อความค้นหาสื่อใช้สำหรับกฎรูปแบบที่แตกต่างกันสำหรับอุปกรณ์ขนาดต่างๆ เช่น โทรศัพท์มือถือ เดสก์ท็อป ฯลฯ คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้งานการสืบค้นสื่อด้วย CSS3 - ตัวอย่าง <html> <head> <style> body { background-color: lightpink; }
การออกแบบเว็บที่ตอบสนองตามอุปกรณ์จะมอบประสบการณ์ที่ดีที่สุด อ่านง่าย และไปยังส่วนต่างๆ ได้ง่าย โดยมีการปรับขนาดขั้นต่ำในอุปกรณ์ต่างๆ เช่น เดสก์ท็อป โทรศัพท์มือถือ และแท็บ ให้เราดูว่าการออกแบบเว็บตอบสนองคืออะไร:
ในการตั้งค่าการสืบค้นสื่อสำหรับกฎรูปแบบ CSS ต่างๆ คุณสามารถลองเรียกใช้โค้ดต่อไปนี้ - ตัวอย่าง <html> <head> <style> body { background-color: lightpink;
CSS3 ได้ดัดแปลงเทคโนโลยีการผสมแบบอักษร ในที่นี้ หากเบราว์เซอร์ไม่รองรับแบบอักษรแรก เบราว์เซอร์จะลองใช้แบบอักษรถัดไป เรามาดูตัวอย่างฟอนต์ Sans-Serif กัน −
CSS มีหลายหน่วยสำหรับหน่วยต่างๆ เช่น width, margin, padding, font-size, border-width เป็นต้น ความยาวระบุโดยใช้ค่าตัวเลขตามด้วยหน่วยความยาว เช่น px , dp, em ฯลฯ ไม่อนุญาตให้มีช่องว่างระหว่างค่าตัวเลขและหน่วยความยาว หน่วยความยาวแบ่งเป็นดังนี้: หน่วยสัมพัทธ์ แน่นอน หน่วยสัมบูรณ์ หน่วย ตัวย่อ P
ในหน่วยสัมพัทธ์ ค่าความยาวคงที่และปรากฏเป็นขนาดที่แน่นอนขององค์ประกอบ ให้เราดูหน่วย: หน่วย ตัวย่อ Percent % Em Em Ex Ex Root em Rem ความกว้างของวิวพอร์ต Vw ความกว้างของวิวพอร์ต Vh ความกว้างของวิวพอร์ต Vm อักขระ Ch ตาราง Gd
เอฟเฟกต์แอนิเมชั่นการแกว่งจะเคลื่อนที่หรือทำให้เคลื่อนที่ไปมาหรือจากด้านหนึ่งไปอีกด้านในขณะที่แขวนอยู่หรือบนแกนไปยังองค์ประกอบ ตัวอย่าง <html> <head> <style> .animated { ba
ใช้องค์ประกอบนี้เพื่อเพิ่มรูปแบบพิเศษให้กับตัวอักษรตัวแรกของข้อความในตัวเลือก ตัวอย่างต่อไปนี้จะสาธิตวิธีการใช้องค์ประกอบ :first-letter เพื่อเพิ่มเอฟเฟกต์พิเศษให้กับตัวอักษรตัวแรกขององค์ประกอบในเอกสาร ตัวอย่าง <html> <head> <style> &n
ในการสร้างเอฟเฟกต์แอนิเมชั่น Tada ด้วย CSS คุณสามารถลองเรียกใช้โค้ดต่อไปนี้: ตัวอย่าง <html> <head> <style> .animated { background-image: url(/css/images/logo.png);
คุณสมบัติ CSS border-image ใช้เพื่อเพิ่มเส้นขอบรูปภาพให้กับองค์ประกอบบางอย่าง คุณสามารถลองเรียกใช้รหัสต่อไปนี้เพื่อใช้คุณสมบัติ border-image - ตัวอย่าง <html> <head> <style> #borderimg1 {
คุณสมบัติ CSS border-image ใช้เพื่อเพิ่มเส้นขอบรูปภาพให้กับองค์ประกอบบางอย่าง คุณสามารถลองเรียกใช้รหัสต่อไปนี้เพื่อตั้งค่ารูปภาพเป็นเส้นขอบสำหรับองค์ประกอบ: ตัวอย่าง <html> <head> <style> #borderimg1 {
คุณสมบัติ border-image-source ใช้ใน CSS เพื่อกำหนดเส้นทางของรูปภาพ คุณสามารถลองเรียกใช้รหัสต่อไปนี้เพื่อกำหนดเส้นทางของภาพ - ตัวอย่าง <html> <head> <style> #borderimg1 { border: 15px solid transparent; padding: 15px; border-im
border-image-slice คุณสมบัติใช้เพื่อแบ่งภาพเส้นขอบด้วย CSS คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้งาน border-image-slice คุณสมบัติ: ตัวอย่าง <html> <head> <style> #borderimg1 { &
