![]() ![]() ![]() We can also flip box-shadow to the inside of the element by adding the inset value: box-shadow : inset 0 0 12px 4px rgba (0, 0, 0, 0.8 ) That's why the spread-radius has to be increased, else the "lower" layers would not be visible (except where the offset doesn't overlap). The "stacking order" is such that the first set is "on top", or visually closest to the element, and down from there. Check out the episode on buttons to see that method.Ī unique feature of box-shadow is the ability to apply multiples: box-shadow : 2px 4px 0 4px yellowgreen, 4px 8px 0 8px pink, 8px 10px 0 12px navy Unlike border, box-shadow does not alter the elements computed dimensions, meaning adding or removing it does not cause either it or elements around it to shift from reflow. I enjoy using box-shadow to provide a custom visual :focus state on buttons. If spread-radius is also supplied, that will apply scale to the shadow to extend it beyond the element's dimensions: box-shadow : 0 0 0.25em 0.25em rgba (0, 0, 0, 0.25 ) Instead, you can set the offsets to 0 for a shadow that is equal around the element, although at least blur-radius is required. In the above example, we essentially gave the shadow a "light source" that was slightly above and left of the element which "cast" the shadow slightly right and below. The shadow will also not extend beyond the offset values since the spread is intended to scale beyond the element's dimensions. It is acceptable to omit the blur-radius and spread-radius, which leads to a sharper shadow due to loss of blur. Were those new terms to you? Here's a nice overview comparing each with examples by UX Collective.īut what I usually use box-shadow for these days is just a subtle hint at elevation for things like buttons or cards: /* offset-x | offset-y | blur-radius | spread-radius | color */ box-shadow : 3px 4px 5px 0px rgba (0, 0, 0, 0.38 ) And they made a bit of a comeback over the past year for "neumorphic design". Personally, upon it reaching decent support, the thing that made box-shadow the most exciting for me was for popping models off the page in a far more native fashion □Īnd for awhile, they were mission critical for what we called "skeumorphic design". ![]() There are a few more ways to define the syntax, you can check those out on the MDN docs. Whereas the default is rounded very circularly, adding the additional radius alters the "clipping" that occurs to produce the corner, allowing the trendy "blob" shapes:Ĭheck out this border-radius playground by Jhey with a config panel and live preview to generate expanded syntax border-radius styles. There's a super uber expanded syntax which allows you to define both the horizontal and vertical radius each corner is rounded by. ![]() We can also set all four corners: /* top-left | top-right | bottom-right | bottom-left */ border-radius : 3vw 4vw 8vw 2vw Now, given the same values but a different size div those results will vary quite widely: One way to begin to take this a bit further is to use two values, where the first value sets top-left and bottom-right, and the second value sets top-right and bottom-left: border-radius : 20% 50% Or scale it back for just a slight roundedness to otherwise sharply square corners, such as for a button or card where you might use: border-radius : 8px Which for a square element will result in a circle appearance. Kids these days will never have to deal with creating a gif for each corner of a div that you want to appear rounded □ Truly, the release and eventual support of border-radius was one of the most significant milestones in CSS.įor a refresher, here's how it's often used: border-radius : 50% ![]()
0 Comments
Leave a Reply. |