เราสามารถกำหนดเส้นทางการเคลื่อนที่ (Motion Path) ให้กับอิลิเมนต์ได้โดยใช้คุณสมบัติ offset-path ใน CSS ไวยากรณ์ (Syntax) Selector { offset-path: /*value*/ } ตัวอย่าง <!DOCTYPE html> <html> <head> <style> div { margin: 5%; width: 35px; height: 35px; offset

CSS Animations ช่วยให้เราเปลี่ยนรูปแบบอิลิเมนต์ได้หลายแบบโดยการรวม rotate และ translate ตัวอย่าง <!DOCTYPE html> <html> <head> <style> div { margin: 8%; width: 35px; height: 35px; border-radius: 5px; background: red; animation: move 3s infinite linear;

ด้วยความช่วยเหลือจาก events เช่น mousedown, mouseup และ mousemove เราสามารถย้ายตำแหน่งภาพ (translate) ได้ ซึ่งสร้างเอฟเฟกต์การลาก (drag effect) ตัวอย่าง <!DOCTYPE html> <html> <head> <style> #parent{ position: absolute; margin: 20px; width: 200px; height: 200

ในบทความนี้ เราจะทำความเข้าใจความแตกต่างระหว่าง HTML และ CSS HTML (HyperText Markup Language) ย่อมาจาก Hyper Text Markup Language ช่วยสร้างหน้าเว็บและแอปพลิเคชัน ช่วยกำหนดโครงสร้างของหน้าเว็บ เป็นภาษา Markup (ภาษาเครื่องหมาย) ช่วยสร้างหน้าเว็บแบบคงที่ (Static Pages) ได้ ช่วยแสดงข้อมูล HyperText ช่

เราสามารถค้นหาอิลิเมนต์ด้วย Locator CSS Selector ใน Selenium WebDriver นิพจน์ทั่วไปสำหรับสร้าง CSS Expression คือ tagname[attribute=value] เราสามารถใช้ attribute id และ class เพื่อสร้าง CSS ได้ กับ id ไวยากรณ์คือ tagname#id ตัวอย่างเช่น input#txt-loc โดย input คือ tagname และ txt-loc คือค่าของ id a

สำหรับการแสดงภาพจำนวนมากในเว็บไซต์ แนะนำให้ใช้รูปแบบ WebP เพราะมีการบีบอัดที่ดีกว่า เราใช้ element <picture> เพื่อให้ fallback สำหรับเบราว์เซอร์ที่ไม่รองรับ: <picture> <source srcset="filename.webp" type="image/webp"> <source srcset=" filename.jpg

ด้วยการใช้สไตล์ CSS ต่างๆ กับองค์ประกอบที่มี position: sticky เราสามารถตรวจจับได้อย่างง่ายดายเมื่อมันกลายเป็น fixed ตัวอย่าง <!DOCTYPE html> <html> <head> <style> #first { background-color: lightgrey; height: 10px; } #navbar-top { background-color: lightgrey;

โดยการระบุคุณสมบัติ position ใน CSS เราสามารถสร้าง Navigation Bar แบบ Fixed ได้เมื่อเลื่อนหน้าจอ ไวยากรณ์ Position Property Selector { position: /*value*/; } ตัวอย่าง <!DOCTYPE html> <html> <head> <style> #navigation-bar { overflow: hidden; box-shadow: inset 0

โดยการระบุความเร็วที่แตกต่างกันสำหรับเนื้อหาพื้นหลัง (background) และเนื้อหาพื้นหน้า (foreground) เราสามารถสร้างเอฟเฟกต์ Parallax Scrolling ได้ด้วย CSS ตัวอย่าง <!DOCTYPE html> <html> <head> <style> body, html { height: 100%; text-align: center; } .example { h

ด้วยความช่วยเหลือจาก CSS Animations เราสามารถสร้างแอนิเมชันแบบเครื่องพิมพ์ (Typewriter Animation) ได้โดยใช้ JavaScript ตัวอย่าง <!DOCTYPE html> <html> <head> <style> div { margin: 2%; font-family: Courier, monospace; display: inline-block; } div > div {

CSS caret-color, pointer-events และ tab-size เป็นคุณสมบัติที่นิยมน้อยกว่าสำหรับฟิลด์ป้อนข้อมูลฟอร์ม caret-color ช่วยระบุสีของเคอร์เซอร์กระพริบ ในขณะที่ pointer-events ช่วยป้องกันไม่ให้ผู้ใช้โต้ตอบกับองค์ประกอบ ส่วน tab-size ตั้งค่าปริมาณช่องว่างที่ใช้โดยแท็บ ตัวอย่างที่ 1: tab-size และ pointer-even

หน้าเว็บเต็มความสูงพร้อม Sidebar คงที่ (Fixed) และพื้นที่เนื้อหาที่เลื่อนได้ (Scrollable) สร้างได้โดยการตั้งค่าความสูง 100% และจัดตำแหน่งองค์ประกอบอย่างเหมาะสม ตัวอย่าง <!DOCTYPE html> <html> <head> <style> .main { margin-left: 140px; font-size: 200%; padding: 0

หน้าเว็บที่มี Sidebar แบบ fluid และพื้นที่เนื้อหาหลัก สร้างได้โดยการตั้งค่าขนาด html และ body ให้เป็น 100% ตัวอย่าง <!DOCTYPE html> <html> <head> <style> html,body { height: 100%; color: white; font-size: 2em; line-height: 200px; } #parent { display: tab

เราสามารถกำหนดสไตล์สำหรับหน้าเว็บในโหมดเต็มหน้าจอได้โดยใช้ CSS :fullscreen pseudo-class ไวยากรณ์ (Syntax) Selector:fullscreen { attribute: /*value*/ } ตัวอย่างที่ 1: เปลี่ยนสีพื้นหลังและขนาดตัวอักษร <!DOCTYPE html> <html> <head> <style> * { margin: 3%; } :fulls

โดยการระบุ padding ขององค์ประกอบเป็นเปอร์เซ็นต์ เราสามารถรักษาอัตราส่วนภาพ (Aspect Ratio) ได้ สำหรับสิ่งนี้ ใช้คุณสมบัติ padding ใน CSS: padding-bottom - ระบุ padding ด้านล่าง padding-top - ระบุ padding ด้านบน padding-left - ระบุ padding ด้านซ้าย padding-right - ระบุ padding ด้านขวา padding - shor

ด้วยคุณสมบัติ letter-spacing ใน CSS เราสามารถระบุปริมาณช่องว่างระหว่างตัวอักษรของข้อความได้ ตัวอย่างที่ 1: การขยายตัวอักษร <!DOCTYPE html> <html> <head> <style> p:first-of-type { margin: 3%; padding: 3%; background-color: seagreen; color: white; letter-spa

คุณสมบัติ scroll-behavior ใน CSS ช่วยให้เราเปลี่ยนพฤติกรรมการเลื่อนหน้าจอได้ ตัวอย่างที่ 1: Smooth Scrolling <!DOCTYPE html> <html> <head> <style> html { line-height: 200px; margin: 30px; text-align: center; vertical-align: middle; } #parent { scroll-beh

ด้วยการกำหนดคุณสมบัติ word-spacing ใน CSS เราสามารถตั้งค่าปริมาณช่องว่างระหว่างคำได้ ตัวอย่างที่ 1: การตั้งค่าระยะห่างคำ <!DOCTYPE html> <html> <head> <style> div { margin: 2%; padding: 2%; background-color: mediumorchid; color: ivory; word-spacing: 2.2cm;

CSS ช่วยให้เราจัดรูปแบบตัวอักษรแรกขององค์ประกอบได้โดยใช้ ::first-letter pseudo-element หมายเหตุ: เครื่องหมายวรรคตอน, digraphs และ content property อาจเปลี่ยนตัวอักษรแรกได้ ตัวอย่างที่ 1: การจัดรูปแบบตัวอักษรแรก <!DOCTYPE html> <html> <head> <style> body { text-align:

CSS ::first-line pseudo-element ช่วยให้เราจัดรูปแบบบรรทัดแรกขององค์ประกอบได้ ตัวอย่างที่ 1: การจัดรูปแบบบรรทัดแรก <!DOCTYPE html> <html> <head> <style> body { text-align: center; background-color: darkorchid; } ::first-line { font-size: 2em; color: black;