Creating Color Themes With Custom Properties, HSL, and a Little calc()
16.4.2020
Before the advent of CSS custom properties (we might call them “variables” in this article as that’s the spirit of them), implementing multiple color schemes on the same website usually meant writing separate stylesheets. Definitely not the most maintainable thing in the world. Nowadays, though,...
Jetpack Instant Search!
16.4.2020
Jetpack has had a search feature for a while. Flip it on, and it replaces your built-in WordPress search (which is functional, but not particularly good) with an Elasticsearch-powered solution that is faster and has better results. I’ve been using that for quite a while here on CSS-Tricks...
Collective #602
16.4.2020
Watched Box * Generative Data Visualization * Writing an Emulator in JavaScript * Stacks * Meanderer
Collective #602 was written by Pedro Botelho and published on Codrops
How to Add Native Keyword Aliases to Babel
16.4.2020
Those of you who follow this blog know that not every blog post is an endorsement of a technique but simply a tutorial how to accomplish something. Sometimes the technique described is probably not something you should do. This is one of those blog posts. The Babel parser is an essential tool...
CSS Scrollbar With Progress Meter
15.4.2020
Scrollbars are natural progress meters. How far the scrollbar is down or across is how much progress has been made scrolling through that element (often the entire page). But, they are more like progress indicators than meters, if you think of a meter as something that “fills up” as...
Create a Responsive CSS Motion Path? Sure We Can!
15.4.2020
There was a discussion recently on the Animation at Work Slack: how could you make a CSS motion path responsive? What techniques would be work? This got me thinking.
A CSS motion path allows us to animate elements along custom user-defined paths. Those paths follow the same structure as SVG paths....
How the Vue Composition API Replaces Vue Mixins
15.4.2020
Looking to share code between your Vue components? If you’re familiar with Vue 2, you’ve probably used a mixin for this purpose. But the new Composition API, which is available now as a plugin for Vue 2 and an upcoming feature of Vue 3, provides a much better solution.
In this article...
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...
Interactive WebGL Hover Effects
14.4.2020
A simple tutorial on how to achieve an interactive mouseover/hover effect on images in some easy steps.
Interactive WebGL Hover Effects was written by Yuriy Artyukh and published on Codrops
JavaScript Picture-in-Picture API
14.4.2020
As a huge fan of media on the web, I’m always excited about enhancements to how we can control our media. Maybe I get excited about simple things like the <video> tag and its associated elements and attributes because media on the web started with custom codecs, browser extensions,...
No-Class CSS Frameworks
13.4.2020
I linked up Water.css not long ago as an interesting sort of CSS framework. No classes. No <h2 class="is-title">. You just use semantic HTML and get styles. Is that going to “scale” very far? Probably not, but it sure is handy for styling things quickly, where — of course...
Styling in the Shadow DOM With CSS Shadow Parts
13.4.2020
Safari 13.1 just shipped support for CSS Shadow Parts. That means the ::part() selector is now supported in Chrome, Edge, Opera, Safari, and Firefox. We’ll see why it’s useful, but first a recap on shadow DOM encapsulation…
The benefits of shadow DOM encapsulation
I work at giffgaff where we have...