CSS More Properties

Question 1

What is Alpha Channel

Answer 1

In RGB there is an “a (alpha channel)” which control transparency. 0 being completely transparent, and 1 being non transparent.
rgba (255,255,255,0.7)

Question 2

Define Opacity

Answer 2

Opacity is a property set on an element which governs transparency for entire element. 0-1, 1 being non transparent.

Question 3

How do you change transparency on hexadecimal colors

Answer 3

00-FF, ff being non transparent

Question 4

List position properties

Answer 4

Sets how an element is positioned.
Static
Absolute 
Fixed 
Sticky

Question 5

Static Position

Answer 5

Static - default (top, right, bottom, left has no effect)

Question 6

Relative Position

Answer 6

Relative - Allows TRBL to have effect relative to original position

Question 7

Absolute Position

Answer 7

Absolute - Element is removed from document flow. TRBL effects position relative to closest ancestor

Question 8

Fixed Position

Answer 8

Fixed - Element is removed from document flow. Similar to absolute but not relative to any ancestor position. Stays in place when scrolling. ie Nav Bar

Question 9

Sticky Position

Answer 9

Sticky - Starts as static then behaves like fixed.

Question 10

What are the four things we can specify in Transitions.

Answer 10

1. Property we want to animate
2. Duration set in seconds (ms)
3. Transition-timing-function
4. Delay (default no delay)

Question 11

What does transform do?

Answer 11

Transform can rotate, translate(move), scale(size), skew, etc.

transform: translateX(2em);
transform: skewY(45deg);

Question 12

How do you combine transform properties. Rotated 90 degrees and half scale.

Answer 12

You can combine by a space.

transform:rotate(90deg) scale(0.5);

Question 13

Transform - flip upside down, double the size, skew by 45 deg on X-axis and 25 deg on Y-axis, and shift it 300 pixels to the left.

Answer 13

transform:rotate(180deg) scale(2) skewX(45deg) skewY(25deg) translate(300px)

Question 14

How do you add a Background image.

Answer 14

background-image: url(https://image.here.com);

Question 15

What are common background sizing property options?

Answer 15

background-size: contain; (scale everything large as possible without cropping or stretching, but repeats.)
background-size: cover; (scale to largest without stretching but will crop.)
background-size: 30% (shrink to 30% of original.)
background-size: 200px 100px (x and y sizing.)

Question 16

How to stop repeating background?

Answer 16

Background-repeat: no-repeat;

Question 17

How do you set position of background?

Answer 17

background-position: bottom;
background-position: top;
background-position: left;
background-position: right;

Question 18

What is shorthand for background property?

Answer 18

background: green no-repeat url(https://image.com) center/cover
* background size has to come after background position followed by a ‘/’. All other order does not matter.