Fluent Design card lift effect

Question

I want to add the card lift effect to my bootstrap cards with fluent design styles on hover. You can see what I mean on microsoft design website.

Here's what I tried, but there is something missing and I cannot quite grab it.

I tried:

.card {
  box-shadow: -3px 6px 5px 0px rgba(176,164,176,1);
  transition: all .3s ease-in-out;
}

.card:hover {
  box-shadow: -3px 18px 20px 0px rgba(99,89,99,1);
}

<div class="card" style="width:19.5rem">
  <div class="card-body">
   Lorem ipsum dolor sit ameta, card content
  </div>
</div>

Kindly thanks for your help.

score 20 · Accepted Answer · edited Jul 05 '18 at 07:46

What makes the effect to looks like it is lifting is the transform: translate3d, see translate3d w3cschools docs.

When the box-shadow changes on :hover the element itself moves in a different position, delivering the effect.

So by giving transform: translate3d(0px, -1px, 0px); ( translate3d(x,y,z) ), the element moves 1px up and shadow casts down.

.card {
  padding: 15px; /* JUST TO LOOK COOL */
  border: 1px solid #eee;  /* JUST TO LOOK COOL */
  box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px;
  transition: all .3s ease-in-out;
}

.card:hover {
  box-shadow: rgba(0, 0, 0, 0.22) 0px 19px 43px;
  transform: translate3d(0px, -1px, 0px);
}

<div class="card" style="width:19.5rem">
  <div class="card-body">
   Lorem ipsum dolor sit ameta, card content
  </div>
</div>

Nice one. Do you think I should add it to my [Fluent Kit](https://nespero.com/fluent/jquery/) library? Also, is that not a little overkill to use `translate3d` just to lift it up by `1px`? Can you think of any better solution? — wscourge, Jul 05 '18 at 07:12

score 3 · Answer 2 · edited Jul 05 '18 at 07:38

3

You are missing the actual movement upward. Many ways to achieve this, for example:

.card:hover {
  margin-top: -1px;
}

from the top of my head.

edited Jul 05 '18 at 07:38

answered Jul 05 '18 at 07:10

Me1o

1,629
1
6
8

1

That's what the other guy said, but he used `translate3d` instead. Which one do you think is better for that particular effect? Any pros/cons for one over another? If it is identified with Fluent Design System I think I might add it to the library mentioned, what do you think? – wscourge Jul 05 '18 at 07:14
1

you would have to run performance tests to figure this out.. i just use 'margin' because it seems simpler.. would like to see how you go with this though. – Me1o Jul 05 '18 at 07:23
OK, thanks for your insights, it makes sense with using the margin as you point out - simplicity. I will definitely let you know what I decided on in the next few days, cheers. – wscourge Jul 05 '18 at 07:33
3

`margin-top: -1px` can be used indeed, but in this case it will move the whole content below it 1px up as well... `transform:` will only change it visually, nowhere else will be affected. – caiovisk Jul 05 '18 at 07:58

score 2 · Answer 3 · answered Jul 05 '18 at 06:51

To achieve this effect, microsoft uses multiple box-shadows like so:

box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px, rgba(0, 0, 0, 0.05) 0px 0.5px 1px;

on hover:

box-shadow: rgba(0, 0, 0, 0.22) 0px 19px 43px, rgba(0, 0, 0, 0.18) 0px 4px 11px;

.card {
  box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px, rgba(0, 0, 0, 0.05) 0px 0.5px 1px;
  transition: all .3s ease-in-out;
}

.card:hover {
  box-shadow: rgba(0, 0, 0, 0.22) 0px 19px 43px, rgba(0, 0, 0, 0.18) 0px 4px 11px;
}

<div class="card" style="width:19.5rem">
  <div class="card-body">
   Lorem ipsum dolor sit ameta, card content
  </div>
</div>

Fluent Design card lift effect

3 Answers3

Linked