Supplementary Code for Material Design

Contribute UX

AI-generated summary

In the discussion on Supplementary Code for Material Design, Idan shared a CSS code for creating a hover animation for topic avatars, using Material Design guidelines. He also mentioned using image-rendering to sharpen the image on hover, but noted that it’s not perfect due to the small original icon size.

Idan also provided a CSS code for the header background color, using rgba(32,48,155,0.92) to achieve a sense of flow and depth. He suggested adjusting the color to be slightly darker when using template colors to compensate for the decreased opacity.

Pinbot provided a CSS selector for all categories dropdown, .category-dropdown-menu.chooser, to apply Material design settings.

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
}