CSS Snippets: Infighting

Posted by .

Here are a couple of small CSS tricks I discovered while working on Indite:

fight shadows with shadows

CSS box shadows are the same shape and size (at a minimum) of the element throwing them. So, when you want to combine shadows in your UI in say, a header, you might not always get the result you expect.


http://jsfiddle.net/xrivatsan/gE5hr

In the above fiddle, the second group of elements depict the default behaviour of CSS box shadows. We want it to look like the first group.

Thanks to multiple box-shadows, all we need to do is add two more box shadows in white, and offset them negatively so that they cover the original shadow exactly.

box-shadow: 10px -50px 0 #fff,              //white
           -10px -50px 0 #fff,              //white
             0px 1px 15px rgba(0,0,0,0.3);  //black

Given the reverse order in which browsers paint CSS shadows, you’ll have to add the white shadows first.

As you can see from the third group of elements, the new shadows leak from the top, so this technique is best suited for header elements, or elements that are wrapped with overflow: hidden.

uneasy easing functions

Click anywhere on the gray area to move the queen chess piece. Notice the slightly curved path the piece takes from point A to point B. Over short distances, it seems to avoid your cursor sometimes.


http://jsfiddle.net/xrivatsan/7rUZL

The queen’s position is updated whenever you click on the gray area. The wonky path that she follows to her destination is due to two different easing functions battling it out.

transition:  top 250ms ease-in,
            left 250ms ease-in-out;

Try it out with custom cubic bezier functions and different easeing durations. You’ll see a little bit of this in indite too!

Comments are closed.