I first got the idea to CSS something of the kind when I saw this gradient infinity logo by Infographic Paradise: The original gradient infinity. After four hours and some twenty minutes, of which over four hours were spent on tweaking positioning, edges and highlights… I finally had the result below: My version...
Let’s say I told you we can get the results below with just one HTML element and five CSS properties for each. No SVG, no images (save for the background on the root that’s there just to make clear that our one HTML element has some transparent parts), no JavaScript. What would you think that involves?The...
When I saw Chris’ article on notched boxes, I remembered that I got a challenge a while ago to CSS a design like the one below in a cross-browser manner: What the challenge looked like. It looks pretty similar to the concept of notched boxes, except the corners are now scooped and we only have to worry about one ...
I was recently doing some client work where I used both <clipPath>s and <mask>s in SVG to hide and show content for animation. When I started this project, I thought I knew all of the reasons to use one over the other. But, as tends to happen, working closely with something reveals idiosyncrasies. In this p...
View demo Download source Today we’d like to show you how to create an intriguingly simple, yet eye-catching transition effect using CSS Masks. Together with clipping, masking is another way of defining visibility and composite with an element. In the following tutorial we’ll show you ...
View demo Download source Today we’d like to show you how to create an intriguingly simple, yet eye-catching transition effect using CSS Masks. Together with clipping, masking is another way of defining visibility and composite with an element. In the following tutorial we’ll show you ...
Recent Comments