New terms from treehouse – CSS Foundations Part 5 – Transitions and Transforms and CSS Animations

Transitions and Transforms

Transitions are a new CSS feature that allow you to change a property from one value to another over a given duration. You can also control the start time and speed of the duration. This is actually very well supported by all modern browsers. The syntax is pretty straightforward, you only need to specify the property you’d like to transition, its duration, and a transition timing function or delay.

NOTE: Not every CSS property can accept transitions. The w3c has a list of the ones you can use.

One of the simplest ways a property can be transitioned is with a pseudo-class like :hover. The transition-property value let you choose which property you’d like to transition.

1

However, if you just did that, it would look like a normal hover state where you’d hover and the color would change. The transition-duration property defines the length-time or duration of a transition. The default value for it is 0s (seconds). To specify the duration in milliseconds, simply put a period before the number. So, .3s would be 3 milliseconds.

2 hova

transition-property does allow multiple transitions to be defined, using a comma separated list of properties. Additionally, if you want a different transition-duration value for the second property, you just list that after a comma as well. In the example below, you can see border-radius takes longer to change.

c3 hova2

Rather than writing out every property, you can just set transition-property to all, which will animate all animatable properties within the rule. This is actually the default value for transition-property, so you don’t need to include it if you want to animate all animatable properties.

When you unhover, the properties snap back to their original state. To have them transition back to their original state the same way, you’ll have to add the same transition declarations to the original rule.

chova3

If you want the transition values to be the same for both states, you only need to include them in the initial rule.

c2

They also recommend you include the vendor prefixed properties for older versions of browsers, but the only one I can see needing in the chart is for older versions of iOS and the current version of Blackberry mobile, which would both be -webkit-

c3


There are additional properties for easing and delaying transitions. Notice in the example below how they use a descendent selector, basically saying when you hover over the .wrap class, select the descendants with the class “box”.

chova1

The speed of a transition can vary during its duration. It actually follows an acceleration curve. This article explains this more and breaks down the pre-determined timing functions. The transition-timing-function property lets you establish an accelerated curve, which determine what happens between the beginning and end of a transition. There are 8 predefined timing functions.

  • ease is the default value, and starts gently then speeds up (it’s the one you see above)
  • linear gives it a constant speed with no easinghova2
  • ease-in starts slow, then speeds up towards the end hova3
  • ease-out starts at a constant speed and then slows down at the endhova4
  • ease-in-out starts slow, speeds up, then slows down again
  • step-start, step-end and steps() let you define the number of steps for the transition. So, steps(4,end) would mean it transitions in 4 steps until it ends. chova5

These are all mapped to cubic-bezier (bez eee ay) values, which you can use to build your own acceleration curves. It’s a mathematical function that provides a smooth curve that accelerates or decelerates. It’s defined by four control points, P0 to P3. P0 and P3 are always in the same spot, 0,0 and 1,1 respectively. P1 and P2 provide the directional info on how the curve starts and ends, and are what we set.

k

The cubic-bezier() function can be used for the transition-timing-function property for setting the values for P1 and P2, which are each specified by an x and y value. The x values need to be from 0 to 1, but the y values can break outside that range by using a negative value. In the example below, we’ve made it quickly eases out and slowly settles in.

Screen Shot 2014-05-21 at 2.01.24 PM

hova6By using negative values in our y values, it will actually break out of its wrap element and will ease back into its starting and end positions. hova7You can also create a delay that happens before the transition begins using the transition-delay property. Notice how it delays the transition both ways. It actually wouldn’t do the second transition until you stop hovering.

cchova7 You can set the transition properties individually, using the transition-property property and the comma separated values shown before. Notice how background now takes much longer to change, due to it’s 1 second delay value.

ccchova7 You can use the transition shorthand property to write all of those in one declaration. The order is important because the second value declared will always be considered the transition delay. So the first value is the duration and the second value is the delay. cccc

Resources: There are tools to help you make these curves. http://cubic-bezier.com/#.17,.67,.83,.67 is a simple app for creating, testing and comparing testing functions, and does not restrict things to the 0-1 range, so it lets you create those bouncing effects. You can then export the CSS for it into your stylesheet. http://matthewlein.com/ceaser/ is another one that you can use to make code snippets.

