css3 fundamentals

Question 1

Scale an item

Answer 1

transform: scale( val ); // or (xScale, yScale)

Question 2

Skew an item

Answer 2

transform: skew(val); // or skewX or Y

Question 3

How can you transform an element with perspective and rotation?

Answer 3

transform: perspective(100px) rotateX(45deg); // p needs to come first.

Question 4

transform-style: preserve-3d; Does what?

Answer 4

If it’s on a parent with 3D effects, the children can have their own 3D effects based on parent’s space.

Question 5

How can you change the vanishing point in a 3D transform?

Answer 5

Use perspective-origin: x y || left bottom || 25% 75%

Question 6

What is the property for having an element animate?

Answer 6

animation: name-of-animation 3s numIterations

Question 7

What is the format for an animation’s keyframes?

Answer 7

@keyframes name-of-animation { 0% { prop: val; } }

Question 8

For vanishing point to be in the very center, do what?

Answer 8

width and height of child should be 100% width and height of parent.

Question 9

Hide an element when it’s flipped away from view in 3d space.

Answer 9

backface-visibility: hidden;

Question 10

Create a flexbox container

Answer 10

display: flex

Question 11

What property controls the direction a flexbox goes?

Answer 11

flex-direction: row, row-reverse, column, column-reverse

Question 12

What if you don’t want flexbox to keep items on one line?

Answer 12

flex-wrap: wrap (nowrap or wrap-reverse)

Question 13

How can you set sequence of items using flexbox?

Answer 13

order: ;

Question 14

What is flex-flow property?

Answer 14

A combination or shorthand for flex-direction and flex-wrap. E.g. column nowrap or row wrap;

Question 15

what is flex-basis?

Answer 15

It specifies the main-size of a flex item. Main size is size along “main” axis.

Question 16

what is flex property and what are defaults?

Answer 16

Shorthand for flex-grow, flex-shrink, and flex-basis combined. Default is: 0 1 auto;

Question 17

What are values for justify-content in flexbox?

Answer 17

flex-start, flex-end, center, space-between, space-around

Question 18

what is flexbox align-self property?

Answer 18

Enables individual item to over-ride flexbox alignment.

Question 19

How can you vertically align flexbox items?

Answer 19

align-items: flex-start, flex-end, center, baseline, stretch

Question 20

What does flexbox align-content property do?

Answer 20

It aligns along the cross-axis when there is more than one row. Note difference with align-items.

Question 21

Use what property and value to center items along main axis in flexbox?

Answer 21

justify-content: center;

Question 22

Use what property/value to center items along cross axis in flexbox?

Answer 22

align-items: center;

Question 23

How is align-content different from align-items?

Answer 23

align-content only applies when items wrap.

Question 24

What does this mean? flex: 2 0 auto;

Answer 24

If applied to an item in a flex-box container, it will be twice as big on main axis than elements with flex-grow of 1.

Question 25

What are the values of transition property?

Answer 25

Property-name, duration, transition-timing-function, delay

Question 26

What animation aliases make it easy to go between just two states?

Answer 26

@keyframes name-of-anim { from { … } to {…} }

Question 27

Animation property for whether to go back and forth

Answer 27

animation-direction: normal, reverse, alternate, etc

Question 28

When should you add will-change property?

Answer 28

At the last minute before a change will happen to avoid taxing memory, e.g. by adding it with javascript.

Question 29

What are the values for box-shadow property?

Answer 29

x offset, y offset, blur radius, spread radius, color

Question 30

What are the values for box-shadow property?

Answer 30

x offset, y offset, blur radius, spread radius, color

Question 31

What is intuitive alternative to rgba() color setting?

Answer 31

hsla( 50, 60%, 50%, 1); // hue, saturation, lightness, alpha

Question 32

Set animation easing with what property?

Answer 32

-webkit-animation-timing-function: ease-in, ease-out, etc;

Question 33

Easiest way to center an element on both axes?

Answer 33

Set parent to display: flex; Set element to margin: auto;

Question 34

what are the -of-type properties?

Answer 34

:nth-of-type(n), :first-of-type, :last-of-type, :nth-last-of-type and :only-of-type (there is only one of it)

Question 35

create inner shadow

Answer 35

box-shadow: inset 0 0 #10px rgba(0,0,0,0.5); // optional spread variable would come after blur amount of 10px.

Question 36

target a checkbox

Answer 36

input[type=checkbox] { … }

Question 37

target form fields but not submit/upload buttons

Answer 37

input:not([type=submit]):not( [type=file] );

Question 38

Target first letter for an initial cap or drop-cap

Answer 38

p:first-of-type:first-letter

Question 39

Remove space between table cells

Answer 39

table { border-collapse: collapse;

Question 40

make a media query

Answer 40

@media screen and (min-width: 728px) and (max-width: 1024px) { … }

Question 41

Create a color gradient, left to right, blue for first quarter, then green, then yellow

Answer 41

background: linear-gradient( to right, blue, green 25%, yellow); note that space matters before open parens;

Question 42

What is the default value of ‘align-items’?

Answer 42

stretch. By default, items fill space on cross-axis;

Question 43

how do you color in an svg solid?

Answer 43

.svg-solid { fill: white; }

Question 44

How is flex: 1 different from saying flex-grow: 1 ?

Answer 44

With one number, flex basis is set to 0%.

Question 45

Create a layout with 3 equal columns using flex property.

Answer 45

flex: 0 0 33.33333%; // or flex: 1 0 33.33333% (if you want rows with only 2 or 1 columns to fill all the space)

Question 46

Use calc to set width to 1/3 of width accounting for a 320px sidebar

Answer 46

width: calc( (100% -320px) / 3);

Question 47

Set something’s height to 100% of view port using vh

Answer 47

width: 100vh;

Question 48

Find all elements with class .arrow that follow .box as siblings.

Answer 48

.box ~ .arrow

Question 49

Find all a tags that link to ‘amazon.com’, ‘www.amazon.com’, etc

Answer 49

a[href*=”amazon.com”]

Question 50

Select all list items only if there are 5 or more

Answer 50

li: nth-last-child(n+5), (select first through fifth)
li: nth-last-child(n+5) ~ * { … } (select all after the fifth)

Question 51

li:nth-child(-n + 5) selects what?

Answer 51

Only list items 1 through 5, not sixth and beyond.

Question 52

Find all tags that link somewhere beginning with ‘http’

Answer 52

a[href^=”http”]

Question 53

Find all images that end in .jpg

Answer 53

img [ src$=”jpg” ] (note: can’t have space between words)

Question 54

explain background-origin vs. background clip

Answer 54

Both take border-box, padding-box, or content-box. Origin places image based on setting; clip overlaps padding or not depending.