corpus.blog
41554 blogs · [ { "id": "01a087ed-d6ec-73ec-aba5-b0cf21823e0f", "title": "Add alternative text to CSS generated images", "url": "https://theosoti.com/short/accessible-css-generated-images/", "published_at": "2026-08-09T00:00:00+00:00" }, { "id": "01a087ed-d6ec-73ec-aba5-b0cf2189cad0", "title": "Build accessible accordions with details and summary", "url": "https://theosoti.com/short/accessible-details-accordion/", "published_at": "2026-08-09T00:00:00+00:00" }, { "id": "01a087ed-d6ec-73ec-aba5-b0cf21de0756", "title": "Create reusable CSS logic with @function", "url": "https://theosoti.com/short/css-custom-functions/", "published_at": "2026-08-09T00:00:00+00:00" }, { "id": "01a087ed-d6ec-73ec-aba5-b0cf228b780d", "title": "Replace six typography declarations with the CSS font shorthand", "url": "https://theosoti.com/short/css-font-shorthand/", "published_at": "2026-08-09T00:00:00+00:00" }, { "id": "01a087ed-d6ec-73ec-aba5-b0cf22d2a48a", "title": "Animate elements along a path with CSS Motion Path", "url": "https://theosoti.com/short/css-motion-path/", "published_at": "2026-08-09T00:00:00+00:00" }, { "id": "01a087ed-d6ec-73ec-aba5-b0cf239af0f1", "title": "Build dark mode with CSS only", "url": "https://theosoti.com/short/css-only-dark-mode/", "published_at": "2026-08-09T00:00:00+00:00" }, { "id": "01a087ed-d6ec-73ec-aba5-b0cf247cb87e", "title": "Apply hover styles only when a device can hover", "url": "https://theosoti.com/short/hover-media-query/", "published_at": "2026-08-09T00:00:00+00:00" }, { "id": "01a087ed-d6ec-73ec-aba5-b0cf24a73444", "title": "Understand every CSS object-fit value", "url": "https://theosoti.com/short/object-fit-values/", "published_at": "2026-08-09T00:00:00+00:00" }, { "id": "01a087ed-d6ec-73ec-aba5-b0cf24c1d499", "title": "Transition an element to its natural height in CSS", "url": "https://theosoti.com/short/smooth-height-transitions/", "published_at": "2026-08-09T00:00:00+00:00" }, { "id": "01a087ed-d6ec-73ec-aba5-b0cf24f03079", "title": "CSS if(): Conditional Styling Without JavaScript", "url": "https://theosoti.com/blog/css-if-function-conditional-styling-without-javascript/", "published_at": "2026-06-23T00:00:00+00:00" }, { "id": "01a087ed-d6ec-73ec-aba5-b0cf251758a4", "title": "CSS Anchor Positioning: Tooltips and Dropdowns Without JavaScript Math", "url": "https://theosoti.com/blog/css-anchor-positioning-without-javascript/", "published_at": "2026-06-16T00:00:00+00:00" }, { "id": "01a087ed-d6ec-73ec-aba5-b0cf25df6e7b", "title": "Open Dialogs and Popovers Without JavaScript Using commandfor", "url": "https://theosoti.com/blog/html-command-commandfor-without-javascript/", "published_at": "2026-06-08T00:00:00+00:00" }, { "id": "01a087ed-d6ec-73ec-aba5-b0cf260e3d0a", "title": "Build an animated perspective grid in pure CSS.", "url": "https://theosoti.com/short/moving-grid/", "published_at": "2026-05-26T00:00:00+00:00" }, { "id": "01a087ed-d6ec-73ec-aba5-b0cf262f0398", "title": "How to Use @starting-style in CSS for Entry Transitions", "url": "https://theosoti.com/blog/starting-style-css/", "published_at": "2026-05-10T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c311c6010ee", "title": "You can now style browser find-in-page matches in CSS.", "url": "https://theosoti.com/short/css-search-text-pseudo-element/", "published_at": "2026-04-28T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c311ca6c134", "title": "You can now create true randomness in CSS.", "url": "https://theosoti.com/short/css-random-function/", "published_at": "2026-04-26T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c311d754ecf", "title": "HTML in Canvas API Explained: Render HTML Inside Canvas", "url": "https://theosoti.com/short/html-in-canvas-api/", "published_at": "2026-04-18T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c311dc81690", "title": "How to Create Animated Gradient Borders in CSS", "url": "https://theosoti.com/blog/animated-gradient-borders/", "published_at": "2026-04-02T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c311e51c9e0", "title": "Shrink a sticky header only when it sticks. In CSS.", "url": "https://theosoti.com/short/shrink-sticky-header-scroll-state/", "published_at": "2026-03-16T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c311e94b6b6", "title": "You can now detect when sticky is actually stuck. In CSS.", "url": "https://theosoti.com/short/sticky-stuck-scroll-state/", "published_at": "2026-03-15T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c311f69f716", "title": "Your slider can now know the active card. In CSS.", "url": "https://theosoti.com/short/scroll-state-active-slider/", "published_at": "2026-03-14T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c311ff44f98", "title": "Reset Form Inputs Natively with button type=\"reset\"", "url": "https://theosoti.com/short/reset-form-natively/", "published_at": "2026-03-07T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c3120abafcc", "title": "Fix z-index leaks with CSS isolation: isolate", "url": "https://theosoti.com/short/isolation-isolate-property/", "published_at": "2026-03-03T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c3120f6eefe", "title": "React to Scroll with CSS Scroll State Queries", "url": "https://theosoti.com/short/scroll-state-query/", "published_at": "2026-02-11T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c312145dc9d", "title": "CSS Relative Colors: Build Palettes Without Color Pickers", "url": "https://theosoti.com/blog/css-relative-colors/", "published_at": "2026-01-26T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c312195e3a6", "title": "Align Numbers Perfectly with CSS tabular-nums", "url": "https://theosoti.com/short/tabular-nums/", "published_at": "2026-01-26T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c31227018dd", "title": "Create a Mirror Reflection Effect with CSS box-reflect", "url": "https://theosoti.com/short/reflexion-effect/", "published_at": "2026-01-20T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c3122f2840a", "title": "CSS corner-shape: Shape Corners Beyond border-radius", "url": "https://theosoti.com/short/corner-shape/", "published_at": "2026-01-19T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c3123685c14", "title": "Position Elements with CSS sibling-index()", "url": "https://theosoti.com/short/sibling-index/", "published_at": "2026-01-13T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c3123ee6d79", "title": "When Relative Units Behave Differently: EM vs REM in CSS", "url": "https://theosoti.com/short/em-or-rem/", "published_at": "2026-01-10T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c3124c17bcf", "title": "Designing Better CSS Box Shadows Easily", "url": "https://theosoti.com/blog/designing-shadows/", "published_at": "2025-12-25T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c31252bb313", "title": "Scroll-Driven Animations in CSS with @starting-style", "url": "https://theosoti.com/short/scroll-animation/", "published_at": "2025-12-20T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c3125ae0025", "title": "My Iterative Process to Design a Book Cover", "url": "https://theosoti.com/blog/book-cover-creation/", "published_at": "2025-10-14T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c3126296b07", "title": "Build a Masonry Layout with Pure CSS column-width", "url": "https://theosoti.com/short/masonry-layout/", "published_at": "2025-10-04T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c3126e7a40d", "title": "Responsive Components with CSS Container Queries", "url": "https://theosoti.com/short/emoji-toggle-cq/", "published_at": "2025-09-20T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c312753000f", "title": "Style Scrollbars with CSS scrollbar-color & scrollbar-width", "url": "https://theosoti.com/short/scrollbar-customisation/", "published_at": "2025-09-17T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c312804e260", "title": "CSS image-rendering: pixelated. Scale Pixel Art Without Blur", "url": "https://theosoti.com/short/crispy-images/", "published_at": "2025-09-15T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c31285cc90b", "title": "Create Multi-Column Layouts with CSS Columns", "url": "https://theosoti.com/short/simple-columns/", "published_at": "2025-08-30T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c31287da083", "title": "CSS backdrop-filter: Frosted Glass Effect Made Easy", "url": "https://theosoti.com/short/glassomorphism-backdrop-filter/", "published_at": "2025-08-29T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c3128d6406e", "title": "Crisp Background Images with CSS image-set()", "url": "https://theosoti.com/short/sharp-background-images/", "published_at": "2025-08-28T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c31299b8709", "title": "Pure CSS Typing Animation Effect without JavaScript", "url": "https://theosoti.com/short/typewrite-effect/", "published_at": "2025-08-27T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c312a79e2a5", "title": "CSS Moving Background Text Effect without JavaScript", "url": "https://theosoti.com/short/text-background-animation/", "published_at": "2025-08-19T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c312b76f433", "title": "CSS clamp(): Responsive Design Without Media Queries", "url": "https://theosoti.com/short/fluid-css-clamp/", "published_at": "2025-08-18T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c312c0b5d4c", "title": "CSS @property: Animate and Validate Custom Variables", "url": "https://theosoti.com/short/new-css-variables/", "published_at": "2025-08-17T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c312c7b522e", "title": "Native CSS Nesting vs Preprocessors, no more excuses", "url": "https://theosoti.com/short/native-css-nesting/", "published_at": "2025-08-16T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c312d58c771", "title": "Dynamic Layouts with CSS :has() without JavaScript", "url": "https://theosoti.com/short/switching-layout-in-CSS/", "published_at": "2025-08-15T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c312e33c5ab", "title": "CSS @scope: Encapsulated Styles Without CSS-in-JS", "url": "https://theosoti.com/short/scope-property/", "published_at": "2025-08-14T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c312e34de32", "title": "HTML inert: Disable Interactions and Improve Accessibility", "url": "https://theosoti.com/short/html-inert-attribute/", "published_at": "2025-08-13T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c312eb0e17c", "title": "Custom List Bullets in CSS with @counter-style", "url": "https://theosoti.com/short/customise-each-li-bullets/", "published_at": "2025-08-12T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c312f3849f6", "title": "CSS Light Sweep Animation for Cards without JavaScript", "url": "https://theosoti.com/short/featured-card-animation/", "published_at": "2025-08-11T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c3130284313", "title": "CSS Safe Area Insets: Protect Content from Phone Notches", "url": "https://theosoti.com/short/safe-area-inset/", "published_at": "2025-08-10T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c3131107033", "title": "New CSS Media Query Syntax: Easier, Cleaner, Faster", "url": "https://theosoti.com/short/new-media-queries/", "published_at": "2025-08-05T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c3131af2b86", "title": "Create a Back to Top Button with Just HTML and CSS", "url": "https://theosoti.com/short/back-to-top/", "published_at": "2025-07-22T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c313267dd6d", "title": "Style Native Elements with Full CSS Control", "url": "https://theosoti.com/short/customize-selects-css/", "published_at": "2025-07-20T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c3132c62235", "title": "Truncate Multiline Text with Ellipsis Using Pure CSS", "url": "https://theosoti.com/short/truncate-multiline-text/", "published_at": "2025-07-18T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c31339e6405", "title": "Crop and Zoom Images with CSS object-view-box", "url": "https://theosoti.com/short/shape-outside-image/", "published_at": "2025-07-16T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c31346e5a6e", "title": "Wrap Text Around Images with CSS shape-outside", "url": "https://theosoti.com/short/wrap-text-around-images/", "published_at": "2025-07-14T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c31349aed57", "title": "Build an Autoplay Carousel with Pure CSS", "url": "https://theosoti.com/short/autoplay-carousel/", "published_at": "2025-07-12T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c313514e0e8", "title": "Create Accessible Popups with the Native HTML Popover API", "url": "https://theosoti.com/short/html-popover-api/", "published_at": "2025-07-10T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c3135ed22fd", "title": "Style Native Form Elements with accent-color in CSS", "url": "https://theosoti.com/short/native-input-color/", "published_at": "2025-07-08T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c3136aea12c", "title": "Unlock All 4 CSS Focus States and 1 Hidden Gem", "url": "https://theosoti.com/short/4-css-focus-states/", "published_at": "2025-07-07T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c31378dc8f3", "title": "Simplify CSS Animations with Individual Transform Properties", "url": "https://theosoti.com/short/individual-transform-properties/", "published_at": "2025-07-06T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c31386dbb8e", "title": "Build Smarter Layouts with CSS Container Queries", "url": "https://theosoti.com/short/container-queries/", "published_at": "2025-07-05T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c3138875ffe", "title": "Add Smooth Page Transitions with CSS @view-transition", "url": "https://theosoti.com/short/view-transition/", "published_at": "2025-07-04T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c3138eb7086", "title": "Smooth Scrolling with CSS scroll-behavior", "url": "https://theosoti.com/short/smooth-scroll/", "published_at": "2025-07-03T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c3138fdc9fc", "title": "Create Animated Gradient Borders with Pure CSS", "url": "https://theosoti.com/short/border-gradient/", "published_at": "2025-07-02T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c313992d879", "title": "Style Drop Caps in CSS with :first-letter and initial-letter", "url": "https://theosoti.com/short/customise-first-letter/", "published_at": "2025-07-01T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c313a1ee45c", "title": "Smarter Layouts with CSS calc-size() without JS", "url": "https://theosoti.com/short/ratings-calc-size/", "published_at": "2025-06-25T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c313a70cc16", "title": "Create Animated Text Gradients with Pure CSS", "url": "https://theosoti.com/short/animated-text-gradient/", "published_at": "2025-06-20T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c313b7019bb", "title": "Trim text spacing with text-box-trim and text-box-edge", "url": "https://theosoti.com/short/text-box-trim/", "published_at": "2025-06-19T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c313c0fa0c6", "title": "Enhance Form UX with the Native Element", "url": "https://theosoti.com/short/form-datalist/", "published_at": "2025-06-18T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c313cc26e46", "title": "Unlock the Power of the Native Element in HTML", "url": "https://theosoti.com/short/native-dialog-element/", "published_at": "2025-06-17T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c313dad37db", "title": "Make Form Fields Auto-Resize with field-sizing: content", "url": "https://theosoti.com/short/native-field-sizing/", "published_at": "2025-06-16T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c313e14a169", "title": "Modern CSS Color Functions You Should Be Using", "url": "https://theosoti.com/short/list-css-color-functions/", "published_at": "2025-06-15T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c313e677d98", "title": "End CSS Specificity Battles with Native CSS Layers", "url": "https://theosoti.com/short/layer-property/", "published_at": "2025-06-13T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c313f096b8d", "title": "Align the Last Line of Text with This Little-Known CSS Trick", "url": "https://theosoti.com/short/align-last-line-of-text/", "published_at": "2025-05-31T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c313f45d689", "title": "Write Cleaner CSS with 4 Essential Flexbox Shorthands", "url": "https://theosoti.com/short/4-flexbox-shorthand-properties/", "published_at": "2025-05-28T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c313f4ce33a", "title": "4 Reusable CSS Snippets for Faster, Cleaner Code", "url": "https://theosoti.com/short/4-css-snipets/", "published_at": "2025-05-27T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c313ff95701", "title": "CSS-Only Countdown From 10 to 0 Without JavaScript", "url": "https://theosoti.com/short/css-countdown/", "published_at": "2025-05-26T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c3140794198", "title": "Clean Up Your CSS with :is() and :where() Selectors", "url": "https://theosoti.com/short/smarter-css-with-new-selectors/", "published_at": "2025-05-24T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c31412e3b9d", "title": "Level Up Text Styling with Advanced CSS Underlines", "url": "https://theosoti.com/short/text-decoration/", "published_at": "2025-05-22T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c3141a7a594", "title": "Build a CSS Counter Without JavaScript", "url": "https://theosoti.com/short/css-only-pokemon-counter/", "published_at": "2025-05-20T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c314268a177", "title": "Write Cleaner CSS with Modern Properties", "url": "https://theosoti.com/short/5-modern-properties/", "published_at": "2025-05-18T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c3142805dec", "title": "Animate in CSS without @keyframes using @starting-style", "url": "https://theosoti.com/short/animations-without-keyframes/", "published_at": "2025-05-16T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c3143472949", "title": "Learn Modern CSS Container Queries for Adaptive Layouts", "url": "https://theosoti.com/blog/container-queries/", "published_at": "2025-04-04T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c31436a0cae", "title": "Simplify layouts with CSS display: contents", "url": "https://theosoti.com/short/smarter-layouts-with-display-contents/", "published_at": "2025-03-30T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c31441b5b51", "title": "Create an inverted hover effect with CSS :has()", "url": "https://theosoti.com/short/custom-hover-effect-with-has/", "published_at": "2025-03-28T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c3144a5bdf7", "title": "Improve text readability with CSS text-wrap", "url": "https://theosoti.com/short/balanced-and-pretty-texts/", "published_at": "2025-03-26T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c31459be51a", "title": "Stylish drop caps in CSS with just two lines", "url": "https://theosoti.com/short/stylish-drop-caps/", "published_at": "2025-03-24T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c31466ed142", "title": "Smooth scrolling with CSS for clean, JS-free navigation", "url": "https://theosoti.com/short/smooth-scrolling-css-only/", "published_at": "2025-03-21T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c3146f417e6", "title": "CSS Text Gradients: Stunning Effects in 3 Lines", "url": "https://theosoti.com/short/texts-gradients/", "published_at": "2025-03-14T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c3147302a6a", "title": "CSS-Powered Before/After Slider with Minimal JS", "url": "https://theosoti.com/short/comparison-slider-in-css/", "published_at": "2025-03-12T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c3147e076af", "title": "CSS Anchor Positioning: Simplify Dynamic UI Layouts", "url": "https://theosoti.com/short/css-anchor-positioning/", "published_at": "2025-03-10T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c31488b6c48", "title": "Scroll-Linked CSS Progress Bar Without JavaScript", "url": "https://theosoti.com/short/create-progress-bar-css-only/", "published_at": "2025-03-07T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c31497215d7", "title": "Create custom form validation with CSS only", "url": "https://theosoti.com/short/form-validation-css-only/", "published_at": "2025-03-05T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c314a057466", "title": "CSS Gets Dynamic with the New attr() Function", "url": "https://theosoti.com/short/evolved-attr-function/", "published_at": "2025-03-03T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c314a0d1a4f", "title": "Create a responsive grid layout with just 1 line of CSS", "url": "https://theosoti.com/short/one-liner-responsive-layout/", "published_at": "2025-02-28T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c314a4bdc80", "title": "Select a range of elements without classes", "url": "https://theosoti.com/short/select-range-of-element/", "published_at": "2025-02-24T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c314abe3042", "title": "Write smarter CSS with 2 new selectors", "url": "https://theosoti.com/short/css-new-selectors/", "published_at": "2025-02-21T00:00:00+00:00" }, { "id": "01a087ed-d6ed-73f1-813e-2c314ad2aa57", "title": "New Viewport Units for Improved Mobile Design", "url": "https://theosoti.com/short/css-new-viewport-unit/", "published_at": "2025-02-19T00:00:00+00:00" } ] posts Claim your blog
Back to theosoti.com
Blog · corpus.blog/blogs/theosoti.com/posts

