display: flow-root, a clearfix replacement
display: flow-root # The post talks about elements of a W3C candidate recommendation, CSS Display Module Level 3. It's possible but highly unlikely, that things will change before the recommendation...
Adding transparency to hex colors
One thing hidden somewhere in the CSS specifications is the fact that you can use four or eight digits to represent a hexadecimal color, three or six to represent the color and one or two to represent...
Difference between inline and inline-block
As I was working on a side project, the same one where I was using buttons I saw examples using display: inline-block used in the button styles. Why should I use inline-block instead of inline styles?...
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...