{"id":62,"date":"2011-01-18T11:27:24","date_gmt":"2011-01-18T17:27:24","guid":{"rendered":"http:\/\/timothypoon.com\/blog\/?p=62"},"modified":"2011-01-19T09:53:11","modified_gmt":"2011-01-19T15:53:11","slug":"css3-trickery-a-lesson-in-gradients-and-masks","status":"publish","type":"post","link":"https:\/\/timothypoon.com\/blog\/2011\/01\/18\/css3-trickery-a-lesson-in-gradients-and-masks\/","title":{"rendered":"CSS3 Trickery: A Lesson in Gradients and Masks"},"content":{"rendered":"

I’m currently working on a project where one of the designs I’m to implement involves making one of these suckers:<\/p>\n

\"\"<\/a><\/p>\n

However, that’s not all. Based on where the user is amidst these four steps, it will actually end up looking something like this:<\/p>\n

\"\"<\/a><\/p>\n

Normally, I’d achieve this with CSS sprites<\/a> and be rather sad about it all since whatever I’d be doing would be either a) not semantically correct, or b) terribly convoluted. Luckily, this project is specified to only having to run on Chrome, which I finally get to use some CSS3<\/a> and not care who knows it.<\/p>\n

The First Attempt<\/h2>\n

Let’s back up a bit, though. Before the designer got his hands on this project, I was actually both designing and developing the entire shebang, so I actually had the entire thing already coded out, HTML, CSS, Javascript, PHP, and all. However, the company I work for finally got around to hiring a real designer, so out went my intuitive and standards<\/a>–compliant<\/a> touch interface and in came a guy with a graphic design degree who thought 18px was tall enough for buttons in a touch UI.<\/p>\n

Anyways, here was my original markup for these steps:<\/p>\n

1
2
3
4
5
6
<\/div><\/td>
<ul<\/span><\/a> id<\/span>=<\/span>"steps"<\/span>><\/span>
\n    <li<\/span><\/a> class<\/span>=<\/span>"done"<\/span>><\/span>1. Prescription<\/<\/span>li<\/span><\/a>><\/span>
\n    <li<\/span><\/a>><\/span>2. Lenses<\/<\/span>li<\/span><\/a>><\/span>
\n    <li<\/span><\/a>><\/span>3. Coatings<\/<\/span>li<\/span><\/a>><\/span>
\n    <li<\/span><\/a>><\/span>4. Checkout<\/<\/span>li<\/span><\/a>><\/span>
\n<\/<\/span>ul<\/span><\/a>><\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

Simple enough, right? In fact, if those black lines weren’t diagonal, this whole problem could be solved with some border-right and :last-child<\/a> action in addition to the box-shadow and border-radius<\/a> styles I already had in place. Unfortunately, they’re about 30° from being easy, so I had to think of something else.<\/p>\n

Starting out, I thought I would just apply both the gray and red gradients<\/a> directly to the <li> elements and use -webkit-transform<\/a> to rotate() a 1px wide pseudo element. Well, bad idea. That line of thinking ran me into a predicament that looked a bit like this:<\/p>\n

\"\"<\/a><\/p>\n

You’ll notice that line is aliased to an unacceptable degree, not to mention the fact that having red and gray states next to each other created competing borders that I couldn’t think of a way to elegantly mask, so I had to change up tactics.<\/p>\n

Progress!<\/h2>\n

My first step was to keep the gray gradient wholly contained to the actual <ul> element rather than each individual <li> but keep those pumping out the red gradients. This would help avoid the issue I had with my original solution where two borders at equal z-indexes were vying for dominance.<\/p>\n

Then, I inserted a pseudo element<\/a> that simply rendered a diagonal gradient that went from transparent to (almost) black to transparent with some slight fading for aesthetic appeal.<\/p>\n