theosoti.com

theosoti.com

2026

Add alternative text to CSS generated imagesoriginal ↗
9 Aug 2026
Build accessible accordions with details and summaryoriginal ↗
9 Aug 2026
Create reusable CSS logic with @functionoriginal ↗
9 Aug 2026
Replace six typography declarations with the CSS font shorthandoriginal ↗
9 Aug 2026
Animate elements along a path with CSS Motion Pathoriginal ↗
9 Aug 2026
Build dark mode with CSS onlyoriginal ↗
9 Aug 2026
Apply hover styles only when a device can hoveroriginal ↗
9 Aug 2026
Understand every CSS object-fit valueoriginal ↗
9 Aug 2026
Transition an element to its natural height in CSSoriginal ↗
9 Aug 2026
CSS if(): Conditional Styling Without JavaScriptoriginal ↗
23 Jun 2026
CSS Anchor Positioning: Tooltips and Dropdowns Without JavaScript Mathoriginal ↗
16 Jun 2026
Open Dialogs and Popovers Without JavaScript Using commandfororiginal ↗
8 Jun 2026
Build an animated perspective grid in pure CSS.original ↗
26 May 2026
How to Use @starting-style in CSS for Entry Transitionsoriginal ↗
10 May 2026
You can now style browser find-in-page matches in CSS.original ↗
28 Apr 2026
You can now create true randomness in CSS.original ↗
26 Apr 2026
HTML in Canvas API Explained: Render HTML Inside Canvasoriginal ↗
18 Apr 2026
How to Create Animated Gradient Borders in CSSoriginal ↗
2 Apr 2026
Shrink a sticky header only when it sticks. In CSS.original ↗
16 Mar 2026
You can now detect when sticky is actually stuck. In CSS.original ↗
15 Mar 2026
Your slider can now know the active card. In CSS.original ↗
14 Mar 2026
Reset Form Inputs Natively with button type="reset"original ↗
7 Mar 2026
Fix z-index leaks with CSS isolation: isolateoriginal ↗
3 Mar 2026
React to Scroll with CSS Scroll State Queriesoriginal ↗
11 Feb 2026
CSS Relative Colors: Build Palettes Without Color Pickersoriginal ↗
26 Jan 2026
Align Numbers Perfectly with CSS tabular-numsoriginal ↗
26 Jan 2026
Create a Mirror Reflection Effect with CSS box-reflectoriginal ↗
20 Jan 2026
CSS corner-shape: Shape Corners Beyond border-radiusoriginal ↗
19 Jan 2026
Position Elements with CSS sibling-index()original ↗
13 Jan 2026
When Relative Units Behave Differently: EM vs REM in CSSoriginal ↗
10 Jan 2026

