If we use a width and height that isn’t proportional to the image’s aspect ratio, the image might either be compressed or stretched. That isn’t good, and it can be solved either with object-fit for an img element or by using background-size. In this article, Ahmad Shadeed will go through how object-fit and background-size work, when you can use them, and why, along with some practical use cases and recommendations. Let’s dive in.
Read more…
The prefers-reduced-motion media query has excellent support in all modern browsers going back a couple of years. In this article, Michelle Barker explains why there’s no reason not to use it today to make your sites more accessible.
Read more…
Writing CSS has probably never been more fun and exciting than it is today. In this post we’ll take a look at common problems and use cases we all have to face in our work and how to solve them with modern CSS. If you’re interested, we’ve also just recently covered CSS auditing tools, CSS generators, front-end boilerplates and VS code extensions — you might find them useful, too.
Read more…
Most animation libraries like GSAP and Framer Motion are built purely with JavaScript or TypeScript, unlike AnimXYZ, which is labelled “the first composable CSS animation toolkit”, built mainly with SCSS. While a simple library, it can be used to achieve a lot of awesome animation on the web in a short amount of time and little code. In this article, Ejiro Asiuwhu will show you how to use the AnimXYZ toolkit to create unique, interactive, and visually engaging animations in Vue.js and plain HTML.
Read more…
Debugging in CSS means figuring out what might be the problem when you have unexpected layout results. Today, Stephanie Eckles will look at a few categories bugs often fit into, see how you can evaluate the situation, and explore techniques that help prevent these bugs.
Read more…
One of the use cases for using CSS Grid is to display a gallery of images, but a gallery on its own may not be that exciting. In this article, Silvestar Bistrović will be looking at how to set up a gallery that is expandable as well as accessible with a few tips and tricks along the way. Let’s get started!
Read more…
Many websites have some sort of search feature because it helps users navigate through their content easily. Implementing it the right way can be tricky and might not give a good user experience. In this tutorial, Miracle Onyenma will be integrating Algolia, a popular and powerful search service for the best experience on our Nuxt site.
Read more…
The new CSS accent-color property makes it quick and easy to roll out our brand colors to certain form inputs by leveraging user agent styles. It has the potential to provide quick and easy styling for many of our form elements, especially where extensive customization isn’t needed, as well as allowing the browser to pick the best options for accessibility. In this article Michelle Barker will take a look at what it does and how to use it alongside color-scheme for simple, accessible checkboxes and radio buttons — and imagine how you might use it in the future.
Read more…
We love little useful tools and techniques to help folks get their work done better and faster. Today, we’d love to shine the spotlights on a little helper that helps spot common performance bottlenecks easily: ct.css.
Read more…
Front-end development is exciting and fast-moving. With newer CSS properties, we can brush the dust off our old techniques and give them another look. For years, pseudo-elements have faithfully helped front-end developers implement creative designs. While they still have an important place, we can now leave pseudo-elements behind in some scenarios, thanks to newer CSS properties.
Read more…
