{"id":25662,"date":"2026-01-12T23:55:07","date_gmt":"2026-01-12T23:55:07","guid":{"rendered":"https:\/\/basescripts.com\/?p=25662"},"modified":"2026-01-12T23:55:11","modified_gmt":"2026-01-12T23:55:11","slug":"100-practical-css-code-snippets","status":"publish","type":"post","link":"https:\/\/basescripts.com\/100-practical-css-code-snippets","title":{"rendered":"100 Practical CSS Code Snippets"},"content":{"rendered":"\n<p><a href=\"https:\/\/github.com\/lsvekis\/100-CSS-Snippets\">https:\/\/github.com\/lsvekis\/100-CSS-Snippets<\/a><\/p>\n\n\n\n<div data-wp-interactive=\"core\/file\" class=\"wp-block-file\"><object data-wp-bind--hidden=\"!state.hasPdfPreview\" hidden class=\"wp-block-file__embed\" data=\"https:\/\/basescripts.com\/wp-content\/uploads\/2026\/01\/100-Practical-CSS-Code-Snippets.pdf\" type=\"application\/pdf\" style=\"width:100%;height:600px\" aria-label=\"Embed of 100 Practical CSS Code Snippets.\"><\/object><a id=\"wp-block-file--media-4a8f8ab7-32de-44ce-bcd8-7f643738f72b\" href=\"https:\/\/basescripts.com\/wp-content\/uploads\/2026\/01\/100-Practical-CSS-Code-Snippets.pdf\">100 Practical CSS Code Snippets<\/a><a href=\"https:\/\/basescripts.com\/wp-content\/uploads\/2026\/01\/100-Practical-CSS-Code-Snippets.pdf\" class=\"wp-block-file__button wp-element-button\" download aria-describedby=\"wp-block-file--media-4a8f8ab7-32de-44ce-bcd8-7f643738f72b\">Download<\/a><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">1) Modern CSS Reset (minimal)<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>*,\n*::before,\n*::after { box-sizing: border-box; }\n\nhtml, body { height: 100%; }\n\nbody { margin: 0; line-height: 1.5; -webkit-font-smoothing: antialiased; }\n\nimg, picture, video, canvas, svg { display: block; max-width: 100%; }\n\ninput, button, textarea, select { font: inherit; }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Prevents common layout surprises (box sizing, default margins, media sizing).<br><strong>Use it:<\/strong> Put at the top of your stylesheet for consistent baseline behavior.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">2) Fluid Container<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.container { width: min(1100px, 92%); margin-inline: auto; }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Keeps content readable on large screens and padded on small screens.<br><strong>Use it:<\/strong> Wrap page sections in <code>.container<\/code>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">3) Responsive Typography (clamp)<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>h1 { font-size: clamp(1.8rem, 3vw + 1rem, 3.2rem); }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Automatically scales font size between min and max based on viewport.<br><strong>Use it:<\/strong> Great for headings on responsive pages.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">4) Better Line Length<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.prose { max-width: 65ch; }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Limits text width to a comfortable reading length.<br><strong>Use it:<\/strong> Apply to blog\/article text containers.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">5) Center Anything (Grid)<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.center { display: grid; place-items: center; }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Perfect vertical + horizontal centering.<br><strong>Use it:<\/strong> For modals, empty states, hero sections.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">6) Sticky Header<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.header {\n  position: sticky;\n  top: 0;\n  z-index: 10;\n  background: white;\n}\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Keeps header visible while scrolling.<br><strong>Use it:<\/strong> Add to nav bars; ensure background isn\u2019t transparent.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">7) Smooth Scrolling<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>html { scroll-behavior: smooth; }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Smoothly scrolls to anchor links.<br><strong>Use it:<\/strong> Great for one-page sites with section links.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">8) Scroll Margin for Anchors (fix sticky header overlap)<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>section { scroll-margin-top: 80px; }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Adds space when jumping to anchors so content isn\u2019t hidden behind sticky header.<br><strong>Use it:<\/strong> Set to your header height.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">9) Nice Focus Ring (accessible)<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>:focus-visible {\n  outline: 3px solid #3b82f6;\n  outline-offset: 3px;\n}\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Shows focus only for keyboard users (better UX).<br><strong>Use it:<\/strong> Improves accessibility on forms\/buttons\/links.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">10) Hide Visually, Keep for Screen Readers<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.sr-only {\n  position: absolute; width: 1px; height: 1px;\n  padding: 0; margin: -1px; overflow: hidden;\n  clip: rect(0,0,0,0); white-space: nowrap; border: 0;\n}\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Hides text visually while keeping it accessible.<br><strong>Use it:<\/strong> Labels, helper text, \u201cSkip to content\u201d.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Layout &amp; Positioning<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">11) Flex Row with Gap<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.row { display: flex; gap: 1rem; align-items: center; }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Row layout with consistent spacing.<br><strong>Use it:<\/strong> Toolbars, nav items, button groups.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">12) Wrap Items Responsively<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.wrap { display: flex; flex-wrap: wrap; gap: 12px; }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Items wrap onto new lines automatically.<br><strong>Use it:<\/strong> Tag lists, chips, card grids.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">13) Equal Columns (Flex)<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.cols &gt; * { flex: 1; }\n.cols { display: flex; gap: 1rem; }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> All children become equal-width columns.<br><strong>Use it:<\/strong> Simple two\/three-column layouts.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">14) Auto-fit Grid Cards<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.grid {\n  display: grid;\n  gap: 1rem;\n  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n}\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Responsive grid that adapts number of columns automatically.<br><strong>Use it:<\/strong> Card layouts without media queries.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">15) Sidebar Layout (Grid)<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.layout {\n  display: grid;\n  grid-template-columns: 280px 1fr;\n  gap: 1rem;\n}\n@media (max-width: 900px) {\n  .layout { grid-template-columns: 1fr; }\n}\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Sidebar + main content; collapses on small screens.<br><strong>Use it:<\/strong> Dashboards, docs sites.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">16) Full-Height App Shell<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.app { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Header + main + footer, with main filling remaining height.<br><strong>Use it:<\/strong> Pages where footer should sit at bottom.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">17) Truncate Single Line<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Adds \u201c\u2026\u201d when text overflows one line.<br><strong>Use it:<\/strong> Card titles, table cells.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">18) Clamp to 3 Lines<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.clamp-3 {\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Limits text to 3 lines with truncation.<br><strong>Use it:<\/strong> Previews, summaries.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">19) Absolute Center (classic)<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.abs-center {\n  position: absolute;\n  inset: 50% auto auto 50%;\n  transform: translate(-50%, -50%);\n}\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Centers an element inside its positioned parent.<br><strong>Use it:<\/strong> Badges, overlays.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">20) Safe Area Padding (iOS notch)<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.safe {\n  padding: max(16px, env(safe-area-inset-top))\n           max(16px, env(safe-area-inset-right))\n           max(16px, env(safe-area-inset-bottom))\n           max(16px, env(safe-area-inset-left));\n}\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Prevents content from hiding behind notches\/rounded corners.<br><strong>Use it:<\/strong> Full-screen mobile layouts.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Spacing, Sizing, and Units<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">21) Consistent Section Spacing<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>section { padding-block: 4rem; }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Adds vertical breathing room.<br><strong>Use it:<\/strong> Marketing pages.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">22) Fluid Spacing Scale<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>:root {\n  --space: clamp(1rem, 2vw, 2rem);\n}\n.card { padding: var(--space); }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Padding grows slightly with screen size.<br><strong>Use it:<\/strong> Cards\/containers.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">23) Logical Properties (better for RTL)<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.box { margin-inline: auto; padding-inline: 1rem; }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Works for left-to-right and right-to-left layouts automatically.<br><strong>Use it:<\/strong> International-friendly layouts.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">24) Square Avatar<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.avatar { width: 48px; aspect-ratio: 1; border-radius: 999px; object-fit: cover; }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Perfect circles for images.<br><strong>Use it:<\/strong> Profile pictures.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">25) Responsive Images Crop<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.hero-img { width: 100%; height: 50vh; object-fit: cover; }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Crops image to fill area without distortion.<br><strong>Use it:<\/strong> Hero banners.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Color, Backgrounds, and Effects<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">26) Subtle Gradient Background<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.bg {\n  background: linear-gradient(135deg, #0f172a, #111827 50%, #1f2937);\n}\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Adds depth without images.<br><strong>Use it:<\/strong> Headers, hero sections.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">27) Background Pattern (CSS-only dots)<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.dots {\n  background-image: radial-gradient(#e5e7eb 1px, transparent 1px);\n  background-size: 16px 16px;\n}\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Light dotted pattern.<br><strong>Use it:<\/strong> Sections or cards (keep subtle).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">28) Glassmorphism Card (simple)<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.glass {\n  background: rgba(255,255,255,0.08);\n  backdrop-filter: blur(10px);\n  border: 1px solid rgba(255,255,255,0.15);\n  border-radius: 16px;\n}\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> \u201cFrosted\u201d glass effect on supported browsers.<br><strong>Use it:<\/strong> Over background images\/gradients.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">29) Soft Shadow<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.shadow {\n  box-shadow: 0 10px 25px rgba(0,0,0,0.12);\n}\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Elevates elements without harsh edges.<br><strong>Use it:<\/strong> Cards, modals.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">30) Hover Lift<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.lift { transition: transform 160ms ease, box-shadow 160ms ease; }\n.lift:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(0,0,0,0.14); }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Makes cards feel clickable.<br><strong>Use it:<\/strong> Feature cards, product tiles.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Borders &amp; Shapes<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">31) Nice Rounded Corners<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.round { border-radius: 16px; }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Modern rounded look.<br><strong>Use it:<\/strong> Buttons\/cards\/images.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">32) Gradient Border<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.grad-border {\n  border: 2px solid transparent;\n  border-radius: 16px;\n  background:\n    linear-gradient(#fff, #fff) padding-box,\n    linear-gradient(135deg, #60a5fa, #a78bfa) border-box;\n}\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Creates a gradient outline without extra wrappers.<br><strong>Use it:<\/strong> Highlighted cards.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">33) Dashed Divider<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.divider { border-top: 1px dashed #d1d5db; }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Gentle separation.<br><strong>Use it:<\/strong> Between sections or list items.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">34) Fancy Corner Ribbon (badge)<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.ribbon {\n  position: absolute; top: 12px; right: -40px;\n  transform: rotate(45deg);\n  padding: 6px 48px;\n  background: #10b981; color: white;\n}\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Diagonal \u201cNEW\u201d\/\u201cSALE\u201d badge.<br><strong>Use it:<\/strong> On cards with <code>position: relative;<\/code>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Typography<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">35) Font Smoothing + Base Type<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Uses fast, clean system fonts.<br><strong>Use it:<\/strong> Default typography for apps.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">36) Better Headline Spacing<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>h1,h2,h3 { line-height: 1.15; letter-spacing: -0.02em; }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Makes headings feel tighter and more modern.<br><strong>Use it:<\/strong> Marketing pages.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">37) Balanced Text Wrap<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>h1, h2 { text-wrap: balance; }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Balances line breaks (supported in modern browsers).<br><strong>Use it:<\/strong> Headlines so they don\u2019t look awkward.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">38) Numerals Align Nicely<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.nums { font-variant-numeric: tabular-nums; }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Makes digits equal width (great for tables\/counters).<br><strong>Use it:<\/strong> Prices, dashboards.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Buttons &amp; UI Components<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">39) Solid Button<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.btn {\n  padding: 10px 14px;\n  border-radius: 12px;\n  border: 1px solid #111827;\n  background: #111827;\n  color: white;\n  cursor: pointer;\n}\n.btn:hover { opacity: 0.92; }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Clean, modern button style.<br><strong>Use it:<\/strong> Primary actions.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">40) Outline Button<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.btn-outline {\n  padding: 10px 14px;\n  border-radius: 12px;\n  border: 1px solid #cbd5e1;\n  background: transparent;\n}\n.btn-outline:hover { background: #f1f5f9; }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Secondary button look.<br><strong>Use it:<\/strong> Less prominent actions.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">41) Disabled Style<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>button:disabled { opacity: 0.5; cursor: not-allowed; }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Clear disabled state.<br><strong>Use it:<\/strong> Forms and loading states.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">42) Loading Spinner (CSS-only)<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.spinner {\n  width: 18px; aspect-ratio: 1;\n  border: 2px solid #cbd5e1;\n  border-top-color: #111827;\n  border-radius: 50%;\n  animation: spin 700ms linear infinite;\n}\n@keyframes spin { to { transform: rotate(360deg); } }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Animated spinner without images.<br><strong>Use it:<\/strong> Inside buttons or loading screens.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">43) Pill Badge<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.badge {\n  display: inline-block;\n  padding: 4px 10px;\n  border-radius: 999px;\n  background: #eef2ff;\n}\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Small pill tag.<br><strong>Use it:<\/strong> Status labels, categories.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">44) Card Component<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.card {\n  border: 1px solid #e5e7eb;\n  border-radius: 16px;\n  padding: 16px;\n  background: white;\n}\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Base card styling.<br><strong>Use it:<\/strong> Reusable UI layout.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">45) Modal Backdrop<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.backdrop {\n  position: fixed; inset: 0;\n  background: rgba(0,0,0,0.5);\n}\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Dim background behind modal.<br><strong>Use it:<\/strong> Pair with a centered modal panel.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Forms<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">46) Clean Input<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.input {\n  width: 100%;\n  padding: 10px 12px;\n  border: 1px solid #cbd5e1;\n  border-radius: 12px;\n}\n.input:focus { border-color: #3b82f6; outline: none; }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Modern input styling with focus feedback.<br><strong>Use it:<\/strong> Text fields, search bars.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">47) Input with Icon Layout<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.field { position: relative; }\n.field svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); }\n.field input { padding-left: 36px; }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Adds room for icon inside input.<br><strong>Use it:<\/strong> Search inputs.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">48) Checkbox Accent Color<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>input&#91;type=\"checkbox\"] { accent-color: #3b82f6; }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Styles native checkboxes easily.<br><strong>Use it:<\/strong> Modern browsers.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">49) Validation States<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.input.ok { border-color: #10b981; }\n.input.bad { border-color: #ef4444; }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Visual feedback for valid\/invalid fields.<br><strong>Use it:<\/strong> Toggle classes via JS.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">50) Form Row Spacing<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.form { display: grid; gap: 12px; }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Consistent spacing across form controls.<br><strong>Use it:<\/strong> Wrap inputs in <code>.form<\/code>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Images &amp; Media<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">51) Cover Image in Card<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.cover { width: 100%; aspect-ratio: 16\/9; object-fit: cover; border-radius: 12px; }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Keeps consistent thumbnail shape.<br><strong>Use it:<\/strong> Blog cards, video thumbnails.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">52) Prevent Layout Shift (reserve space)<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.media { aspect-ratio: 4\/3; background: #f1f5f9; }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Holds space while image loads.<br><strong>Use it:<\/strong> Wrap images inside <code>.media<\/code>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Lists, Tables, and Content<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">53) Nice List Spacing<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>ul { padding-left: 1.2rem; }\nli { margin-block: 0.35rem; }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Improves readability.<br><strong>Use it:<\/strong> Articles\/docs.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">54) Zebra Table<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>table { width: 100%; border-collapse: collapse; }\ntr:nth-child(even) { background: #f8fafc; }\ntd, th { padding: 10px; border-bottom: 1px solid #e5e7eb; }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Easy-to-scan tables.<br><strong>Use it:<\/strong> Data displays.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">55) Sticky Table Header<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>thead th {\n  position: sticky;\n  top: 0;\n  background: white;\n}\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Keeps column headers visible while scrolling.<br><strong>Use it:<\/strong> Tables inside a scroll container.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Animation &amp; Motion<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">56) Fade In<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.fade-in { animation: fade 300ms ease both; }\n@keyframes fade { from { opacity: 0; } to { opacity: 1; } }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Smooth entrance.<br><strong>Use it:<\/strong> Modals, toast notifications.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">57) Slide Up<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.slide-up { animation: up 260ms ease both; }\n@keyframes up { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Subtle slide + fade.<br><strong>Use it:<\/strong> Dropdowns, panels.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">58) Respect Reduced Motion<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>@media (prefers-reduced-motion: reduce) {\n  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }\n}\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Helps users who prefer less motion.<br><strong>Use it:<\/strong> Global accessibility improvement.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">59) Pulse Attention (subtle)<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.pulse { animation: pulse 1.6s ease-in-out infinite; }\n@keyframes pulse { 50% { transform: scale(1.03); } }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Gentle attention cue.<br><strong>Use it:<\/strong> \u201cNew\u201d indicators (don\u2019t overuse).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">60) Skeleton Loading<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.skeleton {\n  background: linear-gradient(90deg, #e5e7eb, #f3f4f6, #e5e7eb);\n  background-size: 200% 100%;\n  animation: shimmer 1.2s linear infinite;\n}\n@keyframes shimmer { to { background-position: -200% 0; } }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Shimmer placeholder while content loads.<br><strong>Use it:<\/strong> Loading cards and lists.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Responsive Design Helpers<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">61) Mobile-first Breakpoint<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>@media (min-width: 768px) { .hide-md { display: none; } }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Utility to hide elements on larger screens.<br><strong>Use it:<\/strong> Pair with <code>.show-md<\/code> style.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">62) Desktop-only<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.desktop-only { display: none; }\n@media (min-width: 1024px) { .desktop-only { display: block; } }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Shows content only on bigger screens.<br><strong>Use it:<\/strong> Sidebars, extra navigation.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">63) Responsive Padding<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.section { padding: 24px; }\n@media (min-width: 900px) { .section { padding: 48px; } }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> More spacing on larger screens.<br><strong>Use it:<\/strong> Layout polish.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">64) Container Queries (modern)<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.card-wrap { container-type: inline-size; }\n@container (min-width: 420px) {\n  .card { display: flex; gap: 12px; }\n}\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Styles based on container size, not viewport.<br><strong>Use it:<\/strong> Reusable components in different layouts.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Interactions, Hover, and State<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">65) Hover Underline Animation (links)<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>a {\n  text-decoration: none;\n  background: linear-gradient(currentColor, currentColor) 0 100% \/ 0 2px no-repeat;\n  transition: background-size 180ms ease;\n}\na:hover { background-size: 100% 2px; }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Smooth underline grow effect.<br><strong>Use it:<\/strong> Nav links, inline links.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">66) Clickable Card<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.card { cursor: pointer; }\n.card:active { transform: scale(0.99); }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Makes cards feel interactive.<br><strong>Use it:<\/strong> When the whole card is clickable.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">67) Disabled Pointer Events<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.is-disabled { pointer-events: none; opacity: 0.6; }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Prevents interaction with UI.<br><strong>Use it:<\/strong> While loading or locked.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">68) Prevent Text Selection<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.no-select { user-select: none; }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Stops accidental text highlight.<br><strong>Use it:<\/strong> Buttons, draggable items.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">69) Scrollbar Styling (WebKit)<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>::-webkit-scrollbar { width: 10px; }\n::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Makes scrollbar match UI (Chrome\/Safari).<br><strong>Use it:<\/strong> Light theming.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Advanced UI Patterns<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">70) Toast Position<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.toast-area {\n  position: fixed;\n  right: 16px;\n  bottom: 16px;\n  display: grid;\n  gap: 10px;\n}\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Stack notifications neatly.<br><strong>Use it:<\/strong> Render multiple toasts in this container.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">71) Tooltip (CSS-only)<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.tip { position: relative; }\n.tip::after {\n  content: attr(data-tip);\n  position: absolute;\n  left: 50%; bottom: 120%;\n  transform: translateX(-50%);\n  padding: 6px 10px;\n  background: #111827;\n  color: white;\n  border-radius: 10px;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 150ms ease;\n  white-space: nowrap;\n}\n.tip:hover::after { opacity: 1; }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Tooltip from a data attribute.<br><strong>Use it:<\/strong> Add <code>data-tip=\"Hello\"<\/code> to any element with class <code>tip<\/code>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">72) Dropdown Panel<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.menu { position: relative; }\n.panel {\n  position: absolute; top: 110%; right: 0;\n  min-width: 220px;\n  border: 1px solid #e5e7eb;\n  background: white;\n  border-radius: 14px;\n  padding: 10px;\n}\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Anchors a dropdown to a trigger.<br><strong>Use it:<\/strong> Toggle <code>.panel<\/code> with JS.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">73) Aspect Ratio Utility<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.ratio-16-9 { aspect-ratio: 16 \/ 9; }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Keeps fixed proportions.<br><strong>Use it:<\/strong> Video embeds, thumbnails.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">74) Blended Overlay on Image<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.banner {\n  background: url(hero.jpg) center\/cover;\n  background-blend-mode: multiply;\n  background-color: rgba(0,0,0,0.45);\n}\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Darkens image for readable text.<br><strong>Use it:<\/strong> Hero sections.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">75) Frosted Overlay for Text<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.overlay {\n  background: rgba(255,255,255,0.65);\n  backdrop-filter: blur(8px);\n  border-radius: 14px;\n  padding: 16px;\n}\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Keeps text readable over busy backgrounds.<br><strong>Use it:<\/strong> Cards on photos.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">CSS Variables &amp; Theming<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">76) Theme Tokens<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>:root{\n  --bg: #0b1220;\n  --card: #111827;\n  --text: #e5e7eb;\n  --muted: #94a3b8;\n  --accent: #60a5fa;\n}\nbody { background: var(--bg); color: var(--text); }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Centralizes colors for consistent theme.<br><strong>Use it:<\/strong> Change one variable to re-skin the whole site.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">77) Light\/Dark Theme Switch<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>:root&#91;data-theme=\"light\"] { --bg: #ffffff; --text: #0f172a; }\n:root&#91;data-theme=\"dark\"]  { --bg: #0b1220; --text: #e5e7eb; }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Theme based on attribute toggle.<br><strong>Use it:<\/strong> Set <code>document.documentElement.dataset.theme = \"dark\"<\/code>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">78) Automatic Dark Mode<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>@media (prefers-color-scheme: dark) {\n  :root { --bg: #0b1220; --text: #e5e7eb; }\n}\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Adjusts colors based on user preference.<br><strong>Use it:<\/strong> Default theming without JS.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Performance &amp; Safety<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">79) Content Visibility (perf boost)<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.card-list &gt; * { content-visibility: auto; contain-intrinsic-size: 300px; }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Skips rendering off-screen elements for faster scroll.<br><strong>Use it:<\/strong> Long lists\/grids (modern browsers).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">80) Prevent Image Drag (UX)<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>img { -webkit-user-drag: none; }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Avoids awkward dragging on some browsers.<br><strong>Use it:<\/strong> UI icons, logos.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">More Components &amp; Patterns<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">81) Breadcrumbs<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.breadcrumbs { display: flex; gap: 8px; flex-wrap: wrap; }\n.breadcrumbs a { color: #3b82f6; }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Clean breadcrumb layout.<br><strong>Use it:<\/strong> Navigation trails.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">82) Tabs (base styles)<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.tabs { display: flex; gap: 8px; border-bottom: 1px solid #e5e7eb; }\n.tab { padding: 10px 12px; border-radius: 10px 10px 0 0; }\n.tab&#91;aria-selected=\"true\"] { background: #f1f5f9; }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Visual tab UI.<br><strong>Use it:<\/strong> With JS for switching content.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">83) Progress Bar<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.progress { height: 10px; background: #e5e7eb; border-radius: 999px; overflow: hidden; }\n.progress &gt; span { display: block; height: 100%; width: 60%; background: #3b82f6; }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Simple progress indicator.<br><strong>Use it:<\/strong> Set width dynamically.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">84) Notification Banner<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.banner {\n  padding: 12px 14px;\n  border: 1px solid #fde68a;\n  background: #fffbeb;\n  border-radius: 14px;\n}\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Highlight important message.<br><strong>Use it:<\/strong> Warnings\/info callouts.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">85) \u201cChip\u201d Input Tags<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.chips { display: flex; flex-wrap: wrap; gap: 8px; }\n.chip { padding: 6px 10px; border-radius: 999px; background: #f1f5f9; }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Compact tag UI.<br><strong>Use it:<\/strong> Categories, filters.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Tricks &amp; Utilities<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">86) Prevent Overscroll Bounce (mobile)<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>body { overscroll-behavior: none; }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Reduces scroll chaining\/bounce.<br><strong>Use it:<\/strong> Web apps; be careful with usability.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">87) Snap Scrolling Carousel<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.carousel {\n  display: flex;\n  overflow-x: auto;\n  gap: 12px;\n  scroll-snap-type: x mandatory;\n}\n.carousel &gt; * { scroll-snap-align: start; }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Scroll snaps to items.<br><strong>Use it:<\/strong> Horizontal card scrollers.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">88) Hide Scrollbar (still scrollable)<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.hide-scrollbar { scrollbar-width: none; }\n.hide-scrollbar::-webkit-scrollbar { display: none; }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Cleaner look for carousels.<br><strong>Use it:<\/strong> Only when obvious that it scrolls.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">89) CSS Triangle (tooltip arrow)<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.arrow {\n  width: 0; height: 0;\n  border-left: 8px solid transparent;\n  border-right: 8px solid transparent;\n  border-top: 8px solid #111827;\n}\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Creates a triangle shape.<br><strong>Use it:<\/strong> Tooltip pointers, speech bubbles.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">90) Checkerboard Transparency BG<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.checker {\n  background:\n    linear-gradient(45deg, #e5e7eb 25%, transparent 25%) 0 0\/20px 20px,\n    linear-gradient(45deg, transparent 75%, #e5e7eb 75%) 0 0\/20px 20px,\n    linear-gradient(45deg, #e5e7eb 25%, transparent 25%) 10px 10px\/20px 20px,\n    linear-gradient(45deg, transparent 75%, #e5e7eb 75%) 10px 10px\/20px 20px;\n}\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Fake transparency background.<br><strong>Use it:<\/strong> Image editors\/previews.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Accessibility &amp; UX Polish<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">91) Bigger Tap Targets on Mobile<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>button, a { min-height: 44px; }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Easier tapping on touch screens.<br><strong>Use it:<\/strong> Especially for nav bars.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">92) Prevent Long Words Breaking Layout<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.prose { overflow-wrap: anywhere; }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Stops long URLs\/words from blowing up the layout.<br><strong>Use it:<\/strong> Comments, user-generated content.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">93) Better Selection Color<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>::selection { background: #bfdbfe; }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Makes text selection match theme.<br><strong>Use it:<\/strong> Branding polish.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">94) Cursor for Disabled Links<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>a&#91;aria-disabled=\"true\"] { pointer-events: none; opacity: 0.5; cursor: not-allowed; }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Clear disabled link behavior.<br><strong>Use it:<\/strong> Menus with locked items.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Modern CSS Features<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">95) :has() Parent Selector (modern)<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.card:has(a:hover) { transform: translateY(-3px); }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Styles parent when a child matches a condition.<br><strong>Use it:<\/strong> Card hover when inner link is hovered (supported in modern browsers).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">96) Color Mix (dynamic)<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.btn {\n  background: color-mix(in srgb, #3b82f6 85%, black);\n}\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Creates derived colors without manual tweaking.<br><strong>Use it:<\/strong> Theme systems.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">97) Scroll-Driven Sticky Section Title<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.section-title {\n  position: sticky;\n  top: 70px;\n  background: white;\n}\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Makes section headers stick while that section scrolls.<br><strong>Use it:<\/strong> Docs pages, long forms.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">98) Reduce Layout Jank for Fonts<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>:root { font-synthesis: none; }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Avoids synthetic bold\/italic in some browsers.<br><strong>Use it:<\/strong> When using custom fonts and consistent typography matters.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">99) Print Styles (basic)<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>@media print {\n  nav, footer { display: none; }\n  body { color: black; background: white; }\n}\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Cleaner printing.<br><strong>Use it:<\/strong> Docs pages, invoices.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">100) Debug Layout (outline everything)<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>* { outline: 1px solid rgba(255,0,0,0.12); }\n<\/code><\/pre>\n\n\n\n<p><strong>Does:<\/strong> Visualizes box boundaries to debug spacing issues.<br><strong>Use it:<\/strong> Temporarily while building layouts.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>https:\/\/github.com\/lsvekis\/100-CSS-Snippets 1) Modern CSS Reset (minimal) Does: Prevents common layout surprises (box sizing, default margins, media sizing).Use it: Put at the top of your stylesheet for consistent baseline behavior. 2) Fluid Container Does: Keeps content readable on large screens and padded on small screens.Use it: Wrap page sections in .container. 3) Responsive Typography (clamp) Does: &#8230; <a title=\"100 Practical CSS Code Snippets\" class=\"read-more\" href=\"https:\/\/basescripts.com\/100-practical-css-code-snippets\" aria-label=\"Read more about 100 Practical CSS Code Snippets\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":25663,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[34,45,57],"tags":[],"class_list":["post-25662","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-pdf","category-pdf-download"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/basescripts.com\/wp-content\/uploads\/2026\/01\/100CSS.jpg?fit=800%2C533&ssl=1","jetpack-related-posts":[{"id":21368,"url":"https:\/\/basescripts.com\/downloadable-pdf-guides-and-code-snippets-and-resources","url_meta":{"origin":25662,"position":0},"title":"Downloadable PDF Guides and Code Snippets and Resources","author":"Laurence Svekis","date":"June 12, 2025","format":false,"excerpt":"Discover My Latest Code Repositories & Downloadable Guides \ud83d\udcda\ud83d\udcbb I\u2019ve been hard at work over on GitHub crafting practical code examples and in-depth guides for web developers, automation enthusiasts, and Google Apps Script fans. Below you\u2019ll find all my active repositories\u2014each packed with hands\u2011on examples\u2014and links to downloadable PDF versions\u2026","rel":"","context":"In &quot;Apps Script Code Examples&quot;","block_context":{"text":"Apps Script Code Examples","link":"https:\/\/basescripts.com\/category\/apps-script"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/basescripts.com\/wp-content\/uploads\/2025\/06\/image-14.png?fit=1024%2C1024&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/basescripts.com\/wp-content\/uploads\/2025\/06\/image-14.png?fit=1024%2C1024&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/basescripts.com\/wp-content\/uploads\/2025\/06\/image-14.png?fit=1024%2C1024&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/basescripts.com\/wp-content\/uploads\/2025\/06\/image-14.png?fit=1024%2C1024&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":13800,"url":"https:\/\/basescripts.com\/web-dev-essentials-html-css-javascript-explained-unlocking-the-secrets-to-web-development-over-500-questions-answered-about-html-css-javascript","url_meta":{"origin":25662,"position":1},"title":"Web Dev Essentials HTML CSS JavaScript Explained: Unlocking the secrets to Web Development: Over 500 Questions Answered about HTML CSS JavaScript","author":"Laurence Svekis","date":"February 12, 2024","format":false,"excerpt":"\ud83d\ude80 Exciting News for Web Developers and Enthusiasts! \ud83d\ude80 I'm thrilled to announce a special promotion for my eBook: \"Web Dev Essentials: HTML, CSS, JavaScript Explained\". For a limited time, this comprehensive guide is FREE on Kindle for the next 3 days! \ud83d\udcd6 What You'll Discover Inside: Over 500 detailed\u2026","rel":"","context":"In &quot;Book&quot;","block_context":{"text":"Book","link":"https:\/\/basescripts.com\/category\/book"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/basescripts.com\/wp-content\/uploads\/2024\/02\/image-69.png?fit=1200%2C697&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/basescripts.com\/wp-content\/uploads\/2024\/02\/image-69.png?fit=1200%2C697&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/basescripts.com\/wp-content\/uploads\/2024\/02\/image-69.png?fit=1200%2C697&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/basescripts.com\/wp-content\/uploads\/2024\/02\/image-69.png?fit=1200%2C697&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/basescripts.com\/wp-content\/uploads\/2024\/02\/image-69.png?fit=1200%2C697&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":12919,"url":"https:\/\/basescripts.com\/unveil-the-secrets-of-web-development-your-ultimate-pdf-guide-to-html-and-css","url_meta":{"origin":25662,"position":2},"title":"Unveil the Secrets of Web Development Your Ultimate PDF Guide to HTML and CSS","author":"Laurence Svekis","date":"January 25, 2024","format":false,"excerpt":"Learn HTML & CSS: QuickStart Guide \ud83c\udf10 Are you aspiring to dive into the world of web development? Or are you a seasoned developer looking to brush up on your HTML and CSS skills? Look no further! Our comprehensive PDF Guide on HTML and CSS is here to transform your\u2026","rel":"","context":"In &quot;Code Snippet&quot;","block_context":{"text":"Code Snippet","link":"https:\/\/basescripts.com\/category\/code-snippet"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/basescripts.com\/wp-content\/uploads\/2024\/01\/image-74.png?fit=1200%2C340&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/basescripts.com\/wp-content\/uploads\/2024\/01\/image-74.png?fit=1200%2C340&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/basescripts.com\/wp-content\/uploads\/2024\/01\/image-74.png?fit=1200%2C340&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/basescripts.com\/wp-content\/uploads\/2024\/01\/image-74.png?fit=1200%2C340&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/basescripts.com\/wp-content\/uploads\/2024\/01\/image-74.png?fit=1200%2C340&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":8123,"url":"https:\/\/basescripts.com\/over-50-javascript-coding-examples-and-useful-code-snippets","url_meta":{"origin":25662,"position":3},"title":"Over 50 JavaScript Coding Examples and Useful Code Snippets","author":"Laurence Svekis","date":"February 25, 2023","format":false,"excerpt":"JavaScript Helpful Code Snippets https:\/\/www.linkedin.com\/pulse\/10-helpful-javascript-code-snippets-laurence-svekis- Write a function that reverses a string in JavaScript.Write a function that checks whether a given string is a palindrome in JavaScript.Write a function that returns the factorial of a given number in JavaScript.Write a function that finds the largest number in an array in\u2026","rel":"","context":"In &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/basescripts.com\/category\/javascript"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":8042,"url":"https:\/\/basescripts.com\/common-components-with-html-css-and-javascript","url_meta":{"origin":25662,"position":4},"title":"Common components with HTML CSS and JavaScript","author":"Laurence Svekis","date":"February 23, 2023","format":false,"excerpt":"JavaScript, HTML, and CSS are powerful web development technologies that can be used to create a wide variety of components and features for web applications. Here are some common components that can be created with these technologies: Navigation menus: JavaScript can be used to create interactive navigation menus that expand\u2026","rel":"","context":"In &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/basescripts.com\/category\/javascript"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/basescripts.com\/wp-content\/uploads\/2023\/02\/Learntocode.png?fit=1200%2C369&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/basescripts.com\/wp-content\/uploads\/2023\/02\/Learntocode.png?fit=1200%2C369&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/basescripts.com\/wp-content\/uploads\/2023\/02\/Learntocode.png?fit=1200%2C369&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/basescripts.com\/wp-content\/uploads\/2023\/02\/Learntocode.png?fit=1200%2C369&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/basescripts.com\/wp-content\/uploads\/2023\/02\/Learntocode.png?fit=1200%2C369&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":1571,"url":"https:\/\/basescripts.com\/javascript-array-methods-examples-and-code-explanation-learn-about-javascript-arrays","url_meta":{"origin":25662,"position":5},"title":"JavaScript Array Methods Examples and Code explanation Learn about JavaScript Arrays","author":"Laurence Svekis","date":"November 8, 2021","format":false,"excerpt":"Explore how to use JavaScript and create arrays CSS Modern Responsive Web Design Create 5 Different Sites Explore how you can create 5 Different Fully Responsive Mobile Ready websites CSS Grid CSS Flexbox Floats Plus Create websites course https:\/\/www.udemy.com\/course\/web-design-css\/?referralCode=E407F7891E7E1F90CDA2 Build YOUR Portfolio CSS Grid FlexBox Floats Responsive Design Websites Explore\u2026","rel":"","context":"In &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/basescripts.com\/category\/javascript"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/basescripts.com\/wp-content\/uploads\/2021\/11\/jsarray.jpg?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/basescripts.com\/wp-content\/uploads\/2021\/11\/jsarray.jpg?fit=1200%2C675&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/basescripts.com\/wp-content\/uploads\/2021\/11\/jsarray.jpg?fit=1200%2C675&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/basescripts.com\/wp-content\/uploads\/2021\/11\/jsarray.jpg?fit=1200%2C675&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/basescripts.com\/wp-content\/uploads\/2021\/11\/jsarray.jpg?fit=1200%2C675&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/pcGry9-6FU","_links":{"self":[{"href":"https:\/\/basescripts.com\/wp-json\/wp\/v2\/posts\/25662","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/basescripts.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/basescripts.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/basescripts.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/basescripts.com\/wp-json\/wp\/v2\/comments?post=25662"}],"version-history":[{"count":1,"href":"https:\/\/basescripts.com\/wp-json\/wp\/v2\/posts\/25662\/revisions"}],"predecessor-version":[{"id":25665,"href":"https:\/\/basescripts.com\/wp-json\/wp\/v2\/posts\/25662\/revisions\/25665"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/basescripts.com\/wp-json\/wp\/v2\/media\/25663"}],"wp:attachment":[{"href":"https:\/\/basescripts.com\/wp-json\/wp\/v2\/media?parent=25662"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/basescripts.com\/wp-json\/wp\/v2\/categories?post=25662"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/basescripts.com\/wp-json\/wp\/v2\/tags?post=25662"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}