2025

Designing Better CSS Box Shadows Easilyoriginal ↗
25 Dec 2025
Scroll-Driven Animations in CSS with @starting-styleoriginal ↗
20 Dec 2025
My Iterative Process to Design a Book Coveroriginal ↗
14 Oct 2025
Build a Masonry Layout with Pure CSS column-widthoriginal ↗
4 Oct 2025
Responsive Components with CSS Container Queriesoriginal ↗
20 Sept 2025
Style Scrollbars with CSS scrollbar-color & scrollbar-widthoriginal ↗
17 Sept 2025
CSS image-rendering: pixelated. Scale Pixel Art Without Bluroriginal ↗
15 Sept 2025
Create Multi-Column Layouts with CSS Columnsoriginal ↗
30 Aug 2025
CSS backdrop-filter: Frosted Glass Effect Made Easyoriginal ↗
29 Aug 2025
Crisp Background Images with CSS image-set()original ↗
28 Aug 2025
Pure CSS Typing Animation Effect without JavaScriptoriginal ↗
27 Aug 2025
CSS Moving Background Text Effect without JavaScriptoriginal ↗
19 Aug 2025
CSS clamp(): Responsive Design Without Media Queriesoriginal ↗
18 Aug 2025
CSS @property: Animate and Validate Custom Variablesoriginal ↗
17 Aug 2025
Native CSS Nesting vs Preprocessors, no more excusesoriginal ↗
16 Aug 2025
Dynamic Layouts with CSS :has() without JavaScriptoriginal ↗
15 Aug 2025
CSS @scope: Encapsulated Styles Without CSS-in-JSoriginal ↗
14 Aug 2025
HTML inert: Disable Interactions and Improve Accessibilityoriginal ↗
13 Aug 2025
Custom List Bullets in CSS with @counter-styleoriginal ↗
12 Aug 2025
CSS Light Sweep Animation for Cards without JavaScriptoriginal ↗
11 Aug 2025
CSS Safe Area Insets: Protect Content from Phone Notchesoriginal ↗
10 Aug 2025
New CSS Media Query Syntax: Easier, Cleaner, Fasteroriginal ↗
5 Aug 2025
Create a Back to Top Button with Just HTML and CSSoriginal ↗
22 Jul 2025
Style Native Elements with Full CSS Controloriginal ↗
20 Jul 2025
Truncate Multiline Text with Ellipsis Using Pure CSSoriginal ↗
18 Jul 2025
Crop and Zoom Images with CSS object-view-boxoriginal ↗
16 Jul 2025
Wrap Text Around Images with CSS shape-outsideoriginal ↗
14 Jul 2025
Build an Autoplay Carousel with Pure CSSoriginal ↗
12 Jul 2025
Create Accessible Popups with the Native HTML Popover APIoriginal ↗
10 Jul 2025
Style Native Form Elements with accent-color in CSSoriginal ↗
8 Jul 2025
Unlock All 4 CSS Focus States and 1 Hidden Gemoriginal ↗
7 Jul 2025
Simplify CSS Animations with Individual Transform Propertiesoriginal ↗
6 Jul 2025
Build Smarter Layouts with CSS Container Queriesoriginal ↗
5 Jul 2025
Add Smooth Page Transitions with CSS @view-transitionoriginal ↗
4 Jul 2025
Smooth Scrolling with CSS scroll-behaviororiginal ↗
3 Jul 2025
Create Animated Gradient Borders with Pure CSSoriginal ↗
2 Jul 2025
Style Drop Caps in CSS with :first-letter and initial-letteroriginal ↗
1 Jul 2025
Smarter Layouts with CSS calc-size() without JSoriginal ↗
25 Jun 2025
Create Animated Text Gradients with Pure CSSoriginal ↗
20 Jun 2025
Trim text spacing with text-box-trim and text-box-edgeoriginal ↗
19 Jun 2025
Enhance Form UX with the Native Elementoriginal ↗
18 Jun 2025
Unlock the Power of the Native Element in HTMLoriginal ↗
17 Jun 2025
Make Form Fields Auto-Resize with field-sizing: contentoriginal ↗
16 Jun 2025
Modern CSS Color Functions You Should Be Usingoriginal ↗
15 Jun 2025
End CSS Specificity Battles with Native CSS Layersoriginal ↗
13 Jun 2025
Align the Last Line of Text with This Little-Known CSS Trickoriginal ↗
31 May 2025
Write Cleaner CSS with 4 Essential Flexbox Shorthandsoriginal ↗
28 May 2025
4 Reusable CSS Snippets for Faster, Cleaner Codeoriginal ↗
27 May 2025
CSS-Only Countdown From 10 to 0 Without JavaScriptoriginal ↗
26 May 2025
Clean Up Your CSS with :is() and :where() Selectorsoriginal ↗
24 May 2025
Level Up Text Styling with Advanced CSS Underlinesoriginal ↗
22 May 2025
Build a CSS Counter Without JavaScriptoriginal ↗
20 May 2025
Write Cleaner CSS with Modern Propertiesoriginal ↗
18 May 2025
Animate in CSS without @keyframes using @starting-styleoriginal ↗
16 May 2025
Learn Modern CSS Container Queries for Adaptive Layoutsoriginal ↗
4 Apr 2025
Simplify layouts with CSS display: contentsoriginal ↗
30 Mar 2025
Create an inverted hover effect with CSS :has()original ↗
28 Mar 2025
Improve text readability with CSS text-wraporiginal ↗
26 Mar 2025
Stylish drop caps in CSS with just two linesoriginal ↗
24 Mar 2025
Smooth scrolling with CSS for clean, JS-free navigationoriginal ↗
21 Mar 2025
CSS Text Gradients: Stunning Effects in 3 Linesoriginal ↗
14 Mar 2025
CSS-Powered Before/After Slider with Minimal JSoriginal ↗
12 Mar 2025
CSS Anchor Positioning: Simplify Dynamic UI Layoutsoriginal ↗
10 Mar 2025
Scroll-Linked CSS Progress Bar Without JavaScriptoriginal ↗
7 Mar 2025
Create custom form validation with CSS onlyoriginal ↗
5 Mar 2025
CSS Gets Dynamic with the New attr() Functionoriginal ↗
3 Mar 2025
Create a responsive grid layout with just 1 line of CSSoriginal ↗
28 Feb 2025
Select a range of elements without classesoriginal ↗
24 Feb 2025
Write smarter CSS with 2 new selectorsoriginal ↗
21 Feb 2025
New Viewport Units for Improved Mobile Designoriginal ↗
19 Feb 2025
Next