New terms from treehouse – CSS Foundations Part 4 – CSS Gradients and Flexbox and Multicolumn Layout

Gradient city, population me

With gradients, you can create gradual fades between two colors. You can control the angle, shape, size and transition to make interesting effects and patterns. Because no images are required for these, we can increase performance by decreasing load times for our pages.

There have been three different versions of the syntax since it was introduced in 2008. Fortunately, the latest version is supported by the major browsers. For a lot of them though you used to need to use the prefixed syntax, where you put -webkit- before the linear-gradient property to make them work properly. Now you can just use the unprefixed syntax though.

A gradient isn’t a real CSS color. It’s actually an image with absolute dimensions and no fixed size. It’s actual size by default matches the size of the element it’s applied to. Can be used for any property that accepts images. Commonly used for backgrounds, buttons, shading and background images.

Linear gradientscreated when two or more colors are defined along the gradient line, which gives the gradient its direction. To create one, you just need to specify two comma separated color values, which can be keywords, hex, rgba, hsla, etc.

grad line

code fixScreen Shot 2014-05-16 at 9.29.32 AM

By default it goes top to bottom of the element. You can adjust this by adding the keyword bottom before the first color, followed by a comma space. This will make it go from blue to orange, top to bottom.

code fix2

You can make it run diagonally by specifying the horizontal and vertical starting positions. Simply add right after bottom with no comma between to do that. You can see now the gradient begins at the bottom right corner. If we wrote (top left, orange darkblue), it would start from the top left and go orange to dark blue.

diagdiagp

For more control, you can define degree parameters. The angle is specified as counterclockwise. So 0 degrees would make a horizontal gradient from left to right. 90 degrees would make it go from bottom to top. 45 degrees would start from the bottom left corner.

0deg0 9045
Color stops allow you to control the progression of color change in the gradient. Each color stop should have one or two components – a color component, and an option position component. At the very least, you can define a list of colors. The area between each will be filled with a transition from one color to another. Since we didn’t add any position keywords, they’ll be displayed in the order listed. You can set as many color stops as you like.

stopcstopcc

You can control the position of any of the stops by putting it in a space after the color. So 50% would mean that green has to start 50% along the length of the gradient. So at 50% is where the gradient is 100% green. The browser will then easily distribute and fade the other values. Tj

percolorper

The position can also be a pixel length. So 100px means the green starts 100 pixels from the top, meaning that’s where it’s 100% green.

pxpx1

If you use two or more color stops in the same color stop position, it will result in a sharp color change, because they will start at the same position.

px3 px2


Unprefixed Syntax – Doesn’t require -webkit- before the property. With the new syntax, you can create gradients just like before with two or more comma separated colors, but angles and directions work differently. To change the direction you must use the keyword to followed by the direction values top, bottom, left, right.

So, for a gradient going left to right, before you’d just right “left”, but with this you need to write “to right”. To reverse it and have the colors go from right to left, you’d set it to “to left”. “to bottom”is the default value, and would make it go from top to bottom.

to right code to right

To do diagonals, you just add another directional keyword in there. “to top left” would create a gradient that goes from the bottom to the top left. To reverse this, you’d write “to bottom right”.

toplctopl

The degree angles set for the unprefixed syntax are done differently as well. In the prefixed syntax, 0deg would make it go from left to right. In the unprefixed syntax, it makes it go from bottom to top. The angle directions then continue rotating clockwise, unless a negative value is specified. 90 would make it go left to right, 180 would make it go top to bottom, and 270 would make it go right to left.

unprefixed

90deg90pic

Because all major browsers now support the new, unprefixed syntax, you should use that.


Radial Gradients – are gradients that have a starting point and smoothly spread out in a circular or elliptical shape. They’re basically linear gradients that start from the center point of a circle. They’re defined using the radial-gradient funcitonal notation. Once again, there’s a -webkit- variety, which this will go over.

By default, the shape of a radial gradient is an ellipse, and it has the same proportions as the containing element. Notice how it starts in the center and then spreads out to the other color.

rada rad1

To change the shape from elliptical to circular, just add the circle keyword before the list of colors, separated by a comma. It also will no longer follow the divs proportions like the elliptical shape does. Notice how you can see more blue on the left and right now.

radb rad2

You can position where the gradients center should be within the element by putting two values before the circle/color ones. First value is horizontal position, and the second value is for the vertical. This is very similar to how the background-position property sets the position of a background image. 150px 50px would make it 150px from the left and 50px from the top.

rad3radc

