#css 48

CSS Variable Toolkit

npm package สำหรับ CSS custom properties — ชุด design tokens, utility mixins, และ dark mode theme generator พร้อมใช้ใน Astro, Next.js, และ Vanilla CSS

Type Scale Explorer

เครื่องมือสำรวจ typographic scale แบบ visual — ปรับ base size, ratio, และ font family แล้วดู preview ทันที

CSS Animation Library

collection ของ CSS animation snippets แบบ copy-paste — entrance, exit, loading, micro-interaction พร้อม Astro demo page

Color Contrast Checker

CLI + Web tool ตรวจ WCAG color contrast ratio — รับ hex/rgb/hsl แสดง pass/fail AA/AAA และ suggest สี alternative

Web Component UI Kit

ชุด UI components ที่สร้างด้วย Custom Elements ล้วน — Button, Badge, Tooltip, Dialog — ใช้ร่วมกับทุก framework หรือ vanilla HTML

Color Palette Explorer

เครื่องมือสำหรับสำรวจ color palette ที่ใช้ CSS custom properties อย่างเดียว ไม่มี JavaScript library ให้ copy hex code และดู contrast ratio แบบ real-time

CSS Art Wallpaper Generator

Wallpaper patterns ที่สร้างด้วย CSS ล้วนๆ ไม่มี JavaScript ไม่มี canvas ใช้ CSS gradients, conic-gradient, และ custom properties ในการสร้าง pattern ที่เปลี่ยนแปลงได้

CSS Animations & Transitions — ทำ UI ให้มีชีวิตชีวา

รวม pattern CSS animation และ transition ที่ใช้จริงในการสร้าง UI ที่ smooth — hover effects, micro-interactions, page transitions และ reduced motion

CSS Architecture — BEM, CUBE CSS, Utility Classes

แนวทางจัดการ CSS ใน project ขนาดใหญ่: BEM naming, CUBE CSS methodology, เปรียบเทียบ Tailwind vs custom CSS

CSS @property — Typed Custom Properties

CSS @property ทำให้ custom properties มี type, initial value, และ inheritance control — รองรับ animation ของ color, number, และ gradient

CSS Cascade Layers — จัดการ Specificity แบบมีระบบ

@layer ช่วยควบคุมลำดับความสำคัญของ CSS โดยไม่ต้องพึ่ง specificity hack หรือ !important

CSS color-mix() และ Modern Color Functions

color-mix() ผสมสีโดยตรงใน CSS, relative color syntax แก้ไข channel เดียว, light-dark() สำหรับ adaptive color ไม่ต้องการ media query

CSS Container Queries — Responsive ตาม Container ไม่ใช่ Viewport

Container queries ให้ component ปรับ layout ตามขนาดของ parent container แทน viewport — ทำให้ component เป็น truly reusable ในทุกที่ที่วาง

CSS Flexbox Cheatsheet — จัดวาง Layout ให้ตรงใจ

รวม CSS Flexbox properties ที่ใช้บ่อย ทั้ง container และ item properties พร้อม visual guide และ use cases จริงสำหรับ navigation, card grid, centering

CSS Grid Advanced — Subgrid, Template Areas, Named Lines

เทคนิค Grid ระดับสูง: subgrid, named grid areas, auto-placement algorithm, และ grid ซ้อน grid

CSS Logical Properties — Writing Mode Aware Layout

margin-inline, padding-block, inset-inline-start — เขียน CSS ที่รองรับ RTL และ vertical text โดยไม่ต้องเขียน rule ซ้ำ

CSS Nesting — Native Nested Selectors

CSS Nesting ที่รองรับใน browser ตั้งแต่ Chrome 120+ ทำให้เขียน nested selectors ได้โดยไม่ต้องใช้ Sass — ครอบคลุม syntax, &, @nest, และ gotchas

CSS oklch() — ระบบสีสมัยใหม่ที่ดีกว่า hsl()

oklch() คือ color space ที่มนุษย์มองเห็นได้สม่ำเสมอ (perceptually uniform) — สร้าง palette ที่ consistent กว่าเดิมด้วย 3 ค่า: Lightness, Chroma, Hue

CSS Scroll-Driven Animations

Animate elements ตาม scroll position โดยใช้ animation-timeline: scroll() และ view() — ไม่ต้องการ JavaScript หรือ ScrollTrigger

CSS Scroll Snap

CSS Scroll Snap สำหรับ carousel, full-page scroll และ horizontal scroll — scroll-snap-type, scroll-snap-align, mandatory vs proximity, และ scroll-padding

