Supplementary Code for Material Design

UX
1

I use this code to create hover animation for topic avatars.

Can you provide me with how to translate the recommended Google Material Design to pixels.

Here’s my code:

`.topic-avatar img {
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  transition: box-shadow 0.3s ease-in-out;
  transition: transform .2s ease-in-out;

}

.topic-avatar img:hover {
 box-shadow: 0 8px 10px rgba(0,0,0,0.3);
 transform: scale(1.1);
 image-rendering: auto;
 image-rendering: crisp-edges;
 image-rendering: pixelated;

 }

`

Looks prety neat. try it out.

The image resize isn’t sharp because the original icon size is small and have no room to animate. I used image-rendering to sharpen when it’s hover, but it’s still not perfect. I see if I the image rendering can work while the transition is taking effect.

1 Like
2

This is the css code I use for the header:

background-color: rgba(32,48,155,0.92);

I wanted to reduce the opacity of the headset a bit to give the whole scrolling a sense of flow and depth. It turned out pretty nice and I’ve decided to keep it.

If you use one of the template colors provides by @rewphus , you should probably adjust the color to be slightly darker, so even with the decrease in opacity, it will still look similar to the original color, but you still be able to see the content streamed underneath.

1 Like
3

For all categories dropdown

.category-dropdown-menu.chooser {
  // Material design settings
}