Completely master CSS Grid once and for all by playing Grid Critters: the Grid Mastery Game.

Browse a carefully crafted collection of loaders, hover effects, transitions, and other CSS effects to use in your next project. Effects are designed with an emphasis on fluidity, simplicity, and ease of use.

When observing people getting to grips with CSS Grid, I’ve noticed a few issues that catch people out more often than others, or present…

When you use text-decoration: underline; in CSS it sometimes creates a strong line that may seem darker than the actual text, for example: You don’t have full control over the underline style, but you can use, for example, border-bottom: 1px solid #C9A4F0;, to create a lighter and more appealing underline that is still clearly visible, […]

Dynamic properties provide opportunities for new creative ideas, but also the potential to add complexity to CSS. To get the most out of them, we might need a strategy for how we write and structure CSS with custom properties.

As you may know, the recent updates and additions to CSS are extremely powerful. From Flexbox to Grid, and — what we’re concerned about here — Custom

Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.

The var() CSS function can be used to insert the value of a custom property (sometimes called a "CSS variable") instead of any part of a value of another property.

Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific values to be reused throughout a document. They are set using custom property notation (e.g., --main-color: black;) and are accessed using the var() function (e.g., color: var(--main-color);).

Oh, the Many Ways to Make Triangular Breadcrumb Ribbons Let’s have a look at how we can create a row of links that sorta run into each other with a

Collection of hand-picked free HTML, CSS and JavaScript parallax effect code examples.

Collection of free HTML and CSS blob effect code examples.

Tobias Ahlin | Designer and developer

Last time, we looked at a few possible approaches for declaring and using CSS custom properties in responsive designs. In this article, we’ll take a

Tumblr and Pinterest popularized the masonry grid. It is a common layout style for variable sized images, and it’s a great way to get images to fit nicely into a...

Collection of free HTML and CSS masonry layout code examples.

From portfolios to blogs, modern card design layouts are great for any site and they're easy to create. Follow this guide to get started with Flexbox!

A tutorial to create a left-to-right masonry layout using CSS Grid Layout properties. Practical and dynamic use case involves a tiny bit of JavaScript.

A tutorial guide to show how to create CSS Flexbox-based Masonry layouts with horizontal and vertical orders of masonry items.

CSS is what gives every website its design. Websites sure aren’t very fun and friendly without it! I’ve read about somebody going a week without

There are various ways to hide content in web interfaces, but are you aware of the different effects they have on the accessibility of that content? While so...

PreludeI built the first version of Slimvoice on Angular 1 with a Node.js backend and MongoDB in 2014 (those were all the rage back then). In 2015 I decided to completely revamp the UI and redesigned and rebuilt it in React. In hindsight, all of that was crap. With the new version I wanted to prove that it ...

I’ve had people ask me if “nested grids” are essentially just like nested tables and therefore a bad thing. I explain why that is not the case.

Last year, Rachel Andrew wrote “[Take A New Look At CSS Shapes](https://www.smashingmagazine.com/2018/09/css-shapes/)” where she reintroduced readers to the basics of using CSS Shapes. In this new tutorial, Andy Clarke expands on the topic of “[Art Direction for the Web](https://www.smashingmagazine.com/printed-books/art-direction-for-the-web/)” with CSS Shapes to create exciting and inspired new design ideas.