--- title: Best Frontend Masters posts — December 2024 | daily.dev description: The most upvoted Frontend Masters posts from December 2024, curated by the daily.dev community. canonical: https://daily.dev/sources/frontendmasters/best-of/2024/12 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/sources/frontendmasters/best-of/2024/12 og:type: website og:site_name: daily.dev og:title: Best Frontend Masters posts — December 2024 | daily.dev og:description: The most upvoted Frontend Masters posts from December 2024, 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 Frontend Masters — December 2024 1. 1 [](https://daily.dev/posts/multi-state-buttons-frontend-masters-boost-iow3hffhl "Multi-State Buttons – Frontend Masters Boost") Article ![Avatar of frontendmasters](https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/d34dd87208f24090bfb0917307fcf89f)Frontend Masters · 2y Multi-State Buttons – Frontend Masters Boost Discover an innovative method for creating multi-state user interface controls using stacked HTML radio buttons and CSS. This technique leverages the CSS pointer-events property to cycle through different states on each click, providing a dynamic and practical UI for tasks such as tagging search results. The guide includes coding examples and key considerations for usability and accessibility. 23 2. 2 [](https://daily.dev/posts/pure-css-halftone-effect-in-3-declarations-frontend-masters-boost-vqezkx287 "Pure CSS Halftone Effect in 3 Declarations – Frontend Masters Boost") Article ![Avatar of frontendmasters](https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/d34dd87208f24090bfb0917307fcf89f)Frontend Masters · 2y Pure CSS Halftone Effect in 3 Declarations – Frontend Masters Boost Discover how to create an efficient halftone effect using pure CSS with just three declarations. This guide walks you through setting up a halftone pattern using a single
, blending multiple gradients with the multiply blend mode, and enhancing the effect using the contrast filter. Explore numerous variations of the pattern and map layers to achieve different visual results. 12 2 3. 3 [](https://daily.dev/posts/css-text-box-frontend-masters-boost-mpqidnemv "CSS text-box – Frontend Masters Boost") Article ![Avatar of frontendmasters](https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/d34dd87208f24090bfb0917307fcf89f)Frontend Masters · 2y CSS text-box – Frontend Masters Boost Safari introduces the \`text-box\` property in CSS which simplifies the alignment of text in various scenarios by allowing developers to specify which font metric the browser should use to calculate the edge of a text box. This new property promises to resolve inconsistencies such as button centering without relying on complex numerical adjustments. 11 [See all Frontend Masters archives](/sources/frontendmasters/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/frontendmasters/best-of/2024/12#page","url":"https://daily.dev/sources/frontendmasters/best-of/2024/12","name":"Best Frontend Masters Posts — December 2024","description":"The most upvoted Frontend Masters posts from December 2024, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/sources/frontendmasters/best-of/2024/12#items","numberOfItems":3,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/multi-state-buttons-frontend-masters-boost-iow3hffhl","name":"Multi-State Buttons – Frontend Masters Boost"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/pure-css-halftone-effect-in-3-declarations-frontend-masters-boost-vqezkx287","name":"Pure CSS Halftone Effect in 3 Declarations – Frontend Masters Boost"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/css-text-box-frontend-masters-boost-mpqidnemv","name":"CSS text-box – Frontend Masters Boost"}]},{"@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":"Frontend Masters","item":"https://daily.dev/sources/frontendmasters"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/sources/frontendmasters/best-of"},{"@type":"ListItem","position":5,"name":"December 2024"}]}]} ```