Search
Listen to your web pages
16.2.2020
A clever idea from Tom Hicks combining MutationObserver (which can "observe" changes to elements like when their attributes, text, or children change) and the Web Audio API for creating sounds. Plop this code into the console on a page where you'd like to listen to essentially any DOM change...
Creating a Details Element That Opens But Never Closes
15.2.2020
The <details> and <summary> elements in HTML are useful for making content toggles for bits of text. By default, you see the <summary> element with a toggle triangle (▶︎) next to it. Click that to expand the rest of the text inside the <details> element.
But...
Collective #589
13.2.2020
Toward Responsive Elements * The wonderful sound of an atomic commit * OpenChakra * drop.lol * GitHub CLI beta
Collective #589 was written by Pedro Botelho and published on Codrops
Toward Responsive Elements
12.2.2020
Hot news from Brian Kardell, regarding what we've been referring to as "container queries", the most hotly requested feature in CSS:
There does seem to be some general agreement on at least one part of what I am going to call instead "Responsive Design for Components" and that is that flipping...
Custom Styling Form Inputs With Modern CSS Features
7.2.2020
It’s entirely possible to build custom checkboxes, radio buttons, and toggle switches these days, while staying semantic and accessible. We don’t even need a single line of JavaScript or extra HTML elements! It’s actually gotten easier lately than it has been in the past. Let’s take a look.
Here’s...
Full-Width Elements By Using Edge-to-Edge Grid
7.2.2020
If you have a limited-width container, say a centered column of text, "breaking out" of that to make a full-width element involves trickery. Perhaps the best trick is the one with left relative positioning and a negative left viewport-based margin. While it has it's caveats (e.g. requiring hidden...
Set Type on a Circle… with offset-path
28.1.2020
Here's some legit CSS trickery from yuanchuan. There is this CSS property offset-path. Once upon a time, it was called motion-path and then it was renamed. I sort of rolled my eyes at the time, because the property is so obviously for animating things along a path. But you don't have to use it...
What’s the Difference Between Width/Height in CSS and Width/Height HTML attributes?
24.1.2020
Some HTML elements accept width and height as attributes. Some do not. For example:
<!-- valid, works, is a good idea --<img width="500" height="400" src="..." alt="..."<iframe width="600" height="400" src="..."</iframe<svg width="20" height="20"</svg<!-- not valid...
3D Folding Layout Technique for HTML Elements
14.1.2020
A tutorial on an experimental 3D layout technique for HTML elements with endless possibilities.
3D Folding Layout Technique for HTML Elements was written by Daniel Velasquez and published on Codrops
The Auto-Flowing Powers of Grid’s Dense Keyword
8.1.2020
Let's say we're working on the homepage of a news website. You're probably used to seeing some card-based content in a grid layout, right? Here's a classic example, The New York Times:
Yeah, something like that.
There are going to be some cards/elements/boxes/whatever that need to take up more...
How to Stack Elements in CSS
6.1.2020
If you want to create fantastic and unique visual experiences on the web, you will eventually need two elements to overlap or exist in the same place. You may even just need them to be positioned near or next to each other. Let's go over two different ways to accomplish this, one with the position...
A CSS Tribute to SVG
31.12.2019
This demo from Jérémie Patonnier is incredible. Make sure to look at it in Firefox because some Chrome bug apparently prevents the entire thing from working.
The big idea is that the entire demo is one <rect> element. That's it. It is duplicated with <use> elements when needed,...
css.gg
18.12.2019
I'm not sure what to call these icons from Astrit Malsija. The title is "500+ CSS Icons, Customizable, Retina Ready & API" and the URL is "css.gg" but they aren't really named anything.
Anyway, their shtick is:
The 🌎's first icon library designed by code.
The idea is that they don't...
Most Central of All Banks Releases 12 Design Elements For a Wholesale Token
13.12.2019
The Committee on Payments and Market Infrastructures (CPMI), hosted by the central bank of central banks, the BIS, has released a report which informs developers and market participants how wholesale digital tokens might look like.
Today, wholesale payments between financial institutions...
Quoting in HTML: Quotations, Citations, and Blockquotes
10.12.2019
It’s all too common to see the incorrect HTML used for quotes in markup. In this article, let’s dig into all this, looking at different situations and different HTML tags to handle those situations.
There are three major HTML elements involved...
Having a Little Fun With Custom Focus Styles
2.12.2019
Every front-end developer has dealt or will deal with this scenario: your boss, client or designer thinks the outline applied by browsers on focused elements does not match the UI, and asks you to remove it. Or you might even be looking to remove it yourself.
So you do a little research and find...
The Thought Process Behind a Flexbox Layout
27.11.2019
I just need to put two boxes side-by-side and I hear flexbox is good at stuff like that.
Just adding display: flex; to the parent element lays out the children in a row.
Well, that's cool. I guess I could have floated them, but this is easier.
They should probably take up the full space they have...
Highlights from Chrome Dev Summit 2019
22.11.2019
Ire Aderinokun has made another round-up summary of some things that piqued her attention during this year’s Chrome Dev Summit and there’s a lot of exciting news! There’s the :is selector (which Geoff wrote about a while back) as well as logical properties, updates to standard form elements,...
Techniques for a Newspaper Layout with CSS Grid and Border Lines Between Elements
20.11.2019
I recently had to craft a newspaper-like design that featured multiple row and column spans with divider lines in between them. Take a look at the mockup graphic here and see if it makes you sweat at all. If you’re like me, you have been around a while and know just how difficult this would have...
Oh Hey, Padding Percentage is Based on the Parent Element’s Width
13.11.2019
I learned something about percentage-based (%) padding today that I had totally wrong in my head! I always thought that percentage padding was based on the element itself. So if an element is 1,000 pixels wide with padding-top: 50%, that padding is 500 pixels. It's weird having top padding based...