CSS-Tricks·5yLet’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.
CSS-Tricks·5yYou 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.
CSS-Tricks·5yNot 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.
CSS-Tricks·5yA 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.
CSS-Tricks·5yComparing 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.
CSS-Tricks·5yCSS 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.
CSS-Tricks·5yCreating 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.