Tag: mask

Do you know that kind of effect where someone’s head is poking through a circle or hole? The famous Porky Pig animation where he waves goodbye while popping out of a series of red rings is the perfect example, and Kilian Valkhof actually re-created that here on CSS-Tricks a while back. I have a similar idea but tackled a different way and with a sprinkle of animation. I think it’s pretty practical and makes...

Someone recently asked me how I approach debugging inline SVGs. Because it is part of the DOM, we can inspect any inline SVG in any browser DevTools. And because of that, we have the ability to scope things out and … 6 Common SVG Fails (and How to Fix Them) originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter. ...

In a microservices architecture, an API Gateway hides your real endpoints. We will create one using Azure API Management ...

We’ve spent the last two articles in this three-part series playing with gradients to make really neat image decorations using nothing but the <img> element. In this third and final piece, we are going to explore more techniques using the … Fancy Image Decorations: Outlines and Complex Animations originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter. ...

As the title says, we are going to decorate images! There’s a bunch of other articles out there that talk about this, but what we’re covering here is quite a bit different because it’s more of a challenge. The challenge? … Fancy Image Decorations: Single Element Magic originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter. ...

A heatmap is used to create a visual depiction of a matrix. It draws a matrix on the graph, with different color hues representing different values. We can utilize the seaborn to generate heatmap plots in the seaborn module.heatmap() function. The default size of the plot may not provide a good picture of the data when depicting a huge matrix. ...

The wave is probably one of the most difficult shapes to make in CSS. We always try to approximate it with properties like border-radius and lots of magic numbers until we get something that feels kinda close. And that’s before … How to Create Wavy Shapes & Patterns in CSS originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter. ...

Creating a grid of images is easy, thanks to CSS Grid. But making the grid do fancy things after the images have been placed can be tricky to pull off. Say you want to add some fancy hover effect to … Zooming Images in a Grid Layout originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter. ...

Who’d have thought a home you would never be able to enter physically could cost more than the real home that shelters you from the elements, or a $69m art piece you can neither touch nor share. One wouldn’t be so wrong to say NFTs marked the start of the ‘future’. The post NFT bubble: The most expensive NFTs sold appeared first on Education Ecosystem Blog. ...

For this fourth and final article of our little series on single-element loaders, we are going to explore 3D patterns. When creating a 3D element, it’s hard to imagine that just one HTML element is enough to simulate something like all six faces of a cube. But  maybe we can get away … Single Element Loaders: Going 3D! originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter. ...