CSS-Tricks·3yHolographic Trading Card Effect | CSS-Tricks
Simon Goellner’s collection of Holographic Trading Cards have captured our attention. Under the hood there is a suite of filter(), background-blend-mode() and clip-path() combinations that have been painstakingly tweaked to reach the desired effect.
CSS-Tricks·3yThe New CSS Media Query Range Syntax | CSS-Tricks
The Media Queries Level 4 specification has introduced a new syntax for targeting a range of viewport widths using common mathematical comparison operators. New operators compare values rather than combining them, which make more sense syntactically while writing less code. As the screen gets narrower, we start to apply styles that are conditionally applied at smaller breakpoints that are ideally suited for tablets all the way down to mobile phones. As far as the layout goes.
CSS-Tricks·4yResponsive Animations for Every Screen Size and Device | CSS-Tricks
The FLIP technique allows us to easily animate these impossible things. In HTML-land every element is neatly placed on one grid and really easy to move around responsively. The basic premise is: Grab the initial position of the elements involved in the transition. Move the elements and grab the final position.
CSS-Tricks·4yHow to Safely Share Your Email Address on a Website | CSS-Tricks
We want to make it hard for bots to get our email addresses, but as simple as possible for normal users. With these few lines of JavaScript we decode the email address and set the href attribute in the HTML link. We are using the atob method to decode a string of Base64-encoded data. An alternative is to use some basic encryption algorithm like the Caesar cipher. It is fairly straightforward to implement in JavaScript. It's more complicated for bots.
CSS-Tricks·3yIs There Too Much CSS Now? | CSS-Tricks
CSS Grid started being supported in major browsers almost five years ago. It's become fashionable to bash Safari and Apple in general, but you can’t deny how passionate someone like Jen Simmons is about listening to developers and improving the web.