ใช้ CSS filter property ใส่เอฟเฟกต์ต่างๆ ให้รูปภาพ เช่น Invert, Blur, Sepia, Brightness, Contrast ได้ทันที ตัวอย่างโค้ด (Invert) <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> img{   &

ใช้ CSS filter: grayscale(100%) ทำให้รูปภาพสีกลายเป็นขาวดำทันที ไม่ต้องแก้ไขรูปต้นฉบับ ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> img{    margin: 20px; } img.norm

สาธิตการวางข้อความบนรูปภาพที่ตำแหน่งต่างๆ ทั้ง 5 จุด: มุม 4 มุม + กลาง ใช้ Class Utility (.TL, .TR, .BL, .BR, .center) ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> h1{  

เทคนิคการวางบล็อกข้อความ (Text Block) บนรูปภาพที่ตำแหน่งเฉพาะ (มุมล่างขวา) ใช้ Position Absolute ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .imageContainer {    d

วางข้อความบนรูปภาพพร้อมพื้นหลังโปร่งใส (Semi-transparent Background) ใช้ rgba() สำหรับสีพื้นหลังข้อความ ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * {    box-sizi

เทคนิคการทำให้รูปภาพครอบคลุมเต็มหน้าจอ (Full-page Background) ใช้ background-size: cover และ height: 100% บน html/body ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body, html

สร้างแถบไอคอนโซเชียลมีเดียติดขอบซ้าย (Fixed Sidebar) คงที่ขณะเลื่อนหน้า ใช้ Font Awesome Icons และ Button Group แนวตั้ง ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="sty

สร้าง Navigation Menu แบบ Pill/Rounded Buttons ใช้ border-radius: 5px (หรือ 50px สำหรับ Fully Rounded) ทำให้ลิงก์ดูเหมือนปุ่มแคปซูล ตัวอย่างโค้ด <!DOCTYPE html> <html lang="en"> <head> <title>Document </title> <style> nav{    width: 100%; &nbs

สร้าง Header/Navbar ที่ Responsive: บน Desktop แสดงแนวนอน บน Mobile ซ่อนเมนู แสดงแค่ Logo และ Hamburger (ต้องการ JS เพื่อ Toggle - ตัวอย่างมีแค่ CSS) ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1&quo

สร้าง Slideshow แบบเรียบง่าย พร้อม Navigation Dots (Indicator) Prev/Next Buttons และ Caption ใช้ CSS สำหรับ Layout และ Vanilla JS สำหรับ Logic ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" />

สร้าง Slideshow/Gallery พร้อม Thumbnail Navigation, Prev/Next Buttons, Captions และ Responsive Design ใช้ Vanilla JavaScript ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> *

สร้าง Grid รูปภาพที่ปรับจำนวนคอลัมน์ตามขนาดหน้าจอ ใช้ Flexbox + Flex-wrap + Media Queries รองรับ 3/2/1 คอลัมน์ ตัวอย่างโค้ด <!DOCTYPE html> <html> <style> * {    box-sizing: border-box; } h1 {    text-align: center; } .outer-grid {    display: flex; &

สร้างเอฟเฟกต์ Overlay บนรูปภาพเมื่อ Hover: รูปจางลง (Opacity) และแสดงข้อความ/ไอคอนตรงกลาง ใช้ Transition ทำให้สลม ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .card-container

สร้าง Dropup Menu (เมนูที่ขยายขึ้นไปด้านบนแทนที่จะลง) ใช้ position: absolute; bottom: 100%; บน Dropdown Content ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> .menu-btn { &nb

สร้าง Mega Menu แบบ Full-width Dropdown ที่ขยายเต็มความกว้างหน้าจอ เหมาะสำหรับเว็บอีคอมเมิร์ซหรือเว็บที่มีหมวดหมู่เยอะ ใช้ CSS Only ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> body {    margin: 0;    padding: 0; } *,*::before,*::after{    

สร้าง Pagination Component (แถบเลขหน้า) สำหรับรายการข้อมูลยาว ใช้ลิงก์สำหรับหมายเลขหน้า และสัญลักษณ์ « » สำหรับ Prev/Next ตัวอย่างโค้ด <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=de

สร้าง Breadcrumb Navigation (แถบแสดงตำแหน่งหน้าเว็บ) ใช้ <ul> <li> และ Pseudo-element ::before สร้างเครื่องหมาย / คั่นระหว่างรายการ ตัวอย่างโค้ด <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport"

สร้างกลุ่มปุ่มแนวนอน (Horizontal Button Group) ปุ่มติดกันไม่มีช่องว่าง ใช้ float: left และ border-right คั่นระหว่างปุ่ม ตัวอย่างโค้ด <!DOCTYPE html> <html> <style> .btnGroup{    display: inline-block;    font-size: 0;    border: 2px solid darkgreen; &

สร้างกลุ่มปุ่มแนวตั้ง (Vertical Button Group) ที่ต่อกันไม่มีช่องว่าง ใช้ display: block และ border-bottom คั่นระหว่างปุ่ม ตัวอย่างโค้ด <!DOCTYPE html> <html> <style> *,*::before,*::after{    box-sizing: border-box; } .btnGroup{    display: inline-block;  

เทคนิคการวาง Navigation Bar บนรูปภาพพื้นหลัง (Hero Section) ใช้ position: relative บน Container และ position: absolute หรือ Flow ปกติภายใน ตัวอย่างโค้ด <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conte