Box shadow css material

Material Design Box Shadows for CSS Sides — A Paraphrased Title as

To achieve a sharper or customized gradient from the edge of an element to the end of a shadow, two shadows can blend together. This effect cannot be achieved with a single shadow. Alternatively, the material-components-web library can be used to generate CSS classes with SCSS for all shadows.

Box shadow based on z-index like Material Design

To achieve the appearance of a shadow on all sides without overlapping, such as between div 1 and 2, a pseudo element can be utilized.

div < position: relative; width : 200px; height: 100px; background-color: #ddd; box-shadow: 0px 3px 3px #666; text-align: center; >div:nth-child(3) < margin-top: 20px; >div:after

CSS Box-Shadow tutorial: the basics, Box shadows are a fantastic way to add depth and that little special something to your website Duration: 12:31

CSS box-shadows — how to make them look good

Missing: sides ( | Must include:

CSS Box-Shadow tutorial: the basics

Box shadows are a fantastic way to add depth and that little special something to your website Duration: 12:31

How To Design Better Box Shadows With Elementor

Missing: sides ( | Must include:

Multiple shadows in box-shadow for elevated elements in Material Design

Blending two shadows together can create a sharper or more customized gradient from the element’s edge to the end of the shadow. This effect is often difficult to achieve with a single shadow. As shown in the example below, the resulting shadows are distinct from one another.

Material Design Elevation Correct CSS

As per the elevation guidelines provided by Google on https://material.io/design/environment/elevation.html, it is recommended to keep the elevation of cards at 2dp when they are resting and 8dp when they are raised.

Referring to the website https://pixplicity.com, as per the source.

ldpi @ 1.00dp = 0.75px = 1.00sp = 0.16mm = 0.01in = 0.45pt mdpi @ 1.00dp = 1.00px = 1.00sp = 0.16mm = 0.01in = 0.45pt tvdpi @ 1.00dp = 1.33px = 1.00sp = 0.16mm = 0.01in = 0.45pt hdpi @ 1.00dp = 1.50px = 1.00sp = 0.16mm = 0.01in = 0.45pt xhdpi @ 1.00dp = 2.00px = 1.00sp = 0.16mm = 0.01in = 0.45pt xxhdpi @ 1.00dp = 3.00px = 1.00sp = 0.16mm = 0.01in = 0.45pt xxxhdpi @ 1.00dp = 4.00px = 1.00sp = 0.16mm = 0.01in = 0.45pt 

Experiment with these transformations to obtain the dimensions of the CSS box shadow.

Please be informed that the default height when at rest on desktop is set at 0dp.

The official guide for elevation can be found at https://material.io/develop/web/components/elevation/.

You can install a library of styles using the following code: npm install @material/elevation

The material-components-web library offers CSS classes generated by SCSS that can be utilized for any shadows. Check out the demo and additional resources available.

Please refer to the provided link for complete information on the variables.

$mdc-elevation-baseline-color: black; $mdc-elevation-umbra-opacity: .2; $mdc-elevation-penumbra-opacity: .14; $mdc-elevation-ambient-opacity: .12; $mdc-elevation-umbra-map: ( 0: "0px 0px 0px 0px", 1: "0px 2px 1px -1px", 2: "0px 3px 1px -2px", 3: "0px 3px 3px -2px", 4: "0px 2px 4px -1px", 5: "0px 3px 5px -1px", 6: "0px 3px 5px -1px", 7: "0px 4px 5px -2px", 8: "0px 5px 5px -3px", 9: "0px 5px 6px -3px", 10: "0px 6px 6px -3px", 11: "0px 6px 7px -4px", 12: "0px 7px 8px -4px", 13: "0px 7px 8px -4px", 14: "0px 7px 9px -4px", 15: "0px 8px 9px -5px", 16: "0px 8px 10px -5px", 17: "0px 8px 11px -5px", 18: "0px 9px 11px -5px", 19: "0px 9px 12px -6px", 20: "0px 10px 13px -6px", 21: "0px 10px 13px -6px", 22: "0px 10px 14px -6px", 23: "0px 11px 14px -7px", 24: "0px 11px 15px -7px" ); $mdc-elevation-penumbra-map: ( 0: "0px 0px 0px 0px", 1: "0px 1px 1px 0px", 2: "0px 2px 2px 0px", 3: "0px 3px 4px 0px", 4: "0px 4px 5px 0px", 5: "0px 5px 8px 0px", 6: "0px 6px 10px 0px", 7: "0px 7px 10px 1px", 8: "0px 8px 10px 1px", 9: "0px 9px 12px 1px", 10: "0px 10px 14px 1px", 11: "0px 11px 15px 1px", 12: "0px 12px 17px 2px", 13: "0px 13px 19px 2px", 14: "0px 14px 21px 2px", 15: "0px 15px 22px 2px", 16: "0px 16px 24px 2px", 17: "0px 17px 26px 2px", 18: "0px 18px 28px 2px", 19: "0px 19px 29px 2px", 20: "0px 20px 31px 3px", 21: "0px 21px 33px 3px", 22: "0px 22px 35px 3px", 23: "0px 23px 36px 3px", 24: "0px 24px 38px 3px" ); $mdc-elevation-ambient-map: ( 0: "0px 0px 0px 0px", 1: "0px 1px 3px 0px", 2: "0px 1px 5px 0px", 3: "0px 1px 8px 0px", 4: "0px 1px 10px 0px", 5: "0px 1px 14px 0px", 6: "0px 1px 18px 0px", 7: "0px 2px 16px 1px", 8: "0px 3px 14px 2px", 9: "0px 3px 16px 2px", 10: "0px 4px 18px 3px", 11: "0px 4px 20px 3px", 12: "0px 5px 22px 4px", 13: "0px 5px 24px 4px", 14: "0px 5px 26px 4px", 15: "0px 6px 28px 5px", 16: "0px 6px 30px 5px", 17: "0px 6px 32px 5px", 18: "0px 7px 34px 6px", 19: "0px 7px 36px 6px", 20: "0px 8px 38px 7px", 21: "0px 8px 40px 7px", 22: "0px 8px 42px 7px", 23: "0px 9px 44px 8px", 24: "0px 9px 46px 8px" ); 

Источник

SgLy / md-box-shadow.css

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

—shadow-transition_-_transition : box-shadow 0.28 s cubic-bezier ( 0.4 , 0 , 0.2 , 1 );;

— — shadow — none_ — _box — shadow : none ;;

—shadow-elevation-2dp_-_box-shadow : 0 2px 2px 0 rgba (0 , 0 , 0 , 0.14) ,

0 1px 5px 0 rgba (0 , 0 , 0 , 0.12) ,

0 3px 1px -2px rgba (0 , 0 , 0 , 0.2);;

—shadow-elevation-3dp_-_box-shadow : 0 3px 4px 0 rgba (0 , 0 , 0 , 0.14) ,

0 1px 8px 0 rgba (0 , 0 , 0 , 0.12) ,

0 3px 3px -2px rgba (0 , 0 , 0 , 0.4);;

—shadow-elevation-4dp_-_box-shadow : 0 4px 5px 0 rgba (0 , 0 , 0 , 0.14) ,

0 1px 10px 0 rgba (0 , 0 , 0 , 0.12) ,

0 2px 4px -1px rgba (0 , 0 , 0 , 0.4);;

—shadow-elevation-6dp_-_box-shadow : 0 6px 10px 0 rgba (0 , 0 , 0 , 0.14) ,

0 1px 18px 0 rgba (0 , 0 , 0 , 0.12) ,

0 3px 5px -1px rgba (0 , 0 , 0 , 0.4);;

—shadow-elevation-8dp_-_box-shadow : 0 8px 10px 1px rgba (0 , 0 , 0 , 0.14) ,

0 3px 14px 2px rgba (0 , 0 , 0 , 0.12) ,

0 5px 5px -3px rgba (0 , 0 , 0 , 0.4);;

—shadow-elevation-12dp_-_box-shadow : 0 12px 16px 1px rgba (0 , 0 , 0 , 0.14) ,

0 4px 22px 3px rgba (0 , 0 , 0 , 0.12) ,

0 6px 7px -4px rgba (0 , 0 , 0 , 0.4);;

—shadow-elevation-16dp_-_box-shadow : 0 16px 24px 2px rgba (0 , 0 , 0 , 0.14) ,

0 6px 30px 5px rgba (0 , 0 , 0 , 0.12) ,

0 8px 10px -5px rgba (0 , 0 , 0 , 0.4);;

Источник

Material Design 3 box-shadow CSS Values

It should be noted that in the Material Design Web Components GitHub README, “Elevation” is still labeled as Alpha, so these values could change.

Material Elevation

With Material 2, Google released an accompanying web component library for the design system. For Material 3 though, “web support is planned,” and the elevation properties could change by the time of its first stable release.

In the meantime though, the current elevation box-shadow values in px are demonstrated below, taken from the .scss file within Material Design’s repo.

/* Taken from: https://github.com/material-components/material-web/blob/123c1e01af1ef71dbd0597c1372af17aa0ad0c0e/elevation/lib/_elevation.scss */ .box-shadow-z1 < box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37); >.box-shadow-z2 < box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.3); >.box-shadow-z3 < box-shadow: 0 11px 7px 0 rgba(0, 0, 0, 0.19), 0 13px 25px 0 rgba(0, 0, 0, 0.3); >.box-shadow-z4 < box-shadow: 0 14px 12px 0 rgba(0, 0, 0, 0.17), 0 20px 40px 0 rgba(0, 0, 0, 0.3); >.box-shadow-z5

