--- title: Best CSS {IRL} posts — November 2023 | daily.dev description: The most upvoted CSS {IRL} posts from November 2023, curated by the daily.dev community. canonical: https://daily.dev/sources/css-irl/best-of/2023/11 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/sources/css-irl/best-of/2023/11 og:type: website og:site_name: daily.dev og:title: Best CSS {IRL} posts — November 2023 | daily.dev og:description: The most upvoted CSS {IRL} posts from November 2023, 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 {IRL} — November 2023 1. 1 [](https://daily.dev/posts/a-fun-css-text-effect-x2ow0pg9a "A Fun CSS Text Effect") Article CSS {IRL} · 3y A Fun CSS Text Effect A quick demo featuring a fun CSS text effect using background-clip and text-stroke. The text appears to be clipped out of the background, with the background position set to center. Different browsers handle the text-stroke property differently. 73 2. 2 [](https://daily.dev/posts/scroll-timeline-parallax-effect-fdm20bo98 "Scroll Timeline Parallax Effect") Article CSS {IRL} · 3y Scroll Timeline Parallax Effect Learn how to create a scroll timeline parallax effect using the \`animation-timeline\` property. Change the amount that each layer moves to create a sense of depth in the animation. Demo only works in Chromium. 25 3. 3 [](https://daily.dev/posts/stop-using-ai-generated-images-e6rw4aryr "Stop Using AI-Generated Images") Article CSS {IRL} · 3y Stop Using AI-Generated Images AI image generators are threatening illustrators' livelihoods by producing highly detailed illustrations quickly and without compensating or crediting the artists. These generators can also spread false information, create harmful content, perpetuate bias, and lack the depth of human emotion. Artists are resisting by filing lawsuits and developing tools to alter images for AI interpretation. The choice to participate in the proliferation of AI content on the web is up to us. 18 22 4. 4 [](https://daily.dev/posts/don-t-mind-the-gap-bazjgsr87 "(Don’t) Mind the Gap") Article CSS {IRL} · 3y (Don’t) Mind the Gap The 'gap' property in flexbox is a useful way to add space between items without affecting the layout. It has been supported for Grid for a long time, but is now widely supported for flexbox as well. In some cases, the feature query for 'gap' may no longer be needed. 16 5. 5 [](https://daily.dev/posts/oh-no-overflow--kbluzwvho "Oh No, Overflow!") Article CSS {IRL} · 3y Oh No, Overflow! The \`overflow\` CSS property controls what happens when content in a box is larger than the box itself. It can determine if the content should bleed out, be hidden, or be scrollable. The behavior of scroll bars with the \`scroll\` and \`auto\` values can vary between browsers. Overflow issues can be debugged using Firefox dev tools. 13 1 6. 6 [](https://daily.dev/posts/hide-and-debug-empty-elements-with-css-c3aveceec "Hide and Debug Empty Elements with CSS") Article CSS {IRL} · 3y Hide and Debug Empty Elements with CSS Use the :empty pseudo-class in CSS to hide empty elements and for debugging purposes. It can be particularly useful for hiding extra generated paragraphs and understanding grid layout placement. 10 [See all CSS {IRL} archives](/sources/css-irl/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-irl/best-of/2023/11#page","url":"https://daily.dev/sources/css-irl/best-of/2023/11","name":"Best CSS {IRL} Posts — November 2023","description":"The most upvoted CSS {IRL} posts from November 2023, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/sources/css-irl/best-of/2023/11#items","numberOfItems":6,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/a-fun-css-text-effect-x2ow0pg9a","name":"A Fun CSS Text Effect"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/scroll-timeline-parallax-effect-fdm20bo98","name":"Scroll Timeline Parallax Effect"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/stop-using-ai-generated-images-e6rw4aryr","name":"Stop Using AI-Generated Images"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/don-t-mind-the-gap-bazjgsr87","name":"(Don’t) Mind the Gap"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/oh-no-overflow--kbluzwvho","name":"Oh No, Overflow!"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/hide-and-debug-empty-elements-with-css-c3aveceec","name":"Hide and Debug Empty Elements with CSS"}]},{"@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 {IRL}","item":"https://daily.dev/sources/css-irl"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/sources/css-irl/best-of"},{"@type":"ListItem","position":5,"name":"November 2023"}]}]} ```