css3 fundamentals Flashcards
Scale an item
transform: scale( val ); // or (xScale, yScale)
Skew an item
transform: skew(val); // or skewX or Y
How can you transform an element with perspective and rotation?
transform: perspective(100px) rotateX(45deg); // p needs to come first.
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.
How can you change the vanishing point in a 3D transform?
Use perspective-origin: x y || left bottom || 25% 75%
What is the property for having an element animate?
animation: name-of-animation 3s numIterations
What is the format for an animation’s keyframes?
@keyframes name-of-animation { 0% { prop: val; } }
For vanishing point to be in the very center, do what?
width and height of child should be 100% width and height of parent.
Hide an element when it’s flipped away from view in 3d space.
backface-visibility: hidden;
Create a flexbox container
display: flex
What property controls the direction a flexbox goes?
flex-direction: row, row-reverse, column, column-reverse
What if you don’t want flexbox to keep items on one line?
flex-wrap: wrap (nowrap or wrap-reverse)
How can you set sequence of items using flexbox?
order: ;
What is flex-flow property?
A combination or shorthand for flex-direction and flex-wrap. E.g. column nowrap or row wrap;
what is flex-basis?
It specifies the main-size of a flex item. Main size is size along “main” axis.
what is flex property and what are defaults?
Shorthand for flex-grow, flex-shrink, and flex-basis combined. Default is: 0 1 auto;
What are values for justify-content in flexbox?
flex-start, flex-end, center, space-between, space-around
what is flexbox align-self property?
Enables individual item to over-ride flexbox alignment.
How can you vertically align flexbox items?
align-items: flex-start, flex-end, center, baseline, stretch
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.
Use what property and value to center items along main axis in flexbox?
justify-content: center;
Use what property/value to center items along cross axis in flexbox?
align-items: center;
How is align-content different from align-items?
align-content only applies when items wrap.
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.
What are the values of transition property?
Property-name, duration, transition-timing-function, delay
What animation aliases make it easy to go between just two states?
@keyframes name-of-anim { from { … } to {…} }
Animation property for whether to go back and forth
animation-direction: normal, reverse, alternate, etc
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.
What are the values for box-shadow property?
x offset, y offset, blur radius, spread radius, color
What are the values for box-shadow property?
x offset, y offset, blur radius, spread radius, color
What is intuitive alternative to rgba() color setting?
hsla( 50, 60%, 50%, 1); // hue, saturation, lightness, alpha
Set animation easing with what property?
-webkit-animation-timing-function: ease-in, ease-out, etc;
Easiest way to center an element on both axes?
Set parent to display: flex; Set element to margin: auto;
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)
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.
target a checkbox
input[type=checkbox] { … }
target form fields but not submit/upload buttons
input:not([type=submit]):not( [type=file] );
Target first letter for an initial cap or drop-cap
p:first-of-type:first-letter
Remove space between table cells
table { border-collapse: collapse;
make a media query
@media screen and (min-width: 728px) and (max-width: 1024px) { … }
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;
What is the default value of ‘align-items’?
stretch. By default, items fill space on cross-axis;
how do you color in an svg solid?
.svg-solid { fill: white; }
How is flex: 1 different from saying flex-grow: 1 ?
With one number, flex basis is set to 0%.
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)
Use calc to set width to 1/3 of width accounting for a 320px sidebar
width: calc( (100% -320px) / 3);
Set something’s height to 100% of view port using vh
width: 100vh;
Find all elements with class .arrow that follow .box as siblings.
.box ~ .arrow
Find all a tags that link to ‘amazon.com’, ‘www.amazon.com’, etc
a[href*=”amazon.com”]
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)
li:nth-child(-n + 5) selects what?
Only list items 1 through 5, not sixth and beyond.
Find all tags that link somewhere beginning with ‘http’
a[href^=”http”]
Find all images that end in .jpg
img [ src$=”jpg” ] (note: can’t have space between words)
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.