You can also use percentages for this, which are based on the dimensions of the box. Like background-position, if you only define one value, the second one will default to “center”.

raddrad4

There are other keywords to change the gradients ending shape. closest-side makes the ending shape meets the sides closest to its center, which in the example below is the vertical sides because the width is larger than the height.

rad5rade

If the height was larger, it would stop there instead.

rad6

With elliptical, it meets both the horizontal and vertical sides closest to the center.

2

1

With closest-corner, the ending shape is sized so it meets its closest corner from its center.

cc1acc1cc1b  cc2

farthest-side makes it so the ending shape meets the sides that are farthest from the center. In the example below, you can see it expands to the top left corner.

c3c4

farthest-corner is the opposite of closest-corner, so the gradient’s ending shape is sized so it meets the farthest corner from the center. In the example below, you can see it sizes to meet its farthest corner, the bottom left. This is actually the default value, so you can omit it and it will maintain that end shape.

cc5cc6

color stops are defined as a list, just like for linear gradients. The first color defined starts from the center, and then moves out from there. You can also add color stop position values in percentages, pixels or em units. So in the example below, dark blue reaches its full color value 30% from the center and the green value reaches its full green hue 600px from the center of the gradient.

cc7 cc8

With radial gradients, the gradient line extends out from the center point in all directions. So you can go beyond 100% depending on your desired result. So by setting green to 120% below, it’s full hue actually extends beyond the box.

c9c10

You can make cool shapes with these.

cc11cc12


Radial gradients – unprefixed syntax. Like unprefixed linear gradients, there are some differences here on how you do things.

You can still create a gradient like this with two comma separated color values, and the color stop position, shape and size values haven’t changed either, just how you order them. Notice how you now have to at the keyword “at” for the unprefixed version.

order

So in the example below, notice how it starts on the right and goes left, and is vertically aligned to the center. The value top would have it go from top to bottom.

c2 c1

Remember, if you only have one position value, the second one will default to center. Here, we define a second one.

c3 c4

In the example below, the gradient is 30% from the left, and 15% from the top, and the ending shape is sized to meet the sides farthest from its center.

c5c6


Gradients can also be used as transparent full page backgrounds. Setting the second color to the keyword transparent gives you this:

1a

To fix that, you need to give the html element a height of 100%. This gives you:

b

To adjust the size of the gradient, simply add a color stop position after the transparent value.

2c

You can overlay this over a background image as well.

3

d

The transparent actually refers to a transparent rgba value of black. It’s exactly the same as using rgba(0,0,0,0). However, this can sometimes lead to a light grey part in the transition of the gradient. To fix this, use a rgba value of white instead: rgba(255,255,255,0).


Repeating gradients – gradients that repeat infinitely in any direction, They are essentially extensions of linear and radial gradients. They’re like background images that repeat infinitely horizontally and vertically. Syntax is the similar to before. You’ll need two color values, and one color stop position. Note in the example below how each repeat is spaced out by 50px, as defined by the color stop.

no1 r1

Since there is no color stop defined for the first color, it defaults to zero. If you were to add one of 20px, you can see how it shifts and they’re now spaced out by 30 pixels, which is the difference between 50px and 20px.

no2 r2

If the gradient does not start and end with the same color, it results in a sharp transition, as you can see above. To fix this and get a smoother transition, you add the first color as the last color with another color stop. The transition now is 50px, aka the difference between 70px and 20px.

no3r3Like with other gradients, you can add a keyword to change the direction of the gradient. Because I’m using the unprefixed syntax, I put “to right” in there.

no4r4

Using the degrees position, we can make a nice diagonal pattern.

no5 r5

We can make other cool patterns like this:

no6r6

You can have infinite radial gradients as well.

no7r7

no8 r8

Resizing the element it’s the background for will affect the gradient.

no9r9

Resource: http://www.colorzilla.com/gradient-editor/ – helps you generate gradients. It can even take an image and make it into a CSS gradient.

For gradients, always include a fallback color or image for older browsers.


Flexbox and Multi-Column Layout

CSS layout was previously done with floats, blocks, and inline formatting, but they were not designed for today’s complex layout demands. Floats may require a lot of clear fixes, absolute positioning takes elements out of the normal document flow, etc.

Flexible Box Model aka Flexbox is the future of CSS layouts, a simple yet powerful feature for distributing space and aligning content. It’s supported in most modern browsers, except for Safari, which still requires the -webkit- prefix. It handles 2-d layout really well, because you can layout elements in any direction, and make boxes grow, shrink and autofill space. It makes it easy to align elements with respect to their container or each other, and to make them have the same height.

