CSS3 Flashcards
hsl(arg1, arg2, arg3)
hue, saturation, and lightness
repeating-linear-gradient(deg, color px, color px, color px)
causes a color shift from one side of a screen to another
transform: scale(num)
transforms an element to the set number in scale
transform: skewX(deg)
skews the select element at a certain number of degrees along it’s X axis
transform: skewY(deg)
skews the select element at a certain number of degrees along it’s Y axis
box-shadow(offset x, offset y, blur-radius, spread radius, blue)
sets the box shadow, along with the element’s orientation, color, and spread.
::after & ::before
pseudo elements that are tacked on to add extra details to an element before and after
@keyframes
controls what happens during an animation
animation-name
sets the name of the animation, which is later used by @keyframes to tell CSS which rules go with which animations.
animation-duration
sets the amount of time an animation runs for
animation-fill-mode
specifies the style applied to an element when the animation has finished.
animation-iteration-count
control how many times you would like to loop through the animation.
animation-timing-function
change the speed of an animation over its duration. Can include a cubic bezier function to fine tune the animation
@media
consist of a media type, and if that media type matches the type of device the document is displayed on, the styles are applied. You can have as many selectors and styles inside your media query as you want.
Viewport units
- vw (viewport width): 10vw would be 10% of the viewport’s width.
- vh (viewport height): 3vh would be 3% of the viewport’s height.
- vmin (viewport minimum): 70vmin would be 70% of the viewport’s smaller dimension (height or width).
- vmax (viewport maximum): 100vmax would be 100% of the viewport’s bigger dimension (height or width).
