Search
CSS-Only Marquee Effect
5.4.2020
You make sure the text is more than twice the width of the screen, then use negative translate animations to do the marquee movement.
You’ll probably want to aria-hidden all but one of them if you need to duplicate the text. Or, you could use a very clever CSS trick...
CSS Viewport Units
26.3.2020
Deep dive from Ahmad. I like the coverage of vmin and vmax, which I think I don't reach for as often as I should.
I'm thinking that if you are doing something highly directional (e.g. a full bleed trick), then directly using vw is necessary. On the other hand, if you're doing a calculation where...
Auto-Archival
20.3.2020
I'm sure most of us have used the ol' Wayback Machine to access some site that's gone offline. I don't actually know how it decides what sites to archive and when, but you can tell it to save pages. There is UI for it right on its homepage.
Also, there is a little trick...
Typing...
Chameleonic Header
26.2.2020
Nice demo from Sebastiano Guerriero. When a fixed-position header moves from overlapping differently-colored backgrounds, the colors flop out to be appropriate for that background. Sebastiano's technique is very clever, involving multiple copies of the header within each section (where the copies...
In-Browser Performance Linting With Feature Policies
26.2.2020
Here’s a neat idea from Tim Kadlec. He uses the Modheader extension to toggle custom headers in his browser. It also lets him see when images are too big and need to be optimized in some way. This is a great way to catch issues like this in a local environment because browsers will throw an error...
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...
Searching the Jamstack
22.1.2020
Here's Raymon Camden on adding site search functionality to a site that is statically hosted. A classic trick! Just shoot 'em to Google and scope the results to your site:
<form action="https://www.google.com/search" method="get"<input type="search" name="q"...
A Trick That Makes Drawing SVG Lines Way Easier
14.1.2020
When drawing lines with SVG, you often have a <path> element with a stroke. You set a stroke-dasharray that is as long as the path itself, as well as a stroke-offset that extends so far that you that it's initially hidden. Then you animate the stroke-offset back to 0 so you can watch...
Dark Mode Favicons
4.12.2019
Oooo! A bonafide trick from Thomas Steiner. Chrome will soon be supporting SVG favicons (e.g. <link rel="icon" href="/icon.svg">). And you can embed CSS within an SVG with a <style> element. That CSS can use a perfers-color-sceme media query, and as a result, a favicon that supports...
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......
iOS 13 Broke the Classic Pure CSS Parallax Technique
27.11.2019
I know. You hate parallax. You know what we should hate more? When things that used to work on the web stop working without any clear warning or idea why.
Way back in 2014, Keith Clark blogged an exceptionally clever CSS trick where you essentially use a CSS transform to scale an element down...
Playing Sounds with CSS
25.11.2019
CSS is the domain of styling, layout, and presentation. It is full of colors, sizes, and animations. But did you know that it could also control when a sound plays on a web page?
This article is about a little trick to pull that off. It’s actually a strict implementation of the HTML and CSS,...
The Trick to Animating the Dot on the Letter “i”
4.11.2019
Here’s the trick: by combining the Turkish letter "ı" and the period "." we can create something that looks like the letter "i," but is made from two separate elements. This opens us up to some fun options to style or animate the dot of the letter independently from the stalk. Worried about...
Making Tables Responsive With Minimal CSS
17.10.2019
Here’s a fabulous CSS trick from Bradley Taunt in which he shows how to make tables work on mobile with just a little bit of extra code. He styles each table row into a card that looks something like this:
See the Pen
Responsive Tables #2.5: Flexbox by Bradley Taunt (@bradleytaunt)
...
IMF Has Another Trick Up Its Sleeve When Fiat Fails – Its Own Coin SDR
14.10.2019
Virtually everybody knows what a dollar is, but not as many know about the SDR. The International Monetary Fund’s (IMF) Special Drawing Rights is an international, monetary reserve system created specifically to address limitations of gold and standard fiat currencies such as the USD....
Breakout Buttons
4.10.2019
Andy covers a technique where a semantic <button> is used within a card component, but really, the whole card is clickable. The trick is to put a pseudo-element that goes beyond the button, covering the entire card. The tradeoff is that the pseudo-element sits on top of the text, so text...
Can you rotate the cursor in CSS?
28.8.2019
Kinda! There is no simple or standard way to do it, but it's possible. You can change the cursor to different built-in native versions with CSS with the cursor property, but that doesn't help much here. You can also use that property to set a static image as the cursor. But again that doesn't help...
Lazy load embedded YouTube videos
20.8.2019
This is a very clever idea via Arthur Corenzan. Rather than use the default YouTube embed, which adds a crapload of resources to a page whether the user plays the video or not, use the little tiny placeholder webpage that is just an image you can click that is linked to the YouTube embed.
It still...
Staggered CSS Transitions
14.8.2019
Let's say you wanted to move an element on :hover for a fun visual effect.
@media (hover: hover) {
.list--item {
transition: 0.1s;
transform: translateY(10px);
}
.list--item:hover,
.list--item:focus {
transform: translateY(0);
}
}
Cool cool. But what if you had several list...
Scam IRS Letters Trying to Trick Cryptocurrency Users to Pay Up
6.8.2019
Scam letters purporting to be from the United States Internal Revenue Service are trying con cryptocurrency taxpayers and others out of their funds