Symbol Stars

I’m on a 5-day video shoot this week, so squeezing in time to code is quite the challenge. Early this morning as I sipped my coffee, I played around with CSS box shadows for the first time, which I have to say is pretty cool!

Though not at all complete, I pushed my results to GitHub as a work in progress. Check it out here!

This is an experiment to create stars out of ancient symbols and characters, which will be a part of the interactive documentary I’m working on.

How it works

Box shadows can either be made to look realistically like shadows, or they can be colored to create some interesting glow effects. The advantage to using them is that they take the form of whatever your box is in. So a round box will produce a round “shadow” or in my case, glow.

Best of all, they can be stacked to create multi-colored glows effects!

The HTML is very basic:



And here is the CSS:



There’s a lot more detail about box shadows at this website: http://codersblock.com/blog/creating-glow-effects-with-css/

For my experiment I chose the $ symbol because you know… the effect is money baby!

There are a couple major problems with this. First is the glow doesn’t appear like it’s coming from the $, it appears like the $ is stamped on a white ball that’s glowing… not what I was going for. Further than that, Chrome currently is very buggy with box shadows, so it’s not cross-browser compatible at all.

This is all I could accomplish today, but it was a good start.

Upon further reading, I believe text shadow would be a better choice as it would render shadow around the symbol, not the box. It would just mean the symbols I’ll be applying this to would then need to be designed as an icon font… something I have yet to learn. So these are my next experiments.

UPDATE: I've since completed this and it's all up on github here: https://github.com/nateplusplus/Star-Text