Styling buttons
I was working on a side project where I have a series of buttons but when I tried to style them the CSS did nothing. In doing research, I discovered several things you can do and that I wasn't doing...
Shapes in CSS: Freeing the layout
Shapes allow you to wrap text around parts of an image or a predefined shape. Using these shapes we can change the way text looks on the screen Shape without image # In its most simple way, we can...
CSS clipping and masking
Both Clipping and masking hide some parts of the elements and show other parts. But there are, of course, differences between the two. Differences in what they can do, differences in syntaxes,...
Layering and compositing content with CSS
One of the things you can do with CSS is to layer content and have the layers perform different tasks. Some of these techniques are inherited from and used together with, SVG and others are specific...
Using figures and Flex-box to align captions
As I learn how to be more flexible in working with art direction for web content, I'm documenting some of the cool things I've learned. Because I'm using flexbox, I'm relying on CSS Trick's A Complete...
Adding icons to links based on the type of resource
For a long time I've seen icons attached to links to help users figure out what type of links they are. This was particularly important in the days of plugins because users haad to have the right...
Chrome DevTools Network Tab
The idea is that using this tab we can check how our page loading and troubleshoot loading issues as they happen with a visual representation of the loading process Make sure that you are running in...
Using material design for typography work
Material Design is Google's Design System. It started as a Google-only system that you bought into the wholesale design system with little to no chance of customizing it. The new iteration of Material...
Variable Fonts from Google Fonts
Developers who, like me, like Google Fonts have been frustrated by their not having Variable Fonts available. That has changed in the last few weeks. Google has released an experimental API, available...
Understanding and Using Web Workers
Javascript does a lot of things decently enough but one of its biggest drawbacks is that it's single-threaded. All scripts that run on a page or application run in the same execution context. Web...