In CSS, we have the value auto which could be used for properties like margin, positioning, height, width, and a lot more. I felt that I need a place to docu...
CSS has a special calc() function for doing basic math. Here's an example: .main-content { /* Subtract 80px from 100vh */ height: calc(100vh - 80px); } In
Responsive Grid Magazine Layout in Just 20 Lines of CSS | CSS-Tricks
I was recently working on a modern take of the blogroll. The idea was to offer readers a selection of latest posts from those blogs in a magazine-style
Whether you call them cards, block links, or some other thing, the construct of making an area of content clickable (tappable, Enter-key-able, voice-activatable, etc.) is not new. While hit area size is mostly a usability issue, marketers often want a larger click area around their calls to action (CTAs) to…
CSS Tutorial: Create Diagonal Layouts Like It's 2020
Layouts with diagonal sections are quite popular for several years now. You will probably not find it in the articles titled "Design trends for 2020". But I think it is here to stay. It is one tool designers can use to bring some dynamic to all the rectangular boxes with boring 90-degree angles.
Magic Flip Cards: Solving A Common Sizing Problem — Smashing Magazine
In this article, Dan Halliday reviews the standard approach to creating animated flip cards, and introduces an improved method which solves its sizing problem.
There are some new features in CSS that can assist us with building layouts for different directions and languages with ease. This article is about CSS
In a new series, Rachel Andrew breaks down the CSS Grid Layout specification. This time, we take a detailed look at what happens when you create a grid container and the various properties that can be applied to the container to shape your grid.
New Year, New Job? Let's Make a Grid-Powered Resume! | CSS-Tricks
Many popular resume designs are making the most of the available page space by laying sections out in a grid shape. Let’s use CSS Grid to create a layout
Andy Clarke digs deep into snow to find ways flat design can be brought back to life in CSS with the use of techniques to create a sense of depth. Like spring after an everlasting winter, perhaps it’s time to let a different style of design flourish. What a relief.
Some CSS Grid Strategies for Matching Design Mockups
The world of web development has always had a gap between the design-to-development handoff. Ambitious designers want the final result of their effort to
We recently published a tutorial explaining how to build a JavaScript-driven Gantt Chart. I think it’s the perfect case study for CSS Grid, so in this tutorial we’ll see how well suited CSS Grid...
My most popular open source project is Smooth Scroll, a script that lets you animate scrolling with anchor links. Today, I want to show you how to achieve the same effect with only CSS. I’ll also talk about when and why you might want to use a JavaScript version anyways. Scroll Behavior The scroll-behavior CSS property tells the browser how to handle scrolling triggered by anchor links and such.
Using the Grid Shepherd Technique to Order Data with CSS
Shepherds are good at tending to their sheep, bringing order and structure to their herds. Even if there are hundreds of those wooly animals, a shepherd
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.