CSS Subgrid — Nested Grids ที่ Align กับ Parent

CSS Subgrid ช่วยให้ nested elements align กับ grid ของ parent ได้ — แก้ปัญหา misaligned columns ใน card grids

GSAP Animation Guide — คู่มือ Animation ที่ทุก Frontend ควรรู้

GSAP คืออะไร ทำงานยังไง และวิธีใช้งานจริงในโปรเจกต์ — ตั้งแต่ gsap.to() พื้นฐานไปถึง ScrollTrigger และ Timeline

HTML Semantic Elements — เขียน HTML ให้มีความหมาย

รวม HTML5 semantic elements ที่ควรรู้ทั้งหมด ว่าควรใช้ element ไหนในสถานการณ์ใด ทำไมถึงสำคัญต่อ accessibility และ SEO และความสัมพันธ์กับ ARIA

Web Fonts Optimization — โหลด Font เร็วโดยไม่กระทบ UX

วิธี optimize font loading ให้ไม่เกิด FOUT/FOIT, ใช้ font-display อย่างถูกต้อง, preconnect, self-host fonts, variable fonts และ system font stack

Responsive Design Patterns — CSS ที่ใช้จริงบน Static Site

Pattern สำหรับ responsive layout บน CSS ล้วนๆ ที่ใช้ได้จริง ครอบคลุม fluid typography, container queries, intrinsic grid และ mobile-first approach

CSS Custom Properties — Pattern สำหรับ Theming และ Dark Mode

วิธีใช้ CSS custom properties (variables) อย่างเป็นระบบ สำหรับ theming, dark mode, และ design tokens บน static site

Tailwind CSS v4 — สิ่งที่เปลี่ยนไปและสิ่งที่ต้องรู้

สรุป Tailwind CSS v4 — CSS-first config, เลิก tailwind.config.js, @theme directive และ performance ที่ดีขึ้น

CSS Print Styles — ทำ @media print ให้ดูดีจริง

เทคนิค print stylesheet สำหรับหน้า CV, report และ document ที่พิมพ์หรือบันทึกเป็น PDF ได้อย่างถูกต้อง

@starting-style — CSS transition ตอน element ปรากฏครั้งแรก

text-wrap: balance — จัดบรรทัด heading ให้สมดุลอัตโนมัติ

CSS Anchor Positioning — ยึด element กับ element อื่น

CSS :has() เปลี่ยนวิธีเขียน hamburger nav ไปเลย

:has() ทำให้ hamburger menu เป็น CSS-only ได้จริงโดยไม่ต้อง JavaScript

CSS View Transitions API — page transition แบบ native

CSS Custom Properties inherit ลงมาตาม DOM — override ได้ที่ระดับ component

CSS variables ทำงานแบบ cascade เหมือน property ทั่วไป — ตั้งที่ :root แล้ว override ใน component ได้เลยโดยไม่กระทบส่วนอื่น

:focus-visible แทน :focus สำหรับ keyboard accessibility

:focus-visible แสดง outline เฉพาะเมื่อ navigate ด้วย keyboard — ไม่รกตาเมื่อ click ด้วย mouse

CSS grid-template-areas — layout เป็น visual map

clamp() สำหรับ fluid typography ไม่ต้อง media query

font-size ที่ scale ตาม viewport อัตโนมัติ ไม่ต้องเขียน breakpoint เลย

CSS @layer — จัดการ specificity โดยไม่ต้องแข่ง selector

CSS Nesting — เขียน nested selector ได้เหมือน Sass โดยไม่ต้องใช้ preprocessor

Native CSS nesting ใช้ & แทน parent selector เหมือน Sass/SCSS — build tool ไม่จำเป็นอีกต่อไปสำหรับ nested CSS

oklch() — color function ที่ perceptually uniform กว่า hsl()

oklch(lightness chroma hue) ปรับ lightness แล้วสีดูสว่างขึ้นจริงในสายตา ไม่ใช่แค่ค่าตัวเลข — ต่างจาก hsl ที่ yellow กับ blue มี perceived brightness ต่างกันมาก

CSS Logical Properties — เขียน layout ที่ตามทิศทางข้อความ

CSS color-mix() — ผสมสีใน browser ได้เลย ไม่ต้องพึ่ง JS

CSS Subgrid ทำให้ grandchildren align กับ parent grid ได้

grid-template-columns: subgrid ส่ง grid track ของ parent ลงมาให้ลูกหลานใช้ต่อ — ไม่ต้องวาง column ซ้ำอีกชั้น