Styling on the web has been moving fast, bringing rich features for container-based styles and layouts, managing color contrast, leveraging device vibrant colors, gradients, and new color spaces for mixing, orchestrating stylesheets, subgrid, inert, :has() selector, and much more. With each browser working in unison to improve stability while also delivering fan favorite features, 2022 is shaping up to be a huge year for styling.
Native apps often feature transitions between states that both look great and help communicate the type of navigation to the user. The bad news: creating transitions between pages on the web is impossible. In-page transitions are possible, but complex. The good news: new APIs are coming to simplify this process, building on top of CSS animations and the web animation API, and it works across navigations!
Multi-colored fonts, sometimes called chromatic type, are still relatively rare on the web, even though the COLR font format has had full cross-browser support since 2018 (even in Internet Explorer!).
Smart SVG techniques, from generative SVG grids to SVG paths with masks, grainy SVG gradients, cut-out effects and fractional SVG stars. Let’s look at some magical SVG techniques that you can use right away.
This time, 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.
Thanks to Cloud Four for sponsoring this week’s newsletter! If you’d like to help with the costs of running Friday Front-End, you can back our Patreon for as little as a dollar a month.
Tweet
Share