1
2
3
4
5
6
7
8
9
10
<\/div><\/td>
#steps<\/span> li:<\/span>before<\/span> {<\/span>
\n    content<\/span>:<\/span>''<\/span>;<\/span>
\n    display<\/span>:<\/span>block<\/span>;<\/span>
\n    position<\/span>:<\/span>absolute<\/span>;<\/span>
\n    width<\/span>:<\/span>40px<\/span>;<\/span>
\n    height<\/span>:<\/span>54px<\/span>;<\/span>
\n    top<\/span>:<\/span>0<\/span>;<\/span>
\n    left<\/span>:<\/span>-20px<\/span>;<\/span>
\n    background<\/span>:<\/span>-webkit-gradient(<\/span>linear,<\/span> left<\/span> 14<\/span>,<\/span> right<\/span> 40<\/span>,<\/span> color-stop(<\/span>0%<\/span>,<\/span> transparent<\/span>)<\/span>,<\/span> color-stop(<\/span>48%<\/span>,<\/span> transparent<\/span>)<\/span>,<\/span> color-stop(<\/span>50%<\/span>,<\/span> #676767<\/span>)<\/span>,<\/span> color-stop(<\/span>50%<\/span>,<\/span> #676767<\/span>)<\/span>,<\/span> color-stop(<\/span>52%<\/span>,<\/span> transparent<\/span>)<\/span>,<\/span> color-stop(<\/span>100%<\/span>,<\/span> transparent<\/span>)<\/span>)<\/span>;<\/span>
\n}<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

If you can’t tell, this is the diagonal line. It’s not as straightforward or as neat as using -webkit-transform, but it renders way better on the screen.<\/p>\n

However, this still didn’t solve the issue of mixing diagonal lines with vertical gradients. No, that had to be rectified with another pseudo element.<\/p>\n

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<\/div><\/td>
#steps<\/span> li.done<\/span>:<\/span>before<\/span>,<\/span> #steps<\/span> li.done<\/span> +<\/span> li:<\/span>not<\/span>(<\/span>.done)<\/span>:<\/span>before<\/span> {<\/span>
\n    background<\/span>:<\/span>
\n    -webkit-gradient(<\/span>linear,<\/span> left<\/span> 14<\/span>,<\/span> right<\/span> 40<\/span>,<\/span> color-stop(<\/span>0%<\/span>,<\/span> transparent<\/span>)<\/span>,<\/span> color-stop(<\/span>48%<\/span>,<\/span> transparent<\/span>)<\/span>,<\/span> color-stop(<\/span>50%<\/span>,<\/span> #592327<\/span>)<\/span>,<\/span> color-stop(<\/span>50%<\/span>,<\/span> #592327<\/span>)<\/span>,<\/span> color-stop(<\/span>52%<\/span>,<\/span> transparent<\/span>)<\/span>,<\/span> color-stop(<\/span>100%<\/span>,<\/span> transparent<\/span>)<\/span>)<\/span>,<\/span>
\n    -webkit-gradient(<\/span>linear,<\/span> left<\/span> top<\/span>,<\/span> left<\/span> bottom<\/span>,<\/span> color-stop(<\/span>0%<\/span>,<\/span> #CA263D<\/span>)<\/span>,<\/span> color-stop(<\/span>100%<\/span>,<\/span> #850304<\/span>)<\/span>)<\/span>;<\/span>
\n}<\/span>
\n#steps<\/span> li.done<\/span> +<\/span> li:<\/span>not<\/span>(<\/span>.done)<\/span>:<\/span>not<\/span>(<\/span>.current)<\/span>:<\/span>after<\/span> {<\/span>
\n    content<\/span>:<\/span>''<\/span>;<\/span>
\n    display<\/span>:<\/span>block<\/span>;<\/span>
\n    position<\/span>:<\/span>absolute<\/span>;<\/span>
\n    width<\/span>:<\/span>40px<\/span>;<\/span>
\n    height<\/span>:<\/span>54px<\/span>;<\/span>
\n    top<\/span>:<\/span>0<\/span>;<\/span>
\n    left<\/span>:<\/span>-20px<\/span>;<\/span>
\n    background<\/span>:<\/span>
\n    -webkit-gradient(<\/span>linear,<\/span> left<\/span> 14<\/span>,<\/span> right<\/span> 40<\/span>,<\/span> color-stop(<\/span>0%<\/span>,<\/span> transparent<\/span>)<\/span>,<\/span> color-stop(<\/span>48%<\/span>,<\/span> transparent<\/span>)<\/span>,<\/span> color-stop(<\/span>50%<\/span>,<\/span> #592327<\/span>)<\/span>,<\/span> color-stop(<\/span>50%<\/span>,<\/span> #592327<\/span>)<\/span>,<\/span> color-stop(<\/span>52%<\/span>,<\/span> transparent<\/span>)<\/span>,<\/span> color-stop(<\/span>100%<\/span>,<\/span> transparent<\/span>)<\/span>)<\/span>,<\/span>
\n    -webkit-gradient(<\/span>linear,<\/span> left<\/span> top<\/span>,<\/span> left<\/span> bottom<\/span>,<\/span> color-stop(<\/span>0%<\/span>,<\/span> #E2E2E2<\/span>)<\/span>,<\/span> color-stop(<\/span>100%<\/span>,<\/span> #949494<\/span>)<\/span>)<\/span>;<\/span>
\n    -webkit-mask-box-image:<\/span>-webkit-gradient(<\/span>linear,<\/span> left<\/span> 14<\/span>,<\/span> right<\/span> 40<\/span>,<\/span> color-stop(<\/span>0%<\/span>,<\/span> transparent<\/span>)<\/span>,<\/span> color-stop(<\/span>51%<\/span>,<\/span> transparent<\/span>)<\/span>,<\/span> color-stop(<\/span>51%<\/span>,<\/span> #000000<\/span>)<\/span>,<\/span> color-stop(<\/span>100%<\/span>,<\/span> #000000<\/span>)<\/span>)<\/span>;<\/span>
\n}<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

While admittedly this isn’t the most beautiful piece of code I’ve ever come up with, it does work and works well. The :before changes for .done states by using two gradients for its multiple backgrounds<\/a>: one diagonal for the line and one vertically for the red background. This leaves a red unwanted triangle on neighboring red\/gray steps, so the :after element recreates the gray gradient and applies a diagonal mask<\/a> to the top left portion of it.<\/p>\n

\"\"<\/a><\/p>\n

Booya.<\/p>\n

View the demo<\/a> (requires you to be running a WebKit browser<\/a>).<\/p>\n","protected":false},"excerpt":{"rendered":"

I’m currently working on a project where one of the designs I’m to implement involves making one of these suckers: However, that’s not all. Based on where the user is amidst these four steps, it will actually end up looking something like this: Normally, I’d achieve this with CSS sprites and be rather sad about it all since whatever I’d be doing would be either a) not semantically correct, or b) terribly convoluted. Luckily, this project is specified to only having to run on Chrome, which I finally get to…read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1,4],"tags":[13,14,15],"class_list":["post-62","post","type-post","status-publish","format-standard","hentry","category-code","category-design","tag-css","tag-css3","tag-html","et-no-image","et-bg-layout-dark","et-white-bg"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p462yg-10","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/timothypoon.com\/blog\/wp-json\/wp\/v2\/posts\/62","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/timothypoon.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/timothypoon.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/timothypoon.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/timothypoon.com\/blog\/wp-json\/wp\/v2\/comments?post=62"}],"version-history":[{"count":0,"href":"https:\/\/timothypoon.com\/blog\/wp-json\/wp\/v2\/posts\/62\/revisions"}],"wp:attachment":[{"href":"https:\/\/timothypoon.com\/blog\/wp-json\/wp\/v2\/media?parent=62"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/timothypoon.com\/blog\/wp-json\/wp\/v2\/categories?post=62"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/timothypoon.com\/blog\/wp-json\/wp\/v2\/tags?post=62"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}