halftone dotted background CSS

CSS Dotted Background

This tutorial breaks down how to create a CSS dotted pattern using SVG to achieve a halftone dotted CSS background. Halftoning is a reprographic technique that simulates continuous-tone imagery through the use of a dotted grid background, varying in size or spacing to generate a gradient-like effect. We’ll create this dot background CSS effect by...

Animate SVG

Animate SVG with CSS & JS

In this short tutorial I will be showing you how to animate SVG with CSS and JS. This is a great exercise if you want to learn how CSS animations work and how to animate SVG files. We’ll animate SVG with JavaScript by directly modifying element attributes or styles (e.g., element.style.transform or setAttribute()) for dynamic,...

CSS Badge

CSS Badges

You know that I have a lot of experience with CSS, exploring all sort of topics from basic to advanced. A while back I wrote a tutorial about CSS stroke text and I thought that a similar topic would be CSS badges. Here is a quick CSS tutorial on how to create CSS badges: What...

CSS User Interface Basics

CSS User Interface Basics

Hey there, tech enthusiasts and webmasters! Have you ever marveled at the sleek, interactive user interfaces on some websites and wondered, “How do they do that?” Well, the magic often lies in the heart of CSS – the stylistic master of the web world. Creating designs that win users’ hearts is a strong side of...

Scroll to top