# 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 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 Element](https://theosoti.com/short/form-datalist/): Improve form usability using for autocomplete suggestions—lightweight, accessible, flexible, and fully supported in modern browsers. - [Unlock the Power of the Native Element in HTML](https://theosoti.com/short/native-dialog-element/): Use the HTML 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)