CSS has a lot of pretty rad and powerful features for managing image rendering these days. Let’s leverage some of these, like aspect-ratio, object-fit, and object-position for when we need to use a single image in many different contexts.

A collection of popular layouts and patterns made with CSS

When an element with a position: sticky style is wrapped, and it is the only element inside the wrapper element, this element, which was defined position: sticky will not stick.

When we truly learn the secrets of the Flexbox layout mode, we can build absolutely incredible things. Fluid layouts that stretch and shrink without arbitrary breakpoints. In this action-packed interactive tutorial, we'll pop the hood on the Flexbox algorithm and learn how to do remarkable things with it. ✨

CSS code generator that will help with colors, gradients and shadows to adapt this new design trend or discover its posibilities.

built with 🌮 by sarah_edo

You can set the numbers, and units of your columns and rows, and I'll generate a CSS grid for you! Drag within the boxes to create divs placed within the grid.

Though this project can get a basic layout started for you, this project is not a comprehensive tour of CSS Grid capabilities. It is a way for you to use CSS Grid features quickly.

Illustrated tips for making your UI and web designs more visually interesting · Backgrounds · Borders & dividers · Shadows · Text · Other techniques

I came across this article by Miguel Nunez about making a flexbox based gallery that’s well thought out and well written, but has one major flaw. The markup reeks of still thinking in the “table…

A zero-config, drop-in animation utility that automatically adds smooth transitions to your web app. Use it with React, Vue, Svelte, or any other JavaScript application.

Imagine you need to create a two-column layout. Yes, the simplest one: a column on the left, a column on the right, and some gap in-between. There’s an obvious modern solution for that:

.columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

A lot of things that required hacks, workaround and custom code are now supported natively in all major browsers. We take a look at them. Now that the security and support lifecycle for Internet…

A collection of 24 x 24 dp SVG spinners! (CSS & SMIL) - GitHub - n3r4zzurr0/svg-spinners: A collection of 24 x 24 dp SVG spinners! (CSS & SMIL)

A look at some useful and creative ways to style a list.

Custom markers with ::before #
Styling the ::before pseudo-element was a common way to create custom list markers before ::marker came along. But even now, it can allow us more flexibility, when we need it, for visually complex list styling.

Like ::marker, we can add our own custom bullet styles using the content attribute. Unlike using ::marker, we need to do some manual positioning, as we don't get the automatic benefits offered by list-style-position. But we can position it relatively easily with flexbox, and it does open up a greater number of possibilities for alignment. For instance, we could alternate the position of the marker:

The accent-color CSS property sets the accent color for user-interface controls generated by some elements.

Free loaders & spinners for your next project. Built with HTML, CSS and a soupçon of SVG. Available for copypasta or as a tree-shakeable React component library.

Simple CSS Spinners

2nd selection

See issues for defaults to work in IE11

aspect-ratio is a great example of a humble property that fills a long-awaited need in the CSS community. It’s simple to use and behaves in a way that respects content, without the need for any extra CSS.

Minify JS and CSS online, or include the minifier in your project for on-the-fly compression.

https://medium.com/ux-seo-sem-and-webdev-bitesized/top-7-css-minifiers-comparison-f90e28ea0e20

Normalize.css is a library that helps you build all elements more consistently when displayed in today’s popular browsers. I hope that the article will provide you with useful CSS libraries for web…

https://philipwalton.github.io/solved-by-flexbox/
https://tobiasahlin.com/spinkit/
https://connoratherton.com/loaders
https://github.com/AllThingsSmitty/css-protips
https://csslayout.io/close-button/
https://bansal.io/pattern-css
https://github.com/codrops/PageTransitions
https://lokesh-coder.github.io/pretty-checkbox/#basic-checkbox

Stephanie Eckles