What are the four values of text-shadow, in order?
Horizontal offset, vertical offset, blur radius, color.
Negative horizontal offset vs. negative vertical offset in text-shadow
A negative horizontal offset moves the shadow to the left; a negative vertical offset moves it up.
What does a blur radius of 0px produce, and what happens as it increases?
0px gives a shadow with a sharp edge (no blur); the greater the value, the greater the blurring of the edges.
Which property makes rounded corners, and when is an end completely round?
border-radius. Any value greater than half of the shortest side length produces a completely round end.
How do you round only one corner?
Use border-top-left-radius, border-top-right-radius, border-bottom-left-radius or border-bottom-right-radius.
box-shadow: which elements can have it, and what do positive offsets do?
Any block-level element. A positive horizontal offset moves the shadow right; a positive vertical offset moves it down.
What is a linear gradient, and what are color-stops?
A type of image that gradually transitions from one color to the next horizontally, vertically or diagonally. Color-stops are the points (pixels or percentages along the gradient line) where colors change.
Where can gradients be used?
In any property that accepts an image.
What are vendor prefixes used for?
For properties that are still being finalized in the CSS specification but have already been implemented in various browsers (e.g., -webkit-, -moz- in the code figures).
Why is a CSS3 gradient background written three times (-webkit-, -moz- and standard)?
Once for WebKit browsers (-webkit-gradient), once for Firefox (-moz-linear-gradient) and once in standard CSS3 (linear-gradient), because many CSS3 features were not yet finalized.
What is a radial gradient?
A gradient in which the color changes gradually from an inner point (the start) to an outer circle (the end).
The three values of radial-gradient in Fig. 5.6
The position of the start (e.g., center; or top, bottom, left, right), the start color, and the end color: radial-gradient(center, yellow, red).
What does -webkit-text-stroke do, and what two values did the example use?
A nonstandard WebKit property that adds an outline (text stroke) around text. Values: outline thickness (2px) and stroke color (black).
-webkit-box-reflect: first and second values
First: the direction of the reflection (above, below, left or right). Second: the offset — the space between the image and its reflection. Optionally a gradient.
With multiple background images, how are positions matched to images, and what does background-origin do?
The comma-separated background-position values match the order of the comma-separated images. background-origin decides where each image is placed using the box model (e.g., border-box or content-box).
How does border-image-slice divide the image?
Into nine regions — four corners, four sides and a middle (transparent unless specified) — using four inward offsets from top, right, bottom and left. No negative values; two values = top/bottom and left/right; percentages allowed.
Stretched vs. repeated image border
Stretched: the sides are stretched (distorted) to fit while the corners stay unchanged. Repeated (border-image-repeat: repeat): the tiles are repeated to fit, using partial tiles to fill excess space.
Order of values in the animation shorthand
animation-name, animation-timing-function, animation-duration, animation-delay, animation-iteration-count, animation-direction.
Which timing function is the default, and what does it do?
ease — starts slowly, increases speed, then ends slowly.
ease-in vs. ease-out vs. ease-in-out
ease-in: starts slowly, then speeds up. ease-out: starts faster, then slows down. ease-in-out: starts and ends slowly.
What do iteration-count infinite and direction alternate mean?
infinite repeats the animation continuously. alternate runs the animation in alternating directions each cycle (the default, normal, runs the same direction).
Can animation-play-state be part of the animation shorthand? What is its default?
No — it must be specified separately. It specifies whether the animation is paused or running, and defaults to running.
What does the @keyframes rule define?
The element's properties that will change during the animation, the values they change to, and when they change; it is followed by the animation's name.
Transition vs. animation
A transition specifies only the starting and ending values of the changing properties; an animation's keyframes control intermediate states throughout its duration.
Explain transition: transform 4s, opacity 2s;
The transform takes four seconds to apply and the opacity changes over two seconds, so the transform continues for another two seconds after the opacity change completes.
rotate and scale transformation functions
rotate receives degrees (negative values rotate left). scale: 1 = original width/height; values > 1 increase size, < 1 decrease size.
Which elements does :hover work with now?
Any element (it formerly worked only for anchor elements).
What does skew do?
Slants block-level elements at an angle horizontally (skewX) or vertically (skewY).
column-count, column-gap and column-rule
column-count: number of columns; column-gap: spacing between columns; column-rule: a line between each column.