--- title: Best CSS-Tricks posts — May 2022 | daily.dev description: The most upvoted CSS-Tricks posts from May 2022, curated by the daily.dev community. canonical: https://daily.dev/sources/css_tricks/best-of/2022/05 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/sources/css_tricks/best-of/2022/05 og:type: website og:site_name: daily.dev og:title: Best CSS-Tricks posts — May 2022 | daily.dev og:description: The most upvoted CSS-Tricks posts from May 2022, 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 2022 1. 1 [](https://daily.dev/posts/beautify-github-profile-css-tricks-fi5yegdq4 "Beautify GitHub Profile | CSS-Tricks") Article CSS-Tricks · 4y Beautify GitHub Profile | CSS-Tricks Beautify is a tool that lets you create your own custom-made badges. The tool is available for iOS, Android, Windows, Mac and Linux. The site also has a number of other tools to make it easier for you to make your own. For more information on how to use the tool, visit the website. 47 1 2. 2 [](https://daily.dev/posts/4-cool-hover-effects-that-use-css-text-shadow-css-tricks-vhmo60nov "4 Cool Hover Effects That Use CSS Text Shadow | CSS-Tricks") Article CSS-Tricks · 4y 4 Cool Hover Effects That Use CSS Text Shadow | CSS-Tricks In this article we will focus on the CSS text-shadow property to explore even more interesting hovers. You are probably wondering how adding shadow to text can possibly give us a cool effect, but here’s the catch: we’re not actually going to make any shadows for these text hover effects. 23 3. 3 [](https://daily.dev/posts/cool-css-hover-effects-that-use-background-clipping-masks-and-3d-css-tricks-3e43wbwd5 "Cool CSS Hover Effects That Use Background Clipping, Masks, and 3D | CSS-Tricks") Article CSS-Tricks · 4y Cool CSS Hover Effects That Use Background Clipping, Masks, and 3D | CSS-Tricks We’ve walked through a series of posts about interesting approaches to CSS hover effects. In this article, we will build off those two articles to create even more complex CSS hover animations. We’re talking about background clipping, CSS masks, and even getting our feet wet with 3D perspectives. 21 4. 4 [](https://daily.dev/posts/a-perfect-table-of-contents-with-html-css-css-tricks-bthvdvamp "A Perfect Table of Contents With HTML + CSS | CSS-Tricks") Article CSS-Tricks · 4y A Perfect Table of Contents With HTML + CSS | CSS-Tricks A table of contents is an important part of a print book. It represents the title of the chapter or section and links the title to the page number. The easiest way to solve this is to simply insert the word “page’s” before the number before the title. 11 5. 5 [](https://daily.dev/posts/creating-realistic-reflections-with-css-css-tricks-078jz2neu "Creating Realistic Reflections With CSS | CSS-Tricks") Article CSS-Tricks · 4y Creating Realistic Reflections With CSS | CSS-Tricks Reflections are stylized mirror images of objects. In design, reflections are not as popular as shadows, but they have their moments. Unlike years past, we can actually make reflections with CSS! Here’s what we’ll be making in this article. 10 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/2022/05#page","url":"https://daily.dev/sources/css_tricks/best-of/2022/05","name":"Best CSS-Tricks Posts — May 2022","description":"The most upvoted CSS-Tricks posts from May 2022, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/sources/css_tricks/best-of/2022/05#items","numberOfItems":5,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/beautify-github-profile-css-tricks-fi5yegdq4","name":"Beautify GitHub Profile | CSS-Tricks"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/4-cool-hover-effects-that-use-css-text-shadow-css-tricks-vhmo60nov","name":"4 Cool Hover Effects That Use CSS Text Shadow | CSS-Tricks"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/cool-css-hover-effects-that-use-background-clipping-masks-and-3d-css-tricks-3e43wbwd5","name":"Cool CSS Hover Effects That Use Background Clipping, Masks, and 3D | CSS-Tricks"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/a-perfect-table-of-contents-with-html-css-css-tricks-bthvdvamp","name":"A Perfect Table of Contents With HTML + CSS | CSS-Tricks"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/creating-realistic-reflections-with-css-css-tricks-078jz2neu","name":"Creating Realistic Reflections With CSS | CSS-Tricks"}]},{"@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 2022"}]}]} ```