Day 27: CSS Gradients

Today I went over CSS gradients and started on flexboxes.  I went over linear gradients and radial gradients.  I learned that the old syntax for prefixed gradients was like so:

<position>, <shape> <size>

For unprefixed gradients, the syntax is like so:

<shape> <size> at <position>

In reference to a background, the keyword transparent is the same as rgba (0,0,0,0).  However, using rgba (255,255,255,0) instead of transparent will prevent the transparent gradient from having a greyish tone.  Transparency can work with linear or radial gradients.

Flexboxes

I also learned about flexboxes today.  Flexboxes are a way to control layout similar to the float property.  Flex items are held within flex containers.  Flex boxes have a main axis (X) and a cross axis (Y). Note: the webkit is due to using the Chrome browser.

display: -webkit-flex; (this sets up the flex-box)
-webkit-flex-direction: row; (this makes the content organized in a row)
-webkit-justify-content: space-between; (this makes the content justified to the left and tight, and leaves a space in between)

With -webkit-flex-wrap: wrap; the content will wrap down to a new row when the screen size shrinks.  A flex item is a direct child of a flex container.

-webkit-flex-grow: 1;  makes the free space between flex items be the same.
-webkit-align-self: center; aligns a flex box vertically
-webkit-order: -1; moves a flex-box to the first spot on the left
-webkit-align-self: flex-end; moves a flex box to the bottom of the flex-container
-webkit-align-self: stretch; stretches the flex box to fit the flex container

@media screen and (max-width: 999px) { .main { -webkit-flex-direction: column; }}

^^ The above is a way to make the flex box turn into a column instead of rows when the viewport is 999 pixels or less.

SUMMARY OF CODING SKILLS

Total Treehouse Points: 1,704

Treehouse Points by Subject Matter: HTML 663, CSS 1,011, and Miscellaneous

Treehouse Ranking (%): "You have more total points than 71% of all students."

Badge(s) Earned Today:

Gradients

Courses Completed:

How to Make a Website
HTML

Books Read or in Progress:

"Head First HTML and CSS," by E. Robson & E. Freeman (In progress, I've read the 37 pg. preface and the first 255 pgs. of actual content, which is the HTML section of the book)

Hours Spent Coding Today: 6

Total Hours Coding: 112