--- title: Best CSS-Tricks posts — April 2021 | daily.dev description: The most upvoted CSS-Tricks posts from April 2021, curated by the daily.dev community. canonical: https://daily.dev/sources/css_tricks/best-of/2021/04 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/sources/css_tricks/best-of/2021/04 og:type: website og:site_name: daily.dev og:title: Best CSS-Tricks posts — April 2021 | daily.dev og:description: The most upvoted CSS-Tricks posts from April 2021, 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 — April 2021 1. 1 [](https://daily.dev/posts/let-s-create-an-image-pop-out-effect-with-svg-clip-path-avixf-xqz "Let’s Create an Image Pop-Out Effect With SVG Clip Path") Article CSS-Tricks · 5y Let’s Create an Image Pop-Out Effect With SVG Clip Path A cool pop-out effect by Mikael Ainalem showcases the clip-path: path() in CSS. The effect looks cool, but there are some issues with the path value. We’re going to re-create this effect using standard, widely-supported CSS techniques so that it not only works, but is truly responsive. 48 5 2. 2 [](https://daily.dev/posts/you-can-label-a-javascript-if-statement-drxmi4ysr "You Can Label a JavaScript `if` Statement") Article CSS-Tricks · 5y You Can Label a JavaScript \`if\` Statement A label is a way to name a statement or a block of code. To apply a label to a statement, start the statement with label: and whatever you put as “label” will be the label you can reference later. Using a label with break can stop a deeply nested loop or conditional and make it stop immediately. 26 3 3. 3 [](https://daily.dev/posts/not-your-typical-horizontal-rules-ivoelw9mi "Not Your Typical Horizontal Rules") Article CSS-Tricks · 5y Not Your Typical Horizontal Rules Horizontal rules are used to provide a visual break and divide content. Like other HTML elements, horizontal rules can be styled using CSS (and SVG) This means that they don’t have to look like boring, plain horizontal lines. You can get a little creative with them, adding a nice little personal touch. 25 4 4. 4 [](https://daily.dev/posts/a-complete-guide-to-custom-properties-mp-tvrjmw "A Complete Guide to Custom Properties") Article CSS-Tricks · 5y A Complete Guide to Custom Properties Custom properties can be hex values, color functions, units, strings of text and more. Custom properties can make code easier to maintain because you can update one value and have it reflected in multiple places. You can set the value of a custom property with another custom property. There is a big gotcha with custom properties that use other custom properties. 21 5. 5 [](https://daily.dev/posts/comparing-the-new-generation-of-build-tools-jvi2wlayz "Comparing the New Generation of Build Tools") Article CSS-Tricks · 5y Comparing the New Generation of Build Tools A bunch of new developer tools have landed in the past year. They are biting at the heels of the tools that have dominated front-end development over the last few years. Despite their differences, these tools do share a common goal: improve the developer experience. We’ll evaluate each one, outlining what they do, why we need them and their use cases. 18 1 6. 6 [](https://daily.dev/posts/css-is-a-strongly-typed-language-vt3mrfz3v "CSS is a Strongly Typed Language") Article CSS-Tricks · 5y CSS is a Strongly Typed Language A programming language can be classified by how strongly or weakly typed it is. A strongly-typed programming language isn’t necessarily better than a weakly-typing one. There is no formal definition of what constitutes strong or weak typing. This means that perceptions of what is considered a strong orweak typing language differ from person to person and may change over time. 14 1 7. 7 [](https://daily.dev/posts/creating-a-smart-navbar-with-vanilla-javascript-jbdy-ekvn "Creating a Smart Navbar With Vanilla JavaScript") Article CSS-Tricks · 5y Creating a Smart Navbar With Vanilla JavaScript Smart navigation is a popular design choice because it gives users persistent access to navigate the site. It’s all the convenience of sticky positioning, with an added fullscreen benefit. This sort of smart navigation is already commonly (think of the URL bar in many mobile browsers), but is sometimes a hassle to implement without a library or plugin. 14 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/2021/04#page","url":"https://daily.dev/sources/css_tricks/best-of/2021/04","name":"Best CSS-Tricks Posts — April 2021","description":"The most upvoted CSS-Tricks posts from April 2021, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/sources/css_tricks/best-of/2021/04#items","numberOfItems":7,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/let-s-create-an-image-pop-out-effect-with-svg-clip-path-avixf-xqz","name":"Let’s Create an Image Pop-Out Effect With SVG Clip Path"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/you-can-label-a-javascript-if-statement-drxmi4ysr","name":"You Can Label a JavaScript `if` Statement"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/not-your-typical-horizontal-rules-ivoelw9mi","name":"Not Your Typical Horizontal Rules"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/a-complete-guide-to-custom-properties-mp-tvrjmw","name":"A Complete Guide to Custom Properties"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/comparing-the-new-generation-of-build-tools-jvi2wlayz","name":"Comparing the New Generation of Build Tools"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/css-is-a-strongly-typed-language-vt3mrfz3v","name":"CSS is a Strongly Typed Language"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/creating-a-smart-navbar-with-vanilla-javascript-jbdy-ekvn","name":"Creating a Smart Navbar With Vanilla JavaScript"}]},{"@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":"April 2021"}]}]} ```