It takes as much energy to wish as it does to plan. — Eleanor Roosevelt
I'm not sure what to call these icons from Astrit Malsija. The title is "500+ CSS Icons, Customizable, Retina Ready & API" and the URL is "css.gg" but they aren't really named anything.
Anyway, their shtick is:
The 🌎's first icon library designed by code.
The idea is that they don't use clip-path, they aren't icon fonts, they aren't even SVG. They are just <i> tags essentially using the shapes of CSS and pseudo elements as necessary to draw … Read article “css.gg”
You all know famous Pac-Man video game, right? The game is fun and building an animated Pac-Man character in HTML and CSS is just as fun! I’ll show you how to create one while leveraging the powers of the clip-path property.… Read article “Pac-Man… in CSS!”
Different website designs often call for a shape other than a square or rectangle to respond to a click event. Perhaps your site has some kind of tilted or curved banner where the click area would be awkwardly large as a straight rectangle. Or you have a large uniquely shaped logo where you only want that unique shape to be clickable. Or you have an interactive image that responds differently when different regions of it are clicked.
You can surround … Read article “The Many Ways to Link Up Shapes and Images with HTML and CSS”
Oh, the Many Ways to Make Triangular Breadcrumb Ribbons
Let’s have a look at how we can create a row of links that sorta run into each other with a chevron-like shape and notch on each block like you might see in a hierarchical breadcrumb navigation.
You’ve probably seen this pattern a lot. It comes up often in things like multi-step forms and site breadcrumbs. For our purposes we’re going to call these “ribbons" so we know what we’re referring … Read article “Oh, the Many Ways to Make Triangular Breadcrumb Ribbons!”
I like Adam Laki's Quick Tip: CSS Triangles because it covers that ubiquitous fact about front-end techniques: there are always many ways to do the same thing. In this case, drawing a triangle can be done:
border and a collapsed elementclip-path: polygon()transform: rotate() and overflow: hiddenI'd say that the way I've typically done triangles the most over the years is with the border trick, but I think my favorite … Read article “CSS Triangles, Multiple Ways”
This is pretty wild: Adrian Roselli has made a series of rather complex Venn diagrams using nothing but CSS. With a combination of the Firefox dev inspector, plus a mixture of CSS Grid and the shape-outside property, it’s possible to do this and without a ton of hacks, too.
I also think it’s super cute that Adrian has made the code snippets in this post look like the display from an old monitor, like the one Chris recently broke down.… Read article “A CSS Venn Diagram”