If a browser does not support transitions, then it will simply apply the value instantly with no transition. This is okay, as transitions should be used as an enhancement feature, the content and functionality should not depend on them.


CSS transforms provide a way to move, skew, rotate and scale elements in a 2D or 3D space. 2D transforms have excellent support in modern browsers, though chrome and safari still require the -webkit- prefix.

The transform property lets you do this. The rotate() function can be set as a value for it, and accepts arguments and various types of angle units. The deg unit moves the element in a circular motion up to 360 degrees. Positive values rotate it clockwise and negative values counterclockwise. So, 45 degrees would turn it halfway to the left. In the examples below, there’s a clear version of the picture set behind it to show the difference.

c 

1

Other units you can use are grad for gradients. 400grad is equivalent to one full circle or rotation, so 360 degrees, and 200grad would be equal to 180 degrees. You can also use rad for radians. 1rad is equal to about 57 degrees. 3.14rad, aka Pi, is equal to 180 degrees, and one full circle is 2Pi rad, or 6.28rad. These are a little more complex, so you can use turn for a more intuitive angle unit. 1turn is a full rotation, aka 360 degrees, .5turn is a half rotation, aka 180 degrees.

These work well when you combine them with transitions.cchova7

The transform-origin property lets you define the origin of the transform. Its default value is 50% 50%, which places the origin in the center of an element, so it rotates like the example above. You can move the x and y origins with these two values, the first for x and the second for y. y is 0% at the top and 100% at the bottom.

You can also use position keywords for this like top, right, bottom or left (so: top, right would be the same as 100% 0%)

k

 

Setting it to 100% 100% gives you this:

k2c hova9The scaleX() function is another value you can use, and will scale the image horizontally on the x axis. It accepts numbers, so 1.5 would be 150 times its size on the x axis.

Screen Shot 2014-05-22 at 12.25.13 PMhova9

 

scaleY() works the same way, only the scaling is on the y axis. Note: for these the X and Y are capitalized.

Screen Shot 2014-05-22 at 12.27.34 PM hova9To scale X and Y at the same time, you can just write scale(). If you write one argument, it will apply to both x and y.

The skew() function gives it a slanted or twisted appearance, and accepts degrees and the other circle measurements from before as values. Once again, there is skewX(), skewY() and skew() for both (you would enter x and y as two comma separated values, if you don’t write a second value for Y, it’s assumed to be 0). So, scaleX(45deg) skews it to the left on the x axis, and -45deg would skew it to the right.

Screen Shot 2014-05-22 at 12.44.30 PMhova9

Screen Shot 2014-05-22 at 12.46.13 PMhova10

The translate() function lets you move elements along on the page. It accepts any length unit or percentage in its argument. translateX() moves it left to right, translateY() moves it up and down, and translate() is for both (which once again uses comma separated values for x and y, and if you don’t write a second value for Y, it’s assumed to be 0). A positive x value moves it to the right, and a negative x value moves it to the left. A positive y value moves it down and a negative one moves it up. You can also use percentages. 100% would move it by 100% of the element’s size. So if it was 150px, it would move it by that much, etc.

You could instead use the top, left, bottom and right positioning offsets, but the translate function is much better performance wise, because 2D and 3D transforms happen on the GPU. So, they’re hardware accelerated, which leads to smoother animations.

Screen Shot 2014-05-22 at 12.53.10 PM hovaScreen Shot 2014-05-22 at 1.03.34 PMhova2Screen Shot 2014-05-22 at 1.09.15 PMhova2s You can combine transform functions to make cool effects. Here, we combine scale and rotate:

Screen Shot 2014-05-22 at 1.14.52 PMWhat did you say to me bitch I'LL FUCKING KILL YOU

Screen Shot 2014-05-22 at 1.18.50 PMhovaaaa


3D transforms are an extension of 2D transforms, and introduce the z-axis allowing us to use the properties in 3D perspective we establish on the page. The elements are still 2D, it’s just no longer stuck on the 2D plane. A lot of the properties here we’ve seen before for 2D transforms.

In the example below, we start with two divs, each with a background image. Screen Shot 2014-05-24 at 11.19.43 PM

If we want the bottom one to go behind the first, we can just give them both a position:absolute, which IIRC removes them from the normal document flow. Now, if you were to just do that the bottom image would be on top, so you give the first a higher z-index.

Screen Shot 2014-05-24 at 11.22.51 PM

