Search
Fluid Images in a Variable Proportion Layout
3.7.2020
Creating fluid images when they stand alone in a layout is easy enough nowadays. However, with more sophisticated interfaces we often have to place images inside responsive elements, like this card:
For now, let’s say this image is not semantic content, but only decoration. That’s...
How-to guide for creating edge-to-edge color bars that work with a grid
1.7.2020
Hard-stop gradients are one of my favorite CSS tricks. Here, Marcel Moreau combines that idea with CSS grid to solve an issue that’s otherwise a pain in the butt. Say you have like a 300px right sidebar on a desktop layout with a unique background color. Easy enough. But then say you want...
Styling Layout Wrappers In CSS
29.6.2020
Two things that strike me often about the web are how many ways there are to go about the same thing and how many considerations go into even the most seemingly simple things.
Working with wrapper elements is definitely on both those lists. Wrappers (or containers or whatever) are so common...
Grid for layout, flexbox for components
26.6.2020
When should we reach for CSS grid and when should we use flexbox? Rachel Andrew wrote about this very conundrum way back in 2016:
Flexbox is essentially for laying out items in a single dimension – in a row OR a column. Grid is for layout of items in two dimensions – rows AND columns.
Ahmad...
Collective #611
25.6.2020
The Return of the 90s Web * keen-slider * Grid Cheatsheet * RSS Box * Styling Layout Wrappers In CSS
The post Collective #611 appeared first on Codrops
A Glitchy Grid Layout Slideshow
24.6.2020
An experimental grid slideshow with a stack-like navigation and glitch effect.
The post A Glitchy Grid Layout Slideshow appeared first on Codrops
Just another +1 for subgrid
19.6.2020
I’d say 85% of my grid usage is in one of these two categories…
I just need some pretty basic (probably equal width) columns that ends up being something like like grid-template-columns: repeat(3, minmax(0, 1fr)); to be safe.
Actually doing some real layout where five minutes in...
How to Create a Motion Hover Effect for a Background Image Grid
10.6.2020
A short tutorial on how to achieve a motion hover effect on a background image grid.
The post How to Create a Motion Hover Effect for a Background Image Grid appeared first on Codrops
Cool Little CSS Grid Tricks for Your Blog
10.6.2020
I discovered CSS about a decade ago while trying to modify the look of a blog I had created. Pretty soon, I was able to code cool things with more mathematical and, therefore, easier-to-understand features like transforms. However, other areas of CSS, such as layout, have remained a constant source...
Overlapping Header with CSS Grid
1.6.2020
Snook shows off a classic design with an oversized header up top, and a content area that is “pulled up” into that header area. My mind goes to the same place:
Historically, I’ve done this with negative margins. The header has a height that adds a bunch of padding to the bottom...
Core Web Vitals
29.5.2020
Core Web Vitals is what Google is calling a a new collection of three web performance metrics:
LCP: Largest Contentful Paint
FID: First Input Delay
CLS: Cumulative Layout Shift
These are all measurable. They aren’t in Lighthouse (e.g. the Audits tab in Chrome DevTools) just yet, but sounds...
Background Patterns, Simplified by Conic Gradients
28.5.2020
For those who have missed the big news, Firefox now supports conic gradients!
Starting with Firefox 75, released on the April 7, we can go to about:config, look for the layout.css.conic-gradient.enabled flag and set its value to true (it’s false by default and all it takes to switch...
First Steps into a Possible CSS Masonry Layout
18.5.2020
It’s not at the level of demand as, say, container queries, but being able to make “masonry” layouts in CSS has been a big ask for CSS developers for a long time. Masonry being that kind of layout where unevenly-sized elements are layed out in ragged rows. Sorta like a typical...
Chromium lands Flexbox gap
9.5.2020
I mentioned this the other day via Michelle Barker’s coverage, but here I’ll link to the official announcement. The main thing is that we’ll be getting gap with flexbox, which means:
.flex-parent {
display: flex;
gap: 1rem;
}
.flex-child {
flex: 1;
}
That’s excellent...
Exciting Things on the Horizon For CSS Layout
8.5.2020
Michelle Barker notes that it’s been a heck of a week for us CSS layout nerds.
Firefox has long had the best DevTools for CSS Grid, but Chrome is about to catch up and go one bit better by visualizing grid line numbers and names.
Firefox supports gap for display: flex, which is great,...
Constrained CSS grids without `max-width`
21.4.2020
Ain’t nothing wrong with max-width, but Ethan makes a point in the last sentence:
Rather than simply defaulting to max-width as a constraint, I can use the empty space around my design, and treat it as a layout tool.
If the space “around” your grid...
Using CSS to Set Text Inside a Circle
14.4.2020
You want to set some text inside the shape of a circle with HTML and CSS? That’s crazy talk, right?
Not really! Thanks to shape-outside and some pure CSS trickery it is possible to do exactly that.
However, this can be a fiddly layout option. We have to take lots of different things into...
Performant Expandable Animations: Building Keyframes on the Fly
1.4.2020
Animations have come a long way, continuously providing developers with better tools. CSS Animations, in particular, have defined the ground floor to solve the majority of uses cases. However, there are some animations that require a little bit more work.
You probably know that animations should...
4 CSS Grid Properties (and One Value) for Most of Your Layout Needs
30.3.2020
CSS Grid provides us with a powerful layout system for websites. The CSS-Tricks guide gives you a comprehensive overview of Grid’s properties with layout examples. What we’re going to do here is a reverse approach to show you the smallest possible set of grid properties you need to know to meet...
Flexbox and absolute positioning
18.3.2020
Chen Hui Jing notes that when you absolutely position a flex item, it's no longer part of the flex layout. Except... it kinda is a little bit. If you make the child position: absolute; but don't apply any top/right/bottom/left properties, then flexbox alignment will still apply to it.
It's odd...