theosoti.com

# TheoSoti

> Theosoti is a frontend blog sharing CSS tutorials, practical guides, and bite-sized tips on modern web development and UI design.

Author: Theo Soti — Frontend Developer & Content Creator.
Topics: CSS, HTML, JavaScript, modern web development, UI design, frontend tutorials.

## Blog Posts

In-depth tutorials and guides (5+ min reads).

- [How to Use @starting-style in CSS for Entry Transitions](https://theosoti.com/blog/starting-style-css/): Learn how @starting-style makes CSS entry transitions finally work for dialogs, popovers, and display:none elements without JS hacks.
- [How to Create Animated Gradient Borders in CSS](https://theosoti.com/blog/animated-gradient-borders/): Animated borders used to require heavy tricks: JavaScript continuously redrawing gradients, or SVG filters layered behind content.
- [CSS Relative Colors: Build Palettes Without Color Pickers](https://theosoti.com/blog/css-relative-colors/): Generate hover states, borders, shadows, and accents from a single base color using CSS relative colors.
- [Designing Better CSS Box Shadows Easily](https://theosoti.com/blog/designing-shadows/): Stop using fuzzy gray boxes. Build consistent, layered, color-matched shadows that make your UI feel real.
- [My Iterative Process to Design a Book Cover](https://theosoti.com/blog/book-cover-creation/): A behind the scenes look at how I designed my ebook cover, from AI drafts and Photopea mockups to a clean, minimal design style.
- [Mastering CSS Container Queries for Adaptive Layouts](https://theosoti.com/blog/container-queries/): Discover how CSS Container Queries let components adapt to their container size, enabling flexible, reusable designs across any screen.
- [How to Implement Scroll-Driven Animations Using Pure CSS](https://theosoti.com/blog/scroll-driven-animation/): Learn how to create engaging scroll-driven animations using pure CSS. Enhance your frontend skills with this step-by-step guide.
- [CSS :focus Hack for Better UX Without JavaScript](https://theosoti.com/blog/css-focus-hack/): Fix unwanted focus styles with this pure CSS trick using :focus-visible. Improve accessibility and UX without needing extra JavaScript.
- [Smooth CSS Height Transitions Without Max-Height](https://theosoti.com/blog/height-transition/): Learn how to animate an element’s height in CSS smoothly, without using hardcoded max-height. A practical guide to dynamic content transitions.
- [How to Build a Dark Mode Toggle in Pure CSS](https://theosoti.com/blog/darkmode-css/): Implement a clean, accessible dark mode for your site using just CSS. No JavaScript needed. Includes system preference support and toggle logic.

## Short Posts

Bite-sized tips (under 1 min).

- [You can now style browser find-in-page matches in CSS.](https://theosoti.com/short/css-search-text-pseudo-element/): Style browser find-in-page matches with CSS ::search-text and :current. Support is limited, so treat it as progressive enhancement.
- [You can now create true randomness in CSS.](https://theosoti.com/short/css-random-function/): CSS random() lets you generate values inside a range and share random base values across properties. Powerful idea, but support is still limited.
- [HTML in Canvas API Explained: Render HTML Inside Canvas](https://theosoti.com/short/html-in-canvas-api/): Explore the experimental HTML in Canvas API, which renders real HTML inside canvas while preserving DOM interaction and accessibility.
- [Shrink a sticky header only when it sticks. In CSS.](https://theosoti.com/short/shrink-sticky-header-scroll-state/): Use CSS scroll-state queries to shrink a sticky header only after it becomes stuck. A cleaner way to build adaptive headers without scroll listeners.
- [You can now detect when sticky is actually stuck. In CSS.](https://theosoti.com/short/sticky-stuck-scroll-state/): Use CSS scroll-state queries to style a sticky element only when it is actually stuck to the top. No scroll listener, no class toggle, no JavaScript.
- [Your slider can now know the active card. In CSS.](https://theosoti.com/short/scroll-state-active-slider/): Use CSS scroll-state queries to detect the snapped slide in a carousel and style the active card without Intersection Observer, scroll listeners, or JavaScript.
- [Reset Form Inputs Natively with button type="reset"](https://theosoti.com/short/reset-form-natively/): Use the native reset button to restore inputs, selects, checkboxes, and validation state without JavaScript. A simple HTML feature that is still easy to forget.
- [Fix z-index leaks with CSS isolation: isolate](https://theosoti.com/short/isolation-isolate-property/): Use isolation: isolate to create a new stacking context and keep pseudo-elements, blend effects, and negative z-index layers inside their component.
- [React to Scroll with CSS Scroll State Queries](https://theosoti.com/short/scroll-state-query/): Use CSS scroll state queries to style elements based on scroll position. Detect top, bottom, or scrolling states without JavaScript or scroll listeners.
- [Align Numbers Perfectly with CSS tabular-nums](https://theosoti.com/short/tabular-nums/): Use CSS tabular-nums to align numbers in tables, dashboards, prices, and stats for cleaner, more readable interfaces and layouts.
- [Create a Mirror Reflection Effect with CSS box-reflect](https://theosoti.com/short/reflexion-effect/): Create a mirror reflection effect in CSS with -webkit-box-reflect and add glossy image reflections with a single property and graceful fallback.
- [CSS corner-shape: Shape Corners Beyond border-radius](https://theosoti.com/short/corner-shape/): Learn the CSS corner-shape property to create scoop, bevel, squircle, and custom corners beyond border-radius with progressive enhancement.
- [Position Elements with CSS sibling-index()](https://theosoti.com/short/sibling-index/): Learn how CSS sibling-index() lets elements position themselves based on sibling order. Use pure CSS math for layouts without JavaScript or nth-child selectors.
- [When Relative Units Behave Differently: EM vs REM in CSS](https://theosoti.com/short/em-or-rem/): Learn the difference between CSS em and rem units, when to use each one, and how they affect scalable typography, spacing, and layouts.
- [Scroll-Driven Animations in CSS with @starting-style](https://theosoti.com/short/scroll-animation/): Learn how to combine entry animations and scroll-driven motion using modern CSS. Use @starting-style, custom properties, and scroll timelines.
- [Build a Masonry Layout with Pure CSS column-width](https://theosoti.com/short/masonry-layout/): Create responsive Masonry layouts using the CSS column-width property. Fit flexible columns automatically, no JavaScript or grid hacks—just clean, native CSS.
- [Responsive Components with CSS Container Queries](https://theosoti.com/short/emoji-toggle-cq/): Use CSS container queries to make components respond to their parent’s size, not the viewport. Create adaptive layouts and icons with clean, modern CSS.
- [Style Scrollbars with CSS scrollbar-color & scrollbar-width](https://theosoti.com/short/scrollbar-customisation/): Customize scrollbars to match your UI using scrollbar-color and scrollbar-width. Control colors, size, and accessibility. All with just two CSS properties.
- [CSS image-rendering: pixelated. Scale Pixel Art Without Blur](https://theosoti.com/short/crispy-images/): Preserve sharp edges when scaling pixel art, icons, retro screenshots, or QR codes using one line of CSS supported by modern browsers.
- [Create Multi-Column Layouts with CSS Columns](https://theosoti.com/short/simple-columns/): Build column layouts with the CSS columns property. Add spacing, separators, and spanning elements in just two lines of code.
- [CSS backdrop-filter: Frosted Glass Effect Made Easy](https://theosoti.com/short/glassomorphism-backdrop-filter/): Enhance your UI with the CSS backdrop-filter property. Apply blur, brightness, or contrast for sleek frosted-glass effects.
- [Crisp Background Images with CSS image-set()](https://theosoti.com/short/sharp-background-images/): Serve sharp, responsive backgrounds with CSS image-set(). Let browsers choose the right asset for retina or standard screens efficiently.
- [Pure CSS Typing Animation Effect without JavaScript](https://theosoti.com/short/typewrite-effect/): Create a smooth typing text animation using pure CSS with keyframes, steps(), overflow, and a blinking caret. No JavaScript required.
- [CSS Moving Background Text Effect without JavaScript](https://theosoti.com/short/text-background-animation/): Learn how to animate text with a moving background using only CSS. A lightweight effect with background-clip, keyframes, and zero JavaScript.
- [CSS clamp(): Responsive Design Without Media Queries](https://theosoti.com/short/fluid-css-clamp/): Learn how CSS clamp() creates fluid, responsive layouts by defining min, preferred, and max values—reducing media queries with 95% browser support.
- [CSS @property: Animate and Validate Custom Variables](https://theosoti.com/short/new-css-variables/): Learn how CSS @property upgrades custom variables with validation, debugging, and animation support. A must-have feature for cleaner, more powerful CSS.
- [Native CSS Nesting vs Preprocessors, no more excuses](https://theosoti.com/short/native-css-nesting/): CSS nesting is now natively supported with 91% browser coverage. Learn why you may not need Sass preprocessors anymore and how to switch smoothly.
- [Dynamic Layouts with CSS :has() without JavaScript](https://theosoti.com/short/switching-layout-in-css/): Learn how to build interactive layouts using CSS :has() and :checked. Create dynamic grids, galleries, and dashboards without JavaScript.
- [CSS @scope: Encapsulated Styles Without CSS-in-JS](https://theosoti.com/short/scope-property/): Discover how CSS @scope lets you limit style leakage, write cleaner HTML, and gain true encapsulation—no BEM, utility classes, or CSS-in-JS needed.
- [HTML inert: Disable Interactions and Improve Accessibility](https://theosoti.com/short/html-inert-attribute/): Learn how the HTML inert attribute blocks interactions, hides content from screen readers, and improves accessibility for modals and pop-ups.
- [Custom List Bullets in CSS with @counter-style](https://theosoti.com/short/customise-each-li-bullets/): Discover how to customize each list bullet in CSS using @counter-style and list-style-type. Unique symbols, emojis, or characters in just a few lines.
- [CSS Light Sweep Animation for Cards without JavaScript](https://theosoti.com/short/featured-card-animation/): Learn how to create a smooth light sweep effect on cards using only CSS gradients and keyframes. Simple, reusable, and no JavaScript required.
- [CSS Safe Area Insets: Protect Content from Phone Notches](https://theosoti.com/short/safe-area-inset/): Learn how CSS safe area insets keep your UI visible on phones with notches, rounded corners, and gesture bars, with broad browser support.
- [New CSS Media Query Syntax: Easier, Cleaner, Faster](https://theosoti.com/short/new-media-queries/): CSS media queries now support range operators like ≤ and ≥. Write cleaner, more readable responsive rules with 90% browser support.
- [Create a Back to Top Button with Just HTML and CSS](https://theosoti.com/short/back-to-top/): Create a back to top button with HTML and CSS using native smooth scrolling. No JavaScript, lightweight, and accessible.
- [Style Native <select> Elements with Full CSS Control](https://theosoti.com/short/customize-selects-css/): Say goodbye to default dropdowns. Chrome now supports full CSS styling for <select> elements, no JS or libraries needed.
- [Truncate Multiline Text with Ellipsis Using Pure CSS](https://theosoti.com/short/truncate-multiline-text/): Limit text to multiple lines with ellipsis using pure CSS. Perfect for cards, previews, and tight layouts.
- [Crop and Zoom Images with CSS object-view-box](https://theosoti.com/short/shape-outside-image/): Use object-view-box in CSS to crop and zoom images precisely—no image editing, just clean, flexible layout control.
- [Wrap Text Around Images with CSS shape-outside](https://theosoti.com/short/wrap-text-around-images/): Use shape-outside in CSS to wrap text around custom image shapes—no JavaScript, just clean, creative layout control.
- [Build an Autoplay Carousel with Pure CSS](https://theosoti.com/short/autoplay-carousel/): Create a smooth, accessible autoplay carousel using only CSS—no JavaScript, no libraries, and zero layout shifts.
- [Create Accessible Popups with the Native HTML Popover API](https://theosoti.com/short/html-popover-api/): Build tooltips, modals, and popups using the HTML Popover API—no JavaScript needed, fully accessible, and widely supported.
- [Style Native Form Elements with accent-color in CSS](https://theosoti.com/short/native-input-color/): Easily customize checkboxes, radios, sliders, and more using accent-color—no wrappers, no JavaScript, fully accessible.
- [Unlock All 4 CSS Focus States and 1 Hidden Gem](https://theosoti.com/short/4-css-focus-states/): Learn the 4 focus states in CSS. :focus, :focus-visible, :focus-within, and a hidden gem—for better accessibility and smoother UX.
- [Simplify CSS Animations with Individual Transform Properties](https://theosoti.com/short/individual-transform-properties/): Use translate, rotate, and scale as separate CSS properties for cleaner, modular, and easier-to-maintain animations.
- [Build Smarter Layouts with CSS Container Queries](https://theosoti.com/short/container-queries/): Make components truly responsive with CSS container queries. Style elements based on parent size, not screen width.
- [Add Smooth Page Transitions with CSS @view-transition](https://theosoti.com/short/view-transition/): Use @view-transition to create crossfade effects between pages—no JavaScript, just clean, progressive CSS.
- [Smooth Scrolling with CSS scroll-behavior](https://theosoti.com/short/smooth-scroll/): Enhance anchor navigation with smooth scrolling and better section spacing using pure CSS—no JavaScript required.
- [Create Animated Gradient Borders with Pure CSS](https://theosoti.com/short/border-gradient/): Build clean, animated gradient borders using only CSS—no extra elements, fully responsive, and JavaScript-free.
- [Style Drop Caps in CSS with :first-letter and initial-letter](https://theosoti.com/short/customise-first-letter/): Add editorial flair to paragraphs using :first-letter and initial-letter in CSS—no extra markup, just clean, elegant styling.
- [Smarter Layouts with CSS calc-size() without JS](https://theosoti.com/short/ratings-calc-size/): Use the new calc-size() CSS function to size elements dynamically from layout and attribute values—no JS, just responsive, flexible UI.
- [Create Animated Text Gradients with Pure CSS](https://theosoti.com/short/animated-text-gradient/): Use background-clip: text and keyframes to animate gradients on text—no JavaScript needed, fully CSS-powered, and smooth across modern browsers.
- [Trim text spacing with text-box-trim and text-box-edge](https://theosoti.com/short/text-box-trim/): Use text-box-trim and text-box-edge to remove excess space around text for cleaner UI layouts—perfect for buttons, labels, and tight spacing.
- [Enhance Form UX with the Native <datalist> Element](https://theosoti.com/short/form-datalist/): Improve form usability using <datalist> for autocomplete suggestions—lightweight, accessible, flexible, and fully supported in modern browsers.
- [Unlock the Power of the Native <dialog> Element in HTML](https://theosoti.com/short/native-dialog-element/): Use the HTML <dialog> element for accessible, stylable modals with built-in focus trap, keyboard support, and native transitions—no extra JS needed.
- [Make Form Fields Auto-Resize with field-sizing: content](https://theosoti.com/short/native-field-sizing/): Let inputs and textareas resize to fit content automatically using field-sizing: content—no JavaScript needed, with growing browser support.
- [Modern CSS Color Functions You Should Be Using](https://theosoti.com/short/list-css-color-functions/): Unlock the full power of modern CSS with color functions like oklab(), color-mix(), and color-contrast() for vibrant, accessible, future-ready designs.
- [End CSS Specificity Battles with Native CSS Layers](https://theosoti.com/short/layer-property/): Control style priority and prevent overrides using CSS Layers—an organized, scalable way to manage specificity in modern stylesheets.
- [Align the Last Line of Text with This Little-Known CSS Trick](https://theosoti.com/short/align-last-line-of-text/): Use text-align-last to style only the final line of a paragraph—combine it with justified text for elegant layouts, supported by 95% of browsers.
- [Write Cleaner CSS with 4 Essential Flexbox Shorthands](https://theosoti.com/short/4-flexbox-shorthand-properties/): Simplify your Flexbox code with 4 powerful CSS shorthands. Cleaner, shorter, and perfect for reusable components and utility classes.
- [4 Reusable CSS Snippets for Faster, Cleaner Code](https://theosoti.com/short/4-css-snipets/): Discover 4 practical CSS snippets: circle shapes, text truncation, centering, and responsive grids. Reusable, efficient, and no JavaScript needed.
- [CSS-Only Countdown From 10 to 0 Without JavaScript](https://theosoti.com/short/css-countdown/): Create a pure CSS countdown from 10 to 0 using custom properties, keyframes, and pseudo-elements—no JavaScript required, with over 92% browser support.
- [Clean Up Your CSS with :is() and :where() Selectors](https://theosoti.com/short/smarter-css-with-new-selectors/): Simplify complex CSS selectors with :is() and :where() for cleaner styles and easier specificity management with broad browser support.
- [Level Up Text Styling with Advanced CSS Underlines](https://theosoti.com/short/text-decoration/): Go beyond basic underlines with powerful CSS text-decoration properties like thickness, color, style, and offset. Fully supported and highly customizable.
- [Build a CSS Counter Without JavaScript](https://theosoti.com/short/css-only-pokemon-counter/): Learn how to create a live counter using only CSS with properties like counter-reset, counter-increment, and content: counter(). No JS needed!
- [Write Cleaner CSS with Modern Properties](https://theosoti.com/short/5-modern-properties/): Discover 5 powerful CSS features that simplify your code, like inset, scale, :is(), and more. Writing less CSS has never been easier.
- [Animate in CSS without @keyframes using @starting-style](https://theosoti.com/short/animations-without-keyframes/): Discover how @starting-style enables keyframe-free CSS animations—even on DOM entry. Cleaner syntax, less JS, and smoother UI transitions.
- [Simplify layouts with CSS display: contents](https://theosoti.com/short/smarter-layouts-with-display-contents/): Use display: contents to restructure layouts without extra markup. Works with Flexbox & Grid for cleaner, more flexible designs.
- [Create an inverted hover effect with CSS :has()](https://theosoti.com/short/custom-hover-effect-with-has/): Achieve a smooth inverted hover effect using CSS :has()—no JavaScript, no hacks! Style parent elements dynamically with clean, native CSS.
- [Improve text readability with CSS text-wrap](https://theosoti.com/short/balanced-and-pretty-texts/): Say goodbye to awkward text wrapping! Use text-wrap: balance; for even lines and text-wrap: pretty; for better spacing.
- [Stylish drop caps in CSS with just two lines](https://theosoti.com/short/stylish-drop-caps/): Make your text stand out with a simple CSS trick! Use :first-letter and initial-letter to create elegant drop caps effortlessly.
- [Smooth scrolling with CSS for clean, JS-free navigation](https://theosoti.com/short/smooth-scrolling-css-only/): Enhance user experience with scroll-behavior: smooth in CSS—no JavaScript needed! Learn how to fix abrupt jumps and improve readability with scroll-margin.
- [CSS Text Gradients: Stunning Effects in 3 Lines](https://theosoti.com/short/texts-gradients/): Enhance your typography with CSS text gradients! No images, no extra elements—just pure CSS magic for bold, eye-catching UI design.
- [CSS-Powered Before/After Slider with Minimal JS](https://theosoti.com/short/comparison-slider-in-css/): Create a before/after image slider with just 1 line of JavaScript! Learn how CSS masking and grid make it efficient, simple, and widely supported.
- [CSS Anchor Positioning: Simplify Dynamic UI Layouts](https://theosoti.com/short/css-anchor-positioning/): Learn how CSS Anchor Positioning makes UI layout easier by allowing elements to be positioned dynamically—no more complex JS or layout shifts!
- [Scroll-Linked CSS Progress Bar Without JavaScript](https://theosoti.com/short/create-progress-bar-css-only/): Create a scroll-synced progress bar using pure CSS and animation-timeline—no JavaScript needed. Lightweight, and performant.
- [Create custom form validation with CSS only](https://theosoti.com/short/form-validation-css-only/): Validate forms with CSS! Use :valid and :user-invalid pseudo-classes for dynamic input styling without JavaScript. Enhance UX effortlessly.
- [CSS Gets Dynamic with the New attr() Function](https://theosoti.com/short/evolved-attr-function/): Explore the enhanced CSS attr() function in Chrome 133—now supporting all properties and data types for more dynamic, JS-free styling possibilities.
- [Create a responsive grid layout with just 1 line of CSS](https://theosoti.com/short/one-liner-responsive-layout/): Responsive layouts in one line of CSS? Discover the power of flexible, media-query-free design for seamless adaptation to any screen.
- [Select a range of elements without classes](https://theosoti.com/short/select-range-of-element/): Target a precise range of elements with :nth-child(). Learn how to combine selectors to style specific segments of a list—no extra classes needed.
- [Write smarter CSS with 2 new selectors](https://theosoti.com/short/css-new-selectors/): Writing CSS selectors can be tedious, especially when repeating long lists of elements. Thankfully, :is() and :where() make things much cleaner.
- [New Viewport Units for Improved Mobile Design](https://theosoti.com/short/css-new-viewport-unit/): Prevent 100vh layout shifts with new CSS viewport units (svh, lvh, dvh). Build smoother, more reliable mobile designs with dynamic toolbars.
- [How CSS subgrid fixes alignment issues for good](https://theosoti.com/short/css-subgrid-layout/): Master CSS Subgrid for perfect layout alignment! Build consistent pricing cards, blog listings, and dashboards with ease.
- [Great visuals with mask effects](https://theosoti.com/short/css-mask-effects/): With mask-image, you can create ink effects, smooth transitions, and elegant content reveals, without heavy graphics or extra elements.
- [New way of declaring media queries](https://theosoti.com/short/css-container-queries/): CSS container queries let elements adapt to their container, not just the viewport. Making layouts more flexible and reusable.

## Other

- [About / Author](https://theosoti.com/)
- [Newsletter](https://theosoti.com/)
- [RSS Feed](https://theosoti.com/rss.xml)
- [Sitemap](https://theosoti.com/sitemap-index.xml)
- [Full content (markdown)](https://theosoti.com/llms-full.txt)