Screen Shot 2014-05-24 at 11.22.47 PM

Before you can do a 3D transform, you must establish a 3D perspective for the page, or it will still appear as a 2D transformation. The perspective property lets you do this, and the element that you define it for will affect its direct child elements only. They did this for the body, which I’m confused by because its direct child is just the div with the class wrap, and not the divs with the pictures.

Screen Shot 2014-05-24 at 11.27.08 PM

The value you set for the perspective property is the distance from the drawing surface to the assumed surface of the viewers eye, and is comparable to the field viewing angle of a camera. The smaller the perspective value is, the deeper the perspective is, and the larger the value, the shallower it becomes. I’m really quite confused by that. 800-1000px is a normal value for this though.

Screen Shot 2014-05-24 at 11.27.17 PM

Next we’ll add the transform property for the hover state to tell it what we want it to do when someone hovers. To make the transition smooth both ways, in the rule for the non hover state we’ll add the transition shorthand property to specify its length and timing-function (the ease-in part of it). Notice how it rotates on the x axis within a 3D plane.

Screen Shot 2014-05-24 at 11.34.26 PM hovaaaaA negative value of -45deg rotates it the other direction.hovaaaaIf you mess with the -webkit-perspective properties values you can see a big difference. When you make the value smaller, the perspective gets deeper, and if you make it bigger, the perspective gets shallow.

Screen Shot 2014-05-24 at 11.53.30 PMhovaaaa1Screen Shot 2014-05-24 at 11.54.44 PMhovaaaa1s

rotateY() does what you’d expect, rotates it on the y axis.

Screen Shot 2014-05-24 at 11.56.46 PMhovaaaa1s

rotateZ() rotates it on the Z axis. The way to think about how it will rotate it on each axis would be like the element is a postcard and the axis is a piece of string going through it. If so, how would it turn if it were pierced by it? So, 65deg would turn it to the right, and -65deg would turn it to the left.

Screen Shot 2014-05-24 at 11.59.58 PMsds

You can rotate on all three axis using one argument with the rotate3d() function. It accepts 4 values. The first three set the direction of x,y and z, and the last one sets the rotation. x,y and z are always number values, usually zero or 1. If it’s set to 1, it will rotate by the value specified, and if it’s set to zero it will not. So in the example below, it will rotate on the x and y axis, but not on z. In the second example, it only rotates on x and z.

Screen Shot 2014-05-25 at 12.07.09 AMsds

Screen Shot 2014-05-25 at 12.08.21 AMsdsw


The perspective-origin property allows you to set the viewing position or origin, which by default is the viewport. Like perspective, it needs to be defined on a parent or root element in order to give the transformed children depth. It lets you move the perspective up, down, left, right, etc.

Screen Shot 2014-05-27 at 1.00.18 PM

 

By default, the origin is centered on the viewer, equivalent to the value 50% 50%, setting the x and y position in the center. It takes two values, the first for x and the second for y. It can accept length units, percentages, or keywords left, center, right, top, and bottom. If you only define one value, the second will default to center. Setting it to 100% 100% makes the perspective go to bottom right.

Screen Shot 2014-05-27 at 1.04.46 PMwew

A x value under 50% moves the origin to the left, and one above 50% goes to the right.

Screen Shot 2014-05-27 at 1.08.07 PMssssScreen Shot 2014-05-27 at 1.08.52 PMdddd

A y value under 50% moves the origin up, and one above 50% goes to the bottom. In the example below, the equivalent keyword values are “center top”.

Screen Shot 2014-05-27 at 1.12.54 PMddddas

The translateZ() function lets you move the element on the z axis. Positive values move it closer towards the viewer, negative values move it further away.
Screen Shot 2014-05-27 at 1.17.17 PM

adadsdas

The translate3d() function moves the element on the x, y and z axes, and accepts three arguments, one for x,y and z, in that order. In the example below it goes 100px to the right, 50px down and 150px towards the viewer.

Screen Shot 2014-05-27 at 1.21.23 PMasdada

The scaleZ() function lets you scale elements on the z axis. It only accepts a number argument, which then gets multiplied by the elements current position on the z axis. So if you set translateZ(100px), and then set scaleZ(2), this would scale the Z axis by 200px. This is essentially the same of having a translateZ(200px). So, scaleZ is dependent on the translateZ value.

