#css resources

CSS DINER:

↳ Link Here ༉‧₊ ↳ 7/10 ༉‧₊ ↳ super cute ༉‧₊ ↳ helps visualize what's going on ༉‧₊ ↳ a little difficult to understand sometimes & a better "help" section would be useful for when people get stuck! ༉‧₊

I completed up until level 15 before it started becoming confusing for me and I needed outside assistance. While I understood on a base level, I would have really enjoyed a few more examples that were in a similar setting. E.G. (selecting the top apple instead of the top orange) Specifically when becoming confused.

Did this game help me understand and use css? YES! absolutely.

FLEXBOX FROGGY:

↳ Link Here ༉‧₊ ↳ 9/10 ༉‧₊ ↳ instructions are very clear + the tools are wonderful ༉‧₊ ↳ visuals are amazing༉‧₊ ↳ easy but still makes you think༉‧₊

Finished all 24 levels! Helped a lot with visualizing what's going the hell on with flexbox and really made me think about my choices. While I didn't have to stare at the screen confused for 20 minutes, I did need to think about my choices. Bonus points for having the abilities of each thing there the whole time in case you forget!

If you're an "old" webdesigner, you'd surely remember how boring and laborious it was to apply shadows to text in your webpages, especially to headers and you might think the situation hasn't changed if you still don't know CSS3, a new set of CSS properties and instructions that will half the time spent on graphical programs trying to get something cooler for your website's design. text-shadow is a CSS3 property that allows you to automatically (without any external program, just with html and css), add shadows to your text, here's the (simple) syntax:

text-shadow: h-shadow, v-shadow, blur, color

h-shadow is the length of the horizontal shadow express in pixels, ems etc.;

v-shadow, same thing as point 1, but it's a vertical length;

blur is an optional parameter, as it specifies the blur distance;

color is obviously the color of the shadow.

Here we have a practical example:

h1 { text-shadow: 2px 2px #ff0000; }

I obviously won't show the effect of this code with a visual example because I want CSS writers to personally discover the CSS3 potentialities. Anyways I've found some useful resources to inspire your creativity and show this new CSS3 property potentials (learning to use simple tools like this property might make us think we can't get top-notch results, which is obviously false):

http://www.html.it/articoli/effetti-speciali-con-text-shadow-2/ (it's in italian, but css code is the same);

http://line25.com/articles/using-css-text-shadow-to-create-cool-text-effects;