… I knew I wanted to separate entries with decorations of some sort, as a way of breaking up the stream of text. Fortunately, Hamonshū provided ample material. A little work in Acorn and I had five candidate illustrations ready to go.
Eric Meyer
Pseudo-Randomly Adding Illustrations with CSS
Such an elegant way to add personality to text-heavy websites!
Demonstration of CSS-only grid with scrolling body and frozen header. It uses grid role for testing/demonstration purposes, despite currently having no interaction.
Two implementation details are worth noting: Edge does not support ARIA grid/table rows on semantic table elements, so all elements in this example are divs. Second, role="rowgroup" is not supported, so it has not been used.
See the Pen Scrolling grid by Sarah Higley (@smhigley) on CodePen.
No images here. Just pure CSS.
See the Pen Pure CSS Still Life – Water and Lemons by Ben Evans (@ivorjetski) on CodePen.
CSS Grid has been ready to use in production for quite a while now, and Rachel Andrews has a list of websites that do just that here.
If you have a website that uses CSS Grid you can add it to this list too.
These interactive examples will show you practical ways to use flexbox for building UI components. They start out simple and get more complex near the end. But before you use these patterns in your own code, heed the warning from the author, CJ Cenizal:
I don’t recommend copy-pasting these examples directly into production code. I’m only trying to demonstrate different ways of using flexbox through these examples, so they may not incorporate some accessibility best practices (such as using semantic HTML5 elements and the role attribute). Before using this code in production you should make sure it meets your accessibility needs.
This site developed and maintained by Rachel Andrew offers an extensive collection of examples, video and other resources to help you learn CSS Grid Layout.
A great list of box shadow code snippets with demos and explanation for each technique:
1. Fixed Top Toolbar
2. Sub-Navigation Dropdown
3. Glossy Shadow Button
4. Notifications Flyout Menu
5. Apple Page Wrapper
6. Apple Content Box
7. Featured Links
8. Framed Images
9. Glowing Input Fields
10. Elastic Shadow Buttons
Normalize.css is a small CSS file created by Nicolas Gallagher and Jon Neal. It provides better cross-browser consistency in the default styling of HTML elements, preserves useful browser defaults rather than erasing them, corrects bugs and common browser inconsistencies. It’s a modern, HTML5-ready, alternative to the traditional CSS reset.
Ultimate CSS Gradient Generator – beautifully reminiscent of Photoshop tool and cross-browse compatible gradient editor from ColorZilla.
RoundedCornr generates image files and the necessary HTML and CSS code for a box with rounded corners filled with a gradient or a flat color.