Interesting use for text-shadow

Hello (medium) World!

My name is Eduardo Sganzerla, I’m a webdeveloper and it is my first “program” on this platform. I intend to publish cool & quick stuff I learn here .

So, starting today: an interesting use for text-shadow.

I guess most people already know the text-shadow effect, me also. But I’m contribuiting to this project (SingleDivProject), by creating the Brazillian flag.

Made using a single div

So, today I managed to include the stars on it, but using a single div I had to think a little out of the box.

I did it by including the unicode for star (★) as content for :before and :after, but still, it was only two stars. That was enough to make two different sizes stars.

Now I just need to make these 2 stars into 27. It was very simple in fact after I learned that you can apply multiple shadows to the text and position it just as you want. Take a look on the code below:

text-shadow:
-60px 55px 0px white,
-55px 85px 0px white,
19px 37px 0px white,
-34px 105px 0px white;

I can imagine it being useful on animations, not much though. But just Steve Jobs said on this Stanford speech:

“You can’t connect the dots looking forward; you can only connect them looking backwards. So you have to trust that the dots will somehow connect in your future.”

So, I really hope these dots connect sometime =D