search

AmoebeLabs / swiss-army-knife-card

The versatile custom Swiss Army Knife card for Home Assistant allows you to create your unique visualization using several graphical tools, styling options and animations.
236 stars 21 forks source link

Add new css value for line, rectangle, cercle …. #123

Open steph38270 opened 2 years ago

steph38270 commented 2 years ago

The Problem To Be Solved

It’s possible to add css box-shadow for line, circle, rectangle …

Additional background:

Related Issues (if any)

(Optional): Suggested Solution

(Optional): Alternative Solutions

github-actions[bot] commented 2 years ago

Thank you for creating your first issue for the Swiss Army Knife custom card!

AmoebeLabs commented 2 years ago

A box-shadow is a CSS setting for HTML boxes. SAK is made with SVG, and you can't have a box-shadow for graphical things like lines, rectangles and circles.

I guess what you are looking for are drop shadows: image

image

image

I added a drop-shadow to all the tools using: filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.5)) as a style.

It works on Chrome and Firefox, but Safari 15.x seems to have problems with that currently 😢 Safari sometimes has a mind on its own regarding CSS/SVG implementations.

steph38270 commented 2 years ago

Ok thank you, I want this effet :

Image PNG

Is it possible with SAK?

itkama commented 2 years ago

@steph38270 https://webcode.tools/generators/css/drop-shadow play around with this. You can test the css-function @AmoebeLabs mentioned with different values for the positioning, size and also color.