{"id":255501,"date":"2017-06-04T05:08:29","date_gmt":"2017-06-04T12:08:29","guid":{"rendered":"http:\/\/css-tricks.com\/?post_type=chapters&p=255501"},"modified":"2021-08-29T14:03:36","modified_gmt":"2021-08-29T21:03:36","slug":"abusing-box-shadow-fun-visual-effects","status":"publish","type":"chapters","link":"https:\/\/css-tricks.com\/books\/greatest-css-tricks\/abusing-box-shadow-fun-visual-effects\/","title":{"rendered":"Boxy Buttons"},"content":{"rendered":"\n

We’re going to get to these “boxy buttons,” but we’re ultimately going to use box-shadow<\/code> to make them, so let’s take a quick box-shadow<\/code> journey.<\/p>\n\n\n\n

The basic use cause for box-shadow<\/code> is giving an element the appearance of three-dimensionality by applying a shadow underneath it as if it’s been lifted off the surface.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The slight shadows applied to those white boxes are done by:<\/p>\n\n\n\n

.module {\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n}<\/code><\/pre>\n\n\n\n
Which is to say:<\/p>\n\n\n\n
  1. Make an exact copy of the shape this element (respecting the border-radius<\/code>, for instance) and put it underneath the element<\/li>
  2. Offset it by 0 horizontally and 1px (down) vertically<\/li>
  3. Blur it by 3px. There is an optional parameter after the blur called spread which allows you do expand or contract the shadow, which defaults to 0 (doing neither).<\/li>
  4. The background of it will be black with 0.2 opacity<\/li><\/ol>\n\n\n\n
    That’s so basic<\/em> though. C’mon. We can get weirder than that. Consider:<\/p>\n\n\n\n
    1. You can get extreme with those offsets.<\/li>
    2. You don’t have to blur the shadow at all.<\/li>
    3. The colors don’t have to be subtle.<\/li><\/ol>\n\n\n\n
      And most importantly:<\/p>\n\n\n\n
      1. You can apply multiple shadows<\/strong><\/li><\/ol>\n\n\n\n
        Here are three differently offset shadows<\/a> with no blur:<\/p>\n\n\n\n
        \"\"<\/figure>\n\n\n\n
        .module {\n  width: 100px;\n  height: 100px;\n  background: white;\n  box-shadow:\n    5px 5px 0 #FF9800,\n    10px 10px 0 #FFC107,\n    15px 15px 0 #607D8B;\n}<\/code><\/pre>\n\n\n\n
        We could push those offsets further<\/a>, making the “shadows” entirely separated from the element:<\/p>\n\n\n\n
        \"\"<\/figure>\n\n\n\n
        .module {\n  width: 50px;\n  height: 50px;\n  background: white;\n  box-shadow:\n    55px 55px 0 #FF9800,\n    110px 110px 0 #FFC107,\n    165px 165px 0 #607D8B;\n}<\/code><\/pre>\n\n\n\n
        So now that we know we have the ability to have unlimited shadows of any size that can be placed anywhere… we can draw pixel art! All with a single element! Here’s a burger, fries, and shake<\/a> done by Marcus Connor:<\/p>\n\n\n\n
        \"\"<\/figure>\n\n\n\n
        Steve Jobs<\/a> as done by Codrin Pavel:<\/p>\n\n\n\n
        \"\"<\/figure>\n\n\n\n
        Or how about the Mona Lisa<\/a> done with about 7,500 shadows, by Jay Salvat:<\/p>\n\n\n\n
        \"\"<\/figure>\n\n\n\n
        On a slightly<\/em> more practical level, you can layer<\/em> box-shadow<\/code> to simulate three-dimensionality and directional shadows. Boxy buttons!<\/strong><\/p>\n\n\n\n
        The trick is that we use zero-blur shadows laying them on top of each other. If we do that 1 pixel at a time and alternate sides as we do it, they way the shadows stack on top of each other gives us an opportunity to create a 3D box look. Here are the basics:<\/p>\n\n\n\n
        .boxy-button {\n  --bottom-color: #999;\n  --right-color: #ddd;\n\n  box-shadow:\n      1px 0   0 var(--right-color),\n      1px 1px 0 var(--bottom-color),\n      2px 1px 0 var(--right-color),\n      2px 2px 0 var(--bottom-color),\n      3px 2px 0 var(--right-color),\n      3px 3px 0 var(--bottom-color),\n      4px 3px 0 var(--right-color),\n      4px 4px 0 var(--bottom-color);\n}<\/code><\/pre>\n\n\n\n
        Keep going with that, and we can make a very boxy button indeed.<\/p>\n\n\n\n
        \"\"<\/figure>\n\n\n\n
        Toss some transitions on there and we can even make it feel very pressable:<\/p>\n\n\n\n