Web DPT

Mastering SVG’s stroke-miterlimit Attribute | CSS-Tricks

So, SVG has this stroke-miterlimit presentation attribute. You’ve probably seen it when exporting an SVG from a graphic editor program, or perhaps you find out you could remove it without noticing any change to the visual appearance. After a good amount of research, one of the first things I discovered is that the attribute works …

Mastering SVG’s stroke-miterlimit Attribute | CSS-Tricks Read More »

Inline Image Previews with Sharp, BlurHash, and Lambda Functions | CSS-Tricks

Don’t you hate it when you load a website or web app, some content displays and then some images load — causing content to shift around? That’s called content reflow and can lead to an incredibly annoying user experience for visitors. I’ve previously written about solving this with React’s Suspense, which prevents the UI from loading until the images come …

Inline Image Previews with Sharp, BlurHash, and Lambda Functions | CSS-Tricks Read More »

Improving Icons for UI Elements with Typographic Alignment and Scale | CSS-Tricks

Utilizing icons in user interface elements is helpful. In addition to element labeling, icons can help reinforce a user element’s intention to users. But I have to say, I notice a bit of icon misalignment while browsing the web. Even if the icon’s alignment is correct, icons often do not respond well when typographic styles …

Improving Icons for UI Elements with Typographic Alignment and Scale | CSS-Tricks Read More »

Creating Style Variations in WordPress Block Themes | CSS-Tricks

Global styles, a feature of the block themes, is one of my favorite parts of creating block themes. The concept of global style variations in WordPress were introduced in Gutenberg 12.5 which would allow theme authors to create alternate variations of a block theme with different combinations of colors, fonts, typography, spacing, etc. Different theme.json …

Creating Style Variations in WordPress Block Themes | CSS-Tricks Read More »

4 Cool Hover Effects That Use CSS Text Shadow | CSS-Tricks

In my last article we saw how CSS background properties allow us to create cool hover effects. This time, we will focus on the CSS text-shadow property to explore even more interesting hovers. You are probably wondering how adding shadow to text can possibly give us a cool effect, but here’s the catch: we’re not …

4 Cool Hover Effects That Use CSS Text Shadow | CSS-Tricks Read More »