css3 fundamentals Flashcards Preview

CSS & HTML > css3 fundamentals > Flashcards

Flashcards in css3 fundamentals Deck (54):
1

Scale an item

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

2

Skew an item

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

3

How can you transform an element with perspective and rotation?

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

4

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

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

5

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

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

6

What is the property for having an element animate?

animation: name-of-animation 3s numIterations

7

What is the format for an animation's keyframes?

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

8

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

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

9

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

backface-visibility: hidden;

10

Create a flexbox container

display: flex

11

What property controls the direction a flexbox goes?

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

12

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

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

13

How can you set sequence of items using flexbox?

order: ;

14

What is flex-flow property?

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

15

what is flex-basis?

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

16

what is flex property and what are defaults?

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

17

What are values for justify-content in flexbox?

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

18

what is flexbox align-self property?

Enables individual item to over-ride flexbox alignment.

19

How can you vertically align flexbox items?

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

20

What does flexbox align-content property do?

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

21

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

justify-content: center;

22

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

align-items: center;

23

How is align-content different from align-items?

align-content only applies when items wrap.

24

What does this mean? flex: 2 0 auto;

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.

25

What are the values of transition property?

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

26

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

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

27

Animation property for whether to go back and forth

animation-direction: normal, reverse, alternate, etc

28

When should you add will-change property?

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

29

What are the values for box-shadow property?

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

30

What are the values for box-shadow property?

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

31

What is intuitive alternative to rgba() color setting?

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

32

Set animation easing with what property?

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

33

Easiest way to center an element on both axes?

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

34

what are the -of-type properties?

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

35

create inner shadow

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

36

target a checkbox

input[type=checkbox] { ... }

37

target form fields but not submit/upload buttons

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

38

Target first letter for an initial cap or drop-cap

p:first-of-type:first-letter

39

Remove space between table cells

table { border-collapse: collapse;

40

make a media query

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

41

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

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

42

What is the default value of 'align-items'?

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

43

how do you color in an svg solid?

.svg-solid { fill: white; }

44

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

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

45

Create a layout with 3 equal columns using flex property.

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)

46

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

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

47

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

width: 100vh;

48

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

.box ~ .arrow

49

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

a[href*="amazon.com"]

50

Select all list items only if there are 5 or more

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

51

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

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

52

Find all tags that link somewhere beginning with 'http'

a[href^="http"]

53

Find all images that end in .jpg

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

54

explain background-origin vs. background clip

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