--- title: Best CSS-Tricks posts — May 2026 | daily.dev description: The most upvoted CSS-Tricks posts from May 2026, curated by the daily.dev community. canonical: https://daily.dev/sources/css_tricks/best-of/2026/05 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/sources/css_tricks/best-of/2026/05 og:type: website og:site_name: daily.dev og:title: Best CSS-Tricks posts — May 2026 | daily.dev og:description: The most upvoted CSS-Tricks posts from May 2026, curated by the daily.dev community. og:image: https://media.daily.dev/image/upload/s--VAY5ToZt--/f_auto/v1724209435/public/daily.dev%20-%20open%20graph --- # Best of CSS-Tricks — May 2026 1. 1 [](https://daily.dev/posts/fixed-height-cards-more-fragile-than-they-look-tc4t2vlfa "Fixed-Height Cards: More Fragile Than They Look") Article CSS-Tricks · 19w Fixed-Height Cards: More Fragile Than They Look Fixed-height CSS cards appear stable in design mockups but break under real-world conditions like longer translations, user font size changes, or missing images. The post walks through why fixed heights fail, how absolutely positioned elements and line clamping mask underlying fragility, and how to rebuild the component using intrinsic sizing, CSS Grid stretch alignment, and flexbox column layout. Key fixes include removing the fixed height, letting the grid handle equal heights via stretch, converting cards to flex column containers, and using fluid typography with clamp(). A stress-test mode is also demonstrated to proactively surface layout failures before shipping. 54 3 2. 2 [](https://daily.dev/posts/css-tricks-k7p0pcvjd "CSS-Tricks") Article CSS-Tricks · 17w CSS-Tricks The CSS rotateZ() function rotates an element around its z-axis (clockwise or counterclockwise) and is part of the CSS Transforms Module Level 2\. While visually equivalent to rotate(), rotateZ() is preferred in 3D transform contexts and for GPU-accelerated animations. The post covers syntax, angle unit types (deg, grad, rad, turn), practical examples including a tumbling coin animation and isometric card effect, and explains why rotateZ() avoids layout recalculation on the main thread by promoting elements to their own GPU compositing layer. 51 3 3. 3 [](https://daily.dev/posts/the-state-of-css-centering-in-2026-dcs6zfnvh "The State of CSS Centering in 2026") Article CSS-Tricks · 16w The State of CSS Centering in 2026 A comprehensive look at CSS centering in 2026, covering the full landscape of valid approaches beyond simple flexbox/grid recipes. Topics include understanding alignment theory (content vs. item, two axes), when to use flexbox vs. grid vs. absolute positioning, the new \`text-box\` property for trimming font whitespace for perfect text centering, CSS anchor positioning with \`anchor-center\`, and safe vs. unsafe alignment behavior. The author emphasizes understanding why each technique works rather than blindly copying code, and notes that while \~100 centering methods exist, fewer than 15 are truly unique and valid. 48 2 4. 4 [](https://daily.dev/posts/using-css-corner-shape-for-folded-corners-jlaiyiigh "Using CSS corner-shape For Folded Corners") Article CSS-Tricks · 18w Using CSS corner-shape For Folded Corners A step-by-step walkthrough of creating folded corner effects using the CSS \`corner-shape\` property with \`bevel\` values, CSS variables, and pseudo-elements. The technique uses \`border-top-right-radius\` with \`corner-top-right-shape: bevel\` to cut the corner, then positions a \`::before\` pseudo-element to simulate the flip side with a box-shadow. Container style queries with range syntax handle realistic crease angles based on x/y coordinate ratios. The post also compares this approach to Kitty Giraudel's \`clip-path\` method, noting that \`corner-shape\` is cleaner but currently only supported in Chrome. 29 5. 5 [](https://daily.dev/posts/revealing-text-with-css-letter-spacing-axurb0srb "Revealing Text With CSS letter-spacing") Article CSS-Tricks · 15w Revealing Text With CSS letter-spacing CSS letter-spacing can be used creatively to build text reveal animations without JavaScript. By setting a large negative letter-spacing value, characters overlap and become visually hidden; animating back to zero or positive values reveals the text. Combined with color transitions, overflow: clip, text-indent, ::first-letter, and ::first-line pseudo-elements, you can build interactive effects like checkbox-triggered text swaps and acronym expansions on hover. Code examples are provided for each technique. 31 1 [See all CSS-Tricks archives](/sources/css%5Ftricks/best-of) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@graph":[{"@type":"CollectionPage","@id":"https://daily.dev/sources/css_tricks/best-of/2026/05#page","url":"https://daily.dev/sources/css_tricks/best-of/2026/05","name":"Best CSS-Tricks Posts — May 2026","description":"The most upvoted CSS-Tricks posts from May 2026, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/sources/css_tricks/best-of/2026/05#items","numberOfItems":5,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/fixed-height-cards-more-fragile-than-they-look-tc4t2vlfa","name":"Fixed-Height Cards: More Fragile Than They Look"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/css-tricks-k7p0pcvjd","name":"CSS-Tricks"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/the-state-of-css-centering-in-2026-dcs6zfnvh","name":"The State of CSS Centering in 2026"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/using-css-corner-shape-for-folded-corners-jlaiyiigh","name":"Using CSS corner-shape For Folded Corners"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/revealing-text-with-css-letter-spacing-axurb0srb","name":"Revealing Text With CSS letter-spacing"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Sources","item":"https://daily.dev/sources"},{"@type":"ListItem","position":3,"name":"CSS-Tricks","item":"https://daily.dev/sources/css_tricks"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/sources/css_tricks/best-of"},{"@type":"ListItem","position":5,"name":"May 2026"}]}]} ```