Search

Nalezeno "items": 179

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...

An Infinitely Scrollable Vertical Menu

23.5.2020
A quick look at how an infinitely scrollable menu works based on a looping scroll illusion of cloned items. An Infinitely Scrollable Vertical Menu was written by Mary Lou and published on Codrops

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...

List Style Recipes

5.5.2020
Lists are a fundamental part of HTML! They are useful in things like blog posts for listing out steps, recipes for listing ingredients, or items in a navigation menu. Not only are they an opportunity for styling, but they have accessibility implications. For example, the number of items in a list...

My Visual Studio Code Setup: Extensions and Themes

22.4.2020
Matthias Ott’s posted his VS Code setup. I find lists like this (I rounded up some recent updates of my own) irresistible, probably because, like y’all, I spend an awful lot of time in VS Code and wanna make sure I’m getting the most out of it. Things from the list that stood...

Thinking in Behaviors, Not Screen Sizes

11.4.2020
Chase McCoy wrote a nifty post about the “gap problem” when making a grid of items. His argument might be summarized like this: how should we space elements with margins in CSS? He notes that the gap property isn’t quite ready for prime time when it comes to using it with flexbox, like this: .grid...

How to Re-Create a Nifty Netflix Animation in CSS

7.4.2020
The design for Netflix’s browse page has remained pretty similar for a few years now. One mainstay component is the preview slider that allows users to scroll through content and hover on items to see a preview. One unique characteristic of the UI is its hover behavior. When a show preview...

Web Performance Checklist

2.4.2020
The other day, I realized that web performance is an enormous topic covering so very much — from minimizing assets to using certain file formats, it can be an awful lot to keep in mind while building a website. It’s certainly far too much for me to remember! So I made a web performance checklist....

How to use CSS Scroll Snap

27.3.2020
Nada Rifki demonstrates the scroll-snap-type and scroll-snap-alignCSS properties. I like that the demo shows that the items in the scrolling container can be different sizes. It is the edges of those children that matter, not some fixed snapping distance. I like Max Kohler's coverage...

Animate Text on Scroll

13.1.2020
We covered the idea of animating curved text not long ago when a fun New York Times article came out. All I did was peek into how they did it and extract the relevant parts to a more isolated demo. That demo is here: See the Pen Selfie Crawl by Chris Coyier (@chriscoyier) ...

CSS-Only Carousel

10.1.2020
It's kind of amazing how far HTML and CSS will take you when building a carousel/slideshow. Setting some boxes in a horizontal row with flexbox is easy. Showing only one box at a time with overflow and making it swipable with -webkit-overflow-scrolling is easy. You can make the "slides" line...

How Auto Margins Work in Flexbox

6.1.2020
Robin has covered this before, but I've heard some confusion about it in the past few weeks and saw another person take a stab at explaining it, and I wanted to join the party. Say you have a flex container with some flex items inside that don't fill the whole area. See the Pen ZEYLVEX...

Make a smooth shadow, friend.

19.12.2019
One box-shadow is cool and all, but check out Philipp Brumm's tool for building out comma-separated multiple box-shadows, which result in a much smoother and more natural look. This reminds me very much of the idea for easing linear-gradient. In a gradient, this smoothing effect is handled...

Masking GIFs with other GIFs

3.12.2019
The other day, Cassie Evans tweeted a really neat trick that I’ve never seen before: using SVG to mask one GIF on top of another. The effect is quite lovely, especially if you happen to grab a colorful GIF and place it on top of a monochrome one:  See the Pen Masking gifs with other gifs......

Nahoru
Tento web používá k poskytování služeb a analýze návštěvnosti soubory cookie. Používáním tohoto webu s tímto souhlasíte. Další informace