1

OK, so the "Card" in Material Design cast a shadow because of 2 lights, because well... if something has a shadow it's because that thing is blocking the light.

Does the Floating Action Button (FAB) have the same light effects as the "Card"? - That's the main question.

By this I mean:

  • A shadow underneath

  • An inner "light" on top edge (tinted edge)

  • An under "dark" shadow on bottom edge (shaded edge)

PD: this is for a web app; I'm not using Android Studio.

Below you can find the link to this subject:

https://material.google.com/what-is-material/environment.html#environment-3d-world

And below this line is the link to the FAB component where they didn't explain anything about light on the FAB:

https://material.google.com/components/buttons-floating-action-button.html

  • Hi Cristobal Lemoine, I am a little confused by your question. Are you asking what value the shadow for the "Floating Action Button" should be or simply asking does it have one? If you're asking if it has one, then yes, the "Floating Action Button" has a shadow. – AndrewH Jun 30 '16 at 19:53
  • And are you asking for coding purposes or design work? If coding, the library you use already specifies the value for that button. – AndrewH Jun 30 '16 at 20:09
  • From my uses with Material Design, it is said that the FAB is located on the top most layer, but still has a similar shadow to the previous layers. I have always used this in web productions and it seems to work pretty well. .fab{ box-shadow: 0 1px 1.5px 0 rgba(0,0,0,.12),0 1px 1px 0 rgba(0,0,0,.24); }; – knocked loose Jun 30 '16 at 20:16
  • @AndrewH im asking if the FAB actually has a light like the "Card"( is a 1px white line) since it has a shadow and ALSO im adding that in the material guide they dont talk about this light on the FAB or at least that i know.... so im trying to make a double check on that. – Cristobal Lemoine Jun 30 '16 at 20:17
  • 2
    @CristobalLemoine Are you talking about an actual value of light on the button? Then no, there is none. If you're talking about a tint (See example on Material Design - Icons, I don't think this applies to the FAB button. – AndrewH Jun 30 '16 at 20:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.