ashahry / bamsay

BAMSAY exercise [css, sass, @for, @function]

BAMSAY!

1. $ open index.html
2. Recreate BAMSAY, using only CSS (via Sass).

Check out the css. Lots of text-shadow's, huh? Do you want to type all of them? I don't.

Let's systematize it. Specify what it takes to draw these shadows and then codify it.

What is the element? Start there. Small steps.

Ensure your sass --watch statement works.

Add some basic styling.

Before long, you'll want to add all the text-shadows.

Take a look at the css:

text-shadow: -1px 0px 0px #fefefe,
-2px 1px 0px #fefefe,
-3px 2px 0px #fefefe,
-4px 3px 0px #fefefe,
-5px 4px 0px #fefefe,
-6px 5px 0px #fefefe,
...
-41px 40px 0px #fefefe

Start at? Increment what? Decrement what? Until?

Bonus:

• Display the basic text and grow it into BAMSAY!
• Rotate through colors.