Related Posts

Источник

How to Add MUI Box Shadow Styling the Right Way

Applying CSS box-shadow is such a common style requirement that the MUI team built 25 different shadow levels into the theme. In this post we’ll explore:

• What imports are needed for box shadow
• The difference in accessing box shadow from the theme object vs the styling system.
• How to use the elevation prop (a shortcut for box shadow)
• How to apply traditional box shadow CSS.

Here are the Paper component (which uses the elevation prop) and the Stack component (which uses the system to access boxShadow via sx prop) with level 12 box shadow applied:

Box Shadow Imports in MUI

Whenever you investigate a new component or feature in MUI, it’s good to start with the imports. However, box shadow is a bit perplexing: we don’t need an import to use it in MUI v5, but the docs suggest a couple options anyway:

Here’s the listed import in a format that can be copied.

When I console-logged the shadows object, it logged an arrow function that wasn’t very useful.

All of this is not necessary because the new MUI v5 styling system gives direct access to the theme properties through the sx prop. We’ll explore the details of this in the next section, but the implication is that no imports are needed for using shadow. Take a look at my code in the next section to see a working example with no shadow import.

Accessing MUI Box Shadow from the Theme vs the System

• Directly from the theme object
• Through the system, which abstracts the access to the theme object

Here’s an example of accessing box shadow directly through the theme:

