Search
The Amazingly Useful Tools from Yoksel
15.11.2019
I find myself web searching for some tool by Yoksel at least every month. I figured I'd list out some of my favorites here in case you aren't aware of them.
Need to duo-tone an image? SVG filters can do that. Lentie Ward wrote about it for us, and Yoksel has a tool to create the filters...
The New Features of GSAP 3
14.11.2019
Learn about all the exciting new features of GSAP 3 in this easy-to-follow overview.
The New Features of GSAP 3 was written by Christina Gorton and published on Codrops
When to Use SVG vs. When to Use Canvas
12.11.2019
SVG and canvas are both technologies that can draw stuff in web browsers, so they are worth comparing and understanding when one is more suitable than the other. Even a light understanding of them makes the choice of choosing one over the other pretty clear.
A little flat-color icon? That's...
Digging Into the Preview Loading Animation in WordPress
22.10.2019
WordPress shipped the Block Editor (aka Gutenberg) back in version 5.0 and with it came a snazzy new post preview screen that shows the WordPress logo drawing itself while the preview loads.
That's what you get when saving a post draft and clicking the "Preview" button in the editor. How'd they...
A Snippet to See all SVGs in a Sprite
8.10.2019
I think of an SVG sprite as this:
<svg display="none">
<symbol id="icon-one"> ... <symbol>
<symbol id="icon-two"> ... <symbol>
<symbol id="icon-three"> ... <symbol>
</svg>
I was long a fan of that approach for icon systems...
The Many Ways to Link Up Shapes and Images with HTML and CSS
1.10.2019
Different website designs often call for a shape other than a square or rectangle to respond to a click event. Perhaps your site has some kind of tilted or curved banner where the click area would be awkwardly large as a straight rectangle. Or you have a large uniquely shaped logo where you only...
How to Dynamically Change the Colors of Product Images using CSS Blend Mode and SVG
3.9.2019
Learn a simple technique for adding a color swap functionality to your product images by creating an SVG and applying a mix-blend-mode to the composition.
How to Dynamically Change the Colors of Product Images using CSS Blend Mode and SVG was written by Kyle Wetton and published on Codrops
Creating a Maintainable Icon System with Sass
28.8.2019
One of my favorite ways of adding icons to a site is by including them as data URL background images to pseudo-elements (e.g. ::after) in my CSS. This technique offers several advantages:
They don't require any additional HTTP requests other than the CSS file.
Using the background-size property...
Moving Text on a Curved Path
9.8.2019
There was a fun article in The New York Times the other day describing the fancy way Elizabeth Warren and her staff let people take a selfie with Warren. But... the pictures aren't actually selfies because they are taken by someone else. The article has his hilarious line of text that wiggles by...
Weekly Platform News: Preventing Image Loads with the Picture Element, the Web We Want, Svg Styles Are Not Scoped
1.8.2019
In this week's week roundup of browser news, a trick for loading images conditionally using the picture element, your chance to tell bowser vendors about the web you want, and the styles applied to inline SVG elements are, well, not scoped only to that SVG.
Let's turn to...
Making a Realistic Glass Effect with SVG
1.8.2019
I’m in love with SVG. Sure, the code can look dense and difficult at first, but you’ll see the beauty in the results when you get to know it. The bonus is that those results are in code, so it can be hooked up to a CMS. Your designers can rest easy knowing they don't have to reproduce an effect...
Zdog
24.7.2019
David DeSandro has loads of super cool JavaScript libraries he's created over the years. His latest is Zdog, a "round, flat, designer-friendly pseudo-3D engine for canvas & SVG." It's only been about a month since he dropped it (although, like any good library, it's been simmering) and it...
Animating with Clip-Path
9.7.2019
clip-path is one of those CSS properties we generally know is there but might not reach for often for whatever reason. It’s a little intimidating in the sense that it feels like math class because it requires working with geometric shapes, each with different values that draw certain shapes...
Menus with “Dynamic Hit Areas”
3.7.2019
Flyout menus! The second you need to implement a menu that uses a hover event to display more menu items, you're in tricky territory. For one, they should work with clicks and taps, too. Without that, you've broken the menu for anyone without a mouse. That doesn't mean you can't also use :hover....
Weekly Platform News: Event Timing, Google Earth for Web, undead session cookies
28.6.2019
In this week's news, Wikipedia helps identify three slow click handlers, Google Earth comes to the web, SVG properties in CSS get more support, and what to do in the event of zombie cookies.
The post Weekly Platform News: Event Timing, Google Earth for Web, undead session cookies appeared first...
Weekly Platform News: Event Timing, Google Earth for Web, undead session cookies
28.6.2019
In this week's news, Wikipedia helps identify three slow click handlers, Google Earth comes to the web, SVG properties in CSS get more support, and what to do in the event of zombie cookies.
The post Weekly Platform News: Event Timing, Google Earth for Web, undead session cookies appeared first...
Drawing Realistic Clouds with SVG and CSS
13.6.2019
Greek mythology tells the story of Zeus creating the cloud nymph, Nephele. Like other Greek myths, this tale gets pretty bizarre and X-rated. Here’s a very abridged, polite version.
Nephele, we are told, was created by Zeus in the image of his own beautiful wife. A mortal meets Nephele, falls...
Do you need an ICON ONLY button without screwing up the accessibility?
3.6.2019
The first consideration is: do you really? If you can, having text next to your icons is proven over and over again to be the most accessible and clearest UX (see Apple's latest blunder). But if you need to (and I get it, sometimes you need to), Sara Soueidan and Scott O'Hara have a pair...
Change Color of SVG on Hover
13.5.2019
There are a lot of different ways to use SVG. Depending on which way, the tactic for recoloring that SVG in different states or conditions — :hover, :active, :focus, class name change, etc. — is different.
Let's look at the ways.
Inline SVG
Inline SVG is my favorite way to use...
Oh, the Many Ways to Make Triangular Breadcrumb Ribbons!
29.4.2019
Oh, the Many Ways to Make Triangular Breadcrumb Ribbons
Let’s have a look at how we can create a row of links that sorta run into each other with a chevron-like shape and notch on each block like you might see in a hierarchical breadcrumb navigation.
You’ve probably seen this pattern a lot....