iiYO Community

Full Version: CSS styling on image assets
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Hi.
How to put CSS styling on character assets or any image asset ? Smile

By example :

imgchara {
box-shadow: 10px 10px 0px #aaa;
}

I would like a shadow behind the character, one ccs styling per character, to have one shadow color per character.

Guest

This works but probably isn't what you want:

You can define a cssid= attribute on Imagepack assets:

Code:
<imagepack name="myPack" cssid="myImagepack"><!-- ... -->

And then in your CSS file:

Code:
#myImagepack img { /* ... */

You cannot do that on a per-character basis, you need to set it for all Imagepacks you use for the character.

The problem here is that box-shadow does exactly what it is supposed to: draw a shadow for a BOX. It ignores any transparent pixels and draws a border around the image dimensions...

To the best of my knowledge, you cannot do this with CSS; you would have to either add a shadow to the images in the image processing application of your choice (which is the easy way) or write an extension that uses the HTML5 canvas to process each image in an imagepack and replace the src= attribute of the img tag with the result of calling toDataUrl() on the canvas DOMElement object.

Guest

OK. I understand the issue. Having th shadow directly part of the image seems to be the wise solution for now. Thanks.