It consists of flex containers and flex items. Every direct child of a flex container is a flex item, and there can be as many you’d want. It defines how the items are defined inside the container. The container can have multiple flex lines, which break the flex items into multiple lines, and by default go left to right and top to bottom.

f1

It has two axises, the main and cross axis, which determine the baselines of the flex containers. The default direction of the main axis is left to right, and the default direction of the cross axis is top to bottom.

f2

First, you need to establish a flex formatting context for the page. By setting display: flex, you make that element the flex item containing box, where children of that will become the flex items. NOTE: In the following examples, I use the -webkit- prefix, even though it’s not required for chrome or FF.

1a

The flex-direction property lets you control the direction of the flex items. It’s default value is row, which gives you what you see above. row-reverse swaps the start and end positions.

2b

The column value swaps the main axis and the cross axis, so the flex items are laid out vertically. What you see below is actually what it looked like prior to setting the display of .nav to flex.

3c

column-reverse does what you’d expect:

d

The justify-content property adjusts the positions of flex items on the main axis. The value space-between moves the first list item to the left, and the last to the right, and divides up the space in between.

sb cs

The flex-end value moves all the items to the end of the flex line, and center centers them.

fedendcentercenterr

Margins also have an effect on flex-items in particular the auto value which will absorb extra space and push the flex items into different positions. In the example below, we’re using the space-between value, but the extra space has been absorbed by the margin-left:auto for the last child.

lclc1 1 f

Now, what if you’re using space-between with a lot of li’s in a small viewport?

o

They overflow, but you can easily fix that with the flex-wrap property and setting it to wrap, which does this:

1 234 5


Once again, a flex item is any direct child of a flex container.

The flex-grow property lets you determine how much the flex item will grow relative to the other flex items. In the example, the value was “1”, which represents the ratio of space taken up by the list items. 1 will make the free space evenly distributed and so that the li’s take up the same amount of space.

c 1

The flex property can also be used. In the example below, the third column grows twice as big and the remaining space is evenly distributed between the other two columns.

cc 2

If we set it to 3, it will be three times the size of the other columns.

ccc3

The order property lets you change the order of the columns. If you set column c to -1, it will move it to the beginning of the row.

cccc4

You can use flexbox to vertically align boxes as well. The align-self value lets you do that. The center value centers the content vertically.

c5 5

The flex-end value aligns the margin edge of the column with the end.

c66

The default value for align-self is stretch, which will make all elements have the same height.

x

You can adjust the layout of the columns with media queries. Right now, when the browser width is below 1000px, the columns become too narrow.

x2

In the example below, the new styling is applied anytime the browser is smaller than 1000px. Remember, the column value switches the main and cross axises, so the list items are laid out vertically.

c1 1

When using flexbox, you want to make sure it displays well for browsers that don’t yet support it.

Resource: http://modernizr.com/ detects flexbox support and provides fallback solution if needed.


Multi-Column Layout resembles flexbox layout in that it gives us a lot of layout flexibility, the difference is that this is designed for text layout, or multiple text columns. It introduces a new type of container that lets content flow from one column to another, and the number of columns can vary based on the viewport size. It’s purpose is to make things scalable.

It’s currently only supported in IE and Opera (lol wut), for everything else you need the -moz- prefix for firefox and the -webkit- prefix for chrome and safari.

Starting with:

x

The column-count property let’s you specify the number of columns. If we set the value to 3, no matter how wide the screen is, the content will always be split into 3 columns.

c1 1

c1b

The column-gap quality lets you set how big the gap is between them.

c2 2

The column-rule properties defines the rules or borders between each column. The values. column-rule-width defines the width, column-rule-style defines the style and can accept dashed, dotted, solid, etc like the border property, and column-rule-color sets the color.

c33

common-rule is the shorthand property for those.

c4

 

The column-width property lets you define how thick the columns are. Setting it to 250px makes sure the columns will always be 250px wide, so it’s kind of like max-width for these columns, as the column count will change based on the browser size, making it great for responsive web design.

col abc

columns is a shorthand property for column-count and column-width.

cols

Images will follow this flow as well, but you’ll likely need to make some adjustments. a

 

The max-width of 100% makes sure that it always takes up the max-width of its column. This will ensure it flows and will resize with the columns when the browser is resized.

c11   23

The column-span property lets you define how many columns the content will take up. The value all will be for all columns, regardless of how many there are on the page.

c h

 

Anddddd…. I went through that much quick than expected. Sweet. On to the next sections.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s