Week 6 CSS Position, Gradients, Transforms

More about Advanced CSS & JavaScript

I’d like to use Gradients for my background page. To use the gradients, you need at least two colors in order to activate the linear gradients.

By default, gradients are created from top to bottom. So in this example,

blue — red — yellow will be presented.

however, if you want your gradients to flow in other direction, like diagonal gradients, you simply want your linear gradient to have (to bottom right, blue, red);

box-shadow

To have shadows around your elements, we can use the box-shadow CSS property.

A box-shadow is described by X and Y offsets relative to the element.

box-shadow: 1px 1px 1px #000;

top — bottom — right sides — color;

Transform

Transform comes important when we want to change the look of our HTML elements. And with transform, we can even create small animations.

• scale
• rotate
• skew
• translate

are the main properties of transform.

transform: scale(x,y);

Can change the size of our element.

x = width
y = length

The values we set to these parameters change the element’s size.

(2,2) : will double the size from the original.
(0.5, 0.5) : will shrink the size in half.

transform: rotate(degrees);

rotate in degrees clockwise.

transform: skew(x-degrees, y-degrees);

Skew changes the perspective of the element.

Transition

Transition specifies the transition between two states of an element.

It begins with a starting state and an end state- how we want it to look.

transition-property:property

simple animation

transition-duration: time in milliseconds

The time it takes for the animation to occur, in milliseconds

transition-timing-function: timing function

The way in which we want the timing to occur. (Think of it as acceleration or deceleration).

• linear, ease-in, ease-out, cubic-bezier

CSS Filters

The CSS Filter property adds effects to elements. This is commonly used to change the style of images, borders, or backgrounds.

filter: blur(pixels)
: blur effect to an element. The value determines how many pixels in an area blend; the larger, more blur

filter: brightness(number between 0 and 1)
: changes the brightness of an image or element.
0 will make the image absolutely black, and 1 will unchanged the image.

filter: contrast(number between 0 and 1)
: changes the contrast of an image or element.
0 = gray; 1 = unchanged.

filter:opacity(percentage)
: make an image or element partially or completely transparent.
0% = transparent
100% = unchanged;