Search
8 Little Videos About the Firefox Shape Path Editor
7.3.2019
It sometimes takes a quick 35 seconds for a concept to really sink in. Mikael Ainalem delivers that here, in the case that you haven't quite grokked the concepts behind path-based CSS properties like clip-path and shape-outside.
Here are two of my favorites. The first demonstrates animating text...
CSS Triangles, Multiple Ways
5.3.2019
I like Adam Laki's Quick Tip: CSS Triangles because it covers that ubiquitous fact about front-end techniques: there are always many ways to do the same thing. In this case, drawing a triangle can be done:
with border and a collapsed element
with clip-path: polygon()
with transform: rotate()...
Social Cards as a Service
19.2.2019
I love the idea of programmatically generated images. That power is close at hand these days for us front-end developers, thanks to the concept of headless browsers. Take Puppeteer, the library for controlling headless Chrome. Generating images from URLs is their default use case:
const puppeteer...
Animate a Blob of Text with SVG and Text Clipping
6.2.2019
I came across this neat little animation in a designer newsletter — unfortunately, I lost track of the source, so please give a shout out if you recognize it! In it, a block of text appears to bleed into view with a swirl of colors, then goes out the same way it came in. It’s a slick effect and...
Slice and Dice a Disc with CSS
13.1.2019
I recently came across an interesting sliced disc design. The disc had a diagonal gradient and was split into horizontal slices, offset a bit from left to right. Naturally, I started to think what would the most efficient way of doing it with CSS be.
Sliced gradient disc.
The first thought...
An Initial Implementation of clip-path: path();
24.12.2018
One thing that has long surprised (and saddened) me is that the clip-path property, as awesome as it is, only takes a few values. The circle() and ellipse() functions are nice, but hiding overflows and rounding with border-radius generally helps there already. Perhaps the most useful value...
People Talkin’ Shapes
22.12.2018
Codrops has a very nice article on CSS Shapes from Tania Rascia. You might know shape-outside is for redefining the area by which text is floated around that element, allowing for some interesting design opportunities. But there are a couple of genuine CSS tricks in here:
Float shape-outside...
Accessible SVG Icons With Inline Sprites
7.12.2018
This is a great look at accessible SVG markup patterns by Marco Hengstenberg. Here's the ideal example:
<button type="button">
Menu
<svg class="svg-icon"
role="img"
height="10"
width="10"
viewBox="0 0 10 10"
aria-hidden="true"
focusable="false">
...
Developer Roadmaps
23.7.2018
The path to becoming a front-end developer, as looked back upon by anyone who self-identifies that way, is likely a very windy one full of thorn bushes and band websites. Still, documenting a path, even if it's straighter and far cleaner than reality, is an interesting exercise and might just...
Drawing Images with CSS Gradients
25.6.2018
What I mean by "CSS images" is images that are created using only HTML elements and CSS. They look as if they were SVGs drawn in Adobe Illustrator but they were made right in the browser. Some techniques I’ve seen used are tinkering with border radii, box shadows, and sometimes clip-path. You...
Animate Calligraphy with SVG
22.6.2018
From time to time at Stackoverflow, the question pops up whether there is an equivalent to the stroke-dashoffset technique for animating the SVG stroke that works for the fill attribute. But upon closer inspection, what the questions are really trying to ask is something like this:
I have something...