shapes

Rocking California’s “I Voted” Sticker in CSS for Election Day 2018

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!

The Shapes of CSS

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 you can round that shape, and enough of it you can turn those rectangles into circles and ovals.

We also get the ::before and ::after psuedo elements in CSS, which give us the potential of two more shapes we can add to the original element. By getting clever with positioning, transforming, and many other tricks, we can make lots of shapes in CSS with only a single HTML element.

(more…)

A Redesign with CSS Shapes

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().

Eric Meyer uses it on a production page and shows how it works. Here's some code I snagged from the CSS on the site itself showing it only being applied on large screens with support:

@media only screen and (min-width: 720px) {

  @supports (shape-outside: circle()) {

    .single-page article .complex-content img.right {
      shape-outside: circle(150px at 170px 130px);
    }

  }

}

Jen Simmons has a bunch of great demos of this as well. Looks like shape-outside supports circle(), ellipse(), polygon(), and url() but not path() yet.

Breadcrumb Navigation with CSS Triangles

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 are fun for all kinds of things, like little arrow sticking out from speech bubbles, navigation pointers, and more. Often times these are just visual flourishes, undeserving of dedicated markup. Fortunately, pseduo elements are often a perfect fit. That is, using ::before, ::after, or both to create these block level elements and place the triangle. One neat use that came to mind in this vein: breadcrumb navigation.

(more…)

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag