Web design is such a rectangle-based design medium that literally any deviation from it feels fresh. Michelle Barker gets into using math in various ways to programmatically draw lines, shapes, and animations that end up looking both beautiful and have …
Let’s say someone asks you to add a double border to some random geometric SVG shapes. For some reason, you can’t use any graphic editor — they need to be generated at runtime — so you have to solve it …
Codrops has a very nice article on CSS Shapes from Tania Rascia. You might know shape-outside is for redefining the area by which text is floated around that element, allowing for some interesting design opportunities. But there are a couple …
Oh hey, so tomorrow (tomorrow!) is Election Day here in the United States. We're not in the business of making political endorsements or anything like that at CSS-Tricks, though we do endorse that everyone exercise their right to vote.
I did exactly that two years ago and posted a CSS rendition of the "I Voted" sticker that came with my California mail-in ballot.
Fast forward to today, and I received a new sticker in the ballot sporting a fresh design.
I have a little time, so I'm going to try to re-create this sticker in CSS and walk through my thought process as I do it. Feel free to follow along if you'd like!
CSS is capable of making all sorts of shapes. Squares and rectangles are easy, as they are the natural shapes of the web. Add a width and height and you have the exact size rectangle you need. Add border-radius and …
Firefox 62 is shipping out of beta on September 5th. The big notable thing for CSS developers is that it will now support the shape-outside property with polygon(), circle(), and ellipse(), joining Chrome and Safari.…
This is a talk I’ve given at a couple of conferences recently. It’s about four different properties in CSS:
…
There are some values available in CSS that allow shapes to be drawn. For example, there is a circle() function that is a valid value for a couple of CSS properties. “Drawn” might not be the right word, though. It’s …
CSS Shapes is like the perfect example for progressive enhancement these days. Kinda like border-radius was. Older browsers have square corners! Who cares! CSS Shapes allow you to wrap text irregularly – like along the path of a circle().…
Did you know you can make triangles with pure CSS? It’s pretty easy. You just make a block level element with zero width and height, a colored border on one side, and transparent borders on the two adjacent sides. They …