import < styled >from "@mui/material/styles"; const BoxShadowDiv = styled('div')( (< theme >) => ` margin: $; padding: $; border: 1px solid black; box-shadow: $; `, );

This method is typical of React, accessing values via a passed prop.

Here’s an example of accessing box shadow through the MUI System:

import Stack from "@mui/material/Stack"; > />

I also accessed spacing values for margin and padding. Notice how clean and abstract this method is. This is one of the advantages of using the sx prop over the styled API.

• It reduces time spent switching contexts
• It reduces effort in naming things
• It reduces the need to enforce consistency

Customizing Box Shadow in Theme

You can customize any of the default 25 box shadow values on the theme, or even add additional values. The values are found in theme.shadows , which is an array of string values reflecting CSS box-shadow values. I show how to customize the shadow array values in this post.

Elevation vs. Box Shadow in MUI

A few components in MUI so commonly use shadow that they have an elevation prop that allows even faster access to the theme. Paper is an example.

Paper Component: Applying Box Shadow Through Elevation Prop

The TypeScript typing on elevation is number , and it will accept any numeric value but will not apply box shadow if the value is not a populated index in the theme shadow array.

Caution: Paper elevation doesn’t work with ‘outlined’ variant.

Stack Component: Applying Box Shadow Through SX

I showed the Stack component with sx boxShadow in a previous section. However, it is worth noting that the boxShadow property in the sx object is far more dynamic than the elevation prop.

Notice that there are four types for boxShadow (plus undefined ). This reflects the possibility of passing theme access values to boxShadow, plus passing CSS property values which we will explore in the next section.

Box-Shadow CSS in MUI

We can add ‘raw’ CSS shadow values using sx boxShadow :

The values above correspond to the default theme.shadows[12] value.

Passing in raw values allows us to customize shadow offset-x, offset-y, blur-radius, spread-radius, and color for the component shadows.

MUI Box Shadow Color

Color is an optional parameter of the CSS box-shadow API. Here’s an example where I’ve passed a color value to box shadow in sx :

The box shadow values in the theme can be customized with color with similar syntax.

Источник

CSS Box-Shadow Material

The CSS box-shadow property is used for casting shadow around an element. Using specific offsets various depth effects can be achieved such as the famous material elements.

Top comments (0)

Read next

What Is New in NextJS 13

Fogos de Artificio

Introducing the MDN Playground, DuckDuckGo for Windows, Safari TP 173, Ember 5.0, Svelte 4, and more | Front End News #100

#LearnedToday: Roadmap.sh

More from Deepak Devanand

Once suspended, deepakdevanand will not be able to comment or publish posts until their suspension is removed.

Once unsuspended, deepakdevanand will be able to comment and publish posts again.

Once unpublished, all posts by deepakdevanand will become hidden and only accessible to themselves.

If deepakdevanand is not suspended, they can still re-publish their posts from their dashboard.

Once unpublished, this post will become invisible to the public and only accessible to Deepak Devanand.

They can still re-publish the post if they are not suspended.

Thanks for keeping DEV Community safe. Here is what you can do to flag deepakdevanand:

deepakdevanand consistently posts content that violates DEV Community’s code of conduct because it is harassing, offensive or spammy.

Unflagging deepakdevanand will restore default visibility to their posts.

DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey.

Built on Forem — the open source software that powers DEV and other inclusive communities.

Made with love and Ruby on Rails. DEV Community © 2016 — 2023.

We’re a place where coders share, stay up-to-date and grow their careers.

Источник