CSS3 Flashcards
Border Radius
defines rounded border corners. The curve of each corner is defined using one or two radii, defining its shape: circle or ellipse.
Box Shadow
horizontal offset: positive right; negative left
vertical offset: positive below; negative above
blur radius: 0 (less blur) to posNum (most blur)
spread radius: positive increase shadow; negative decrease shadow
Transition
place the transition property on the selectors you want to give a timing transition
ex: div {
transition: background-color 0.5s ease;
background-color: red;
}
div:hover {
background-color: green;
}
pseudo selectors: :before, :after, :nth-child
RESEARCH
classname patterns like BEM
RESEARCH
vendor prefixes
RESEARCH
explain event bubbling
RESEARCH
explain event delegation
RESEARCH
give an example of when it’s appropriate to apply styles to a node like button { … } as opposed to using a unique classname .button { … }
RESEARCH
should be able to implement a sticky footer
RESEARCH
should be able to implement a button that depresses when clicked
RESEARCH
should be able to implement a dropdown menu
RESEARCH
css selectors parts: ~=, |=, ^=, $=
RESEARCH
pseudo selectors: :not
RESEARCH
@media queries
RESEARCH
animations
RESEARCH
data attributes
RESEARCH
What’s the difference between “resetting” and “normalizing” CSS? Which would you choose, and why?
Resetting - removes all styles from every element - margins, padding, etc.
Normalizing - makes elements render across browsers
Describe floats and how they work.
“push” an element to the side you’ve chosen, either left or right.
Describe z-index and how stacking context is formed.
z-index is for visual depth. Because some elements overlap, because some elements are nested within each other, there’s a natural visual depth that builds, where you can see some elements on top or behind other ones.
What are the various clearing techniques and which is appropriate for what context?
is a way for an element to automatically clear its child elements, so that you don’t need to add additional markup. It’s generally used in float layouts where elements are floated to be stacked horizontally.