Screen Shot 2014-05-27 at 1.28.05 PMdddddd

Once again, it’s worth noting that only direct children of the element you set the perspective property for will be affected by these 3d transforms, non direct children will still transform flatly because they don’t have the perspective. You can adjust this with the -webkit-transform-style property. The value preserve-3d makes it so the non direct children inherit the 3d as well.

You do that, then set it to rotateY(180deg). You’d think you could see the other picture now, but that’s not the case. When elements are in 3D space, there are times when the backside may be visible, but you can control whether the backside can be seen. By default, the backside on every element is visible, but you can change this with the -webkit-backface-visibility property. The default value for this is visible, but if you set it to hidden it prevents you from seeing it.

daa

Still, we can’t see the second div. That is because we need to reverse it so its backside faces in. We set both divs to hidden, which is why nothing displays. So to fix this, you set its -webkit-transform property to rotateY(-180deg). This makes it so that by default, without having to do any hovers or anything, the div is flipped on the y axis. All code and final example shown below:

Screen Shot 2014-05-27 at 1.43.52 PMssss

Once again, the benefit of using 3D transforms is that it triggers hardware acceleration via the GPU, which helps things load more quickly. They are fairly well supported.


CSS Animations

Let you create smooth, multistep animations using a keyframe syntax. They’re similar to transitions in that you can change the values of a property over a given duration. The difference being that transitions are immediately applied when property values change, while for animations, while animations only execute when binded to a selector, and the changes in CSS are defined separately in a set of keyframes. They give you control over how they play and iterate.

Browser support is good, just need to use the -webkit- prefix. Not every property can be animated, but you can view that list here.

They consist of two components. The keyframes that indicate the start and end states and possible intermediate waypoints, and a set of properties that reference those keyframes to execute the animation sequence. These properties can control how many times the animation iterates, whether or not it alternates between the start and end values, and if it should be running or in a paused state and also delay its start time.

@-webkit-keyframes lets you create the keyframe rule. It’s followed by the user created name for the animation. You can specify them with percentages, or with the keywords from and to.

Screen Shot 2014-05-28 at 1.43.30 PM

Now, in order to see the animation sequence, we need to bind it to a selector by referencing its name in a CSS rule, or the animation will have no effect. You need at least two, the -webkit-animation-name, which references the name in the keyframe, and the -webkit-animation-duration, which accepts a time value in seconds or milliseconds. In the example below, the width of the div goes from 0 to 100% in 2 seconds.

Screen Shot 2014-05-28 at 1.43.50 PMann

Using percentages with keyframes instead of from and to allow us more control over how the animation progresses, because they allow you to control the intermediate steps as well. 0% is the beginning and 100% is the end, and are the same as from and to. So in the example below, when the animation is 30% done, it jumps to 50% width.

Screen Shot 2014-05-28 at 1.49.11 PMddddd

If you want more than one keyframe to share the same properties, simply combine them as a comma separated list of percentage values. In the example below the animation is held at 50% width from 30-60% of the animation time.

Screen Shot 2014-05-28 at 1.54.14 PMssss

Notice how there’s an easing function between each keyframe. Like transitions, animations having a timing function -webkit-animation-timing-function whose default value is also ease and accepts the same other values. What you set for it gets applied to each keyframe, not the overall animation, so it eases between each one. For example, linear makes it so it has no easing.

Screen Shot 2014-05-28 at 1.54.14 PM sssssa

IE11 and Firefox support the unprefixed version, so make sure you add a copy of your keyframes for those as well.

Screen Shot 2014-05-28 at 2.03.58 PM Screen Shot 2014-05-28 at 2.04.50 PM


It’s the full page animation projectttttttt yea. We’re going to animate a boat.

The webkit-animation is a shorthand property from animation-name, animation-duration and animation-timing-function. Simply space separate each value.

First, we want this boat to rock, so we’ll create a keyframe rule for it where middle one turns it slightly halfway through the animation, then it goes back to its original position. Then we bind it to the appropriate selector using the animation shorthand property. The order of the time values here is important, like it is for the transition property. Here, the first time value is asigned to the animation-duration, and the second to the animation-delay.

However, if we do that it will only play the animation once, so we’ll use the -webkit-animation-iteration-count property. By default, this is set to 1. If you want it to play twice, put in 2, etc. You can also put infinite to have it play forever. Note: you can also put this in the shorthand at the end.

