Hi
That's a lot of shadows! :)
A text sprite is not a DOM element, it's just a "virtual" element that is drawn into a canvas. As such, you cannot really attach any css to it. You can attach any css that you like to the canvas element that the text sprite is drawn into, but that wouldn't give you the effect that you're after with your multiple shadows.
Having said that, there is a trick that you can use to achieve the effect that you want. TextSprites support shadows via the method TextSprite.setShadow(color, blur, offsetX, offsetY). It has to be, however, just a single shadow value (it's really a limitation of the HTML5 canvas, so not much we can do about that).
But... you can draw the text sprite multiple times, to have multiple shadows!
Note that this is pretty performance intensive, and I definitely wouldn't recommend drawing that text with so many shadow values every frame. I would suggest that you draw your text sprite (multiple times with different shadow values) to an image, and then use that image to create a normal Sprite. This is much, much faster, and also much faster than using a CSS class with a DOM element. Also, multiple shadow values in CSS are not supported across all the different browsers, whereas this method will work everywhere.
This code should do it:
var textSprite = new TextSprite('Some Text', '32px Arial', '#ff8888');textSprite.scaleBounds(2, 2); // make its bounding box bigger so all the shadows will fit into the imagetextSprite.setShadow('rgba(0,0,0,0.15)', 20, 0, 20);textSprite.drawToImage('my cool text'); // draw it to a new image called 'my cool text'textSprite.setShadow('rgba(0,0,0,0.2)', 20, 0, 10);textSprite.drawToImage('my cool text'); // draw on top of the existing imagetextSprite.setShadow('rgba(0,0,0,0.25)', 10, 0, 5);textSprite.drawToImage('my cool text');// repeat for all the different shadow values that you want...// then create a Sprite with our 'my cool text' imagevar sprite = new Sprite('my cool text');Also note that the order of the shadow values should be the opposite of what you have in CSS to replicate the same effect (i.e. start from the bottom of your list of values).
