Sorry i am going to have to say outside of my experience - but i would also say that the question is probably not for the Mushroom thread 
V3 of my nest hub HA Dashboard ft Jellyfin, LMS and stash app integration. I’m very proud of this.
The floorplan is just an image background, and grid layout cards with mushroom cards did most of the rest.
5 Likes
Is there a way to only transform/skew a box-reflect? It looks like an aged function, but its appears to be a good way to create a 3D look without using entity pics if it’s possible.
Vs
Or do you mean something else?
Otherwise its just playing with the 2 first values.
card_mod:
style: |
ha-card {
box-shadow: -10px 10px 15px green;
}
Something different. -webkit-box-reflect: is what I was referencing. I was curious if transform: edits could be used on the box-reflect
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
-webkit-box-reflect: below -10px linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.4));
}
Just did a full post on it for reddit
1 Like
Working on a sleek 3D Mushroom dashboard using Card Mod’s ability to edit the pseudo elements (:after , :before ) . I’ll share the code and finished project when a larger chunk is complete.
2 Likes
Just a note to say that it is not Mushrooms ability to edit pseudo elements. Card Mod provides the facility, but it is native CSS.
Thanks for the clarification, I’ll edit the post 
Sure no problem and thank you in advance!
Hello, can you please help me?
I would like my fan to spin when they are on.
I’m not doing well at all.
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: more-info
entity: fan.chlazeni_goodwe_ventilator
icon: mdi:fan
card_mod:
style: |
ha-icon {
animation: spin 1s linear infinite;
}
ha-icon[icon-animation='none'] {
animation: none;
}
This should work for you. There may be an easier way, but this is what I use.
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: more-info
entity: fan.chlazeni_goodwe_ventilator
icon: mdi:fan
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
animation: rotate 1s linear infinite;
}
@keyframes rotate {
100% { transform: rotate(360deg); }
}
2 Likes
@LiQuid_cOOled Thank you very much. It works perfectly. Can I ask how to set the fan to not spin if the entity is off?
This should do it
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: more-info
entity: fan.chlazeni_goodwe_ventilator
icon: mdi:fan
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
{{ 'animation: rotate 2s linear infinite;' if is_state('fan.chlazeni_goodwe_ventilator', 'on') }}
}
@keyframes rotate {
100% { transform: rotate(360deg); }
}
1 Like
How can I replace an icon with a local image?
Can you share the code you are working with?
@LiQuid_cOOled Thank you very much for your help. Everything works great. I wish you a wonderful Christmas.
1 Like
You can make these changes via customize.yaml
Example:
1 Like
Hello,
I have changed the size of the buttons, in cover card, i saw your tutorial 
, but the problem is the slider i can’t change the size…I already tried slider-track-background but doesn’t work.
Do you known how to do it?
mushroom-button:nth-child(1):
$: |
ha-icon {
--card-mod-icon-color: #6A6A6A;
}
.button {
background: #E2E2E2!important;
width: 70px!important;
}
Take a look at this section in the guide
Clearly i need to change wording slightly as i am saying it doesnt apply when making buttons smaller, but i mean it doesnt apply when making the slider smaller.