Screen Shot 2014-05-28 at 9.07.01 PM

Now, you can actually remove the 0% and 100% keyframe declarations, because they’re basically just reverting back to their default states, which are the same as the original computed values of the boat element, which has no rotation or translation. According to the animation spec, if the 0% or 100% keyframe isn’t defined, the browser will make one using the original properties of the value being animated.

Screen Shot 2014-05-28 at 9.09.47 PM boat

 

Next, we’ll animate the steam coming out the top. First, set the opacity of the steam in the main stylesheet to 0, so that that will be the starting and end point of the animation. Next, we set up the animations via the keyframe declarations. Note that the second time value is for animation-delay.

Screen Shot 2014-05-28 at 9.18.29 PMboat2


Next up we’ll animate the background image at the top from right to left.

Screen Shot 2014-05-29 at 1.58.07 PMboat

Let’s say we wanted to have the animation play backwards. The -webkit-animation-direction property lets you set whether the animation should play in reverse in some or all of its cycles. The value reverse will play all iterations of the animation in reverse. It’s worth noting though that the timing-functions will also be reversed, so in the example below it’d actually be acting like the ease-in function.

Screen Shot 2014-05-29 at 2.04.17 PM boatThe value alternate cycles back and forth were the odd cycles are normal and the even ones are backwards. For this to work, the animations iteration count needs to be higher than 1 (which it is by default, remember). In this case we’ll set it to infinite.

Screen Shot 2014-05-29 at 2.10.03 PM boat3

To switch it so that odd iterations are played in reverse and even ones are played forward, use the value alternate-reverse. For this project, we’re going to keep it as normal, which is the default value, so we don’t need this declaration.

Now, you’ll notice in the original example when the animation finishes, it goes back to the default position specified. By default, a CSS animation will not affect an element until the first keyframe is played, and will stop affecting it as soon as the last keyframe has completed. To get it to slowly halt (which ease-out does) and stay at that last keyframe, we need to use the -webkit-animation-fill-mode property. This lets you define the styles of the animated element before and after the animation runs. The value backwards causes the first keyframe to be immediately applied before the animation runs. This only affects animations with an animation delay value greater than zero, as it extends the values from the first keyframe into the animation delay.

In this first example, notice how due to the animation-delay it pauses for two seconds before starting.

Screen Shot 2014-05-29 at 2.20.57 PMScreen Shot 2014-05-29 at 2.20.50 PMasdsadIn the second example, notice the effect setting the -webkit-animation-fill-mode property to backwards has. It makes it so even though it still has a 2s delay, the elements style is based off the first keyframe during it.

Screen Shot 2014-05-29 at 2.24.00 PMasdsadd

Now, this doesn’t fix the awkward jump cut at the end, but the value forwards will. It makes the final keyframe’s styles still apply to the element after the animation is complete.  If you want it to have the effect of both backwards and forwards, you can use the value both. You can actually put the animation-fill-mode value in with the animation shorthand as well.

Screen Shot 2014-05-29 at 2.27.39 PM  or Screen Shot 2014-05-29 at 2.31.00 PMsssss


Next we’re gonna animate the frog, who’s current currently positioned off screen with a left: -15%. Because of this, we don’t actually need to include the 0% start keyframe, since by not putting it its value will just be taken from the styling already applied.

Screen Shot 2014-05-29 at 2.50.41 PM

First, we’ll add a keyframe to move him onto the screen. Then, we’ll add a second one to make him look like he’s floating up and down. You can list them together in the animation shorthand by comma separating them.

Screen Shot 2014-05-29 at 2.56.38 PM

Screen Shot 2014-05-29 at 2.55.42 PM

sdsdsdsdds

All animations by default run as soon as the page loads. The -webkit-animation-play-state property lets you set that. The default value is running, which plays the animation as soon as the page loads. The value paused tells the browser not to immediately run the animation. This property’s value can also be added to the animation shorthand property. You can then resume the animation with a state change (like the hover pseudo-class) or javascript. Notice below how the background image animation doesn’t play.

Screen Shot 2014-05-29 at 3.15.56 PM sdsdsdsddssaas

And holy shit, just like that I’m done another two sections. Yeaaaaa baby.

Advertisements

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.