css Flashcards
inline-flex
makes the container to be like that of its content
what browser is best for grid layout trouble shooting?
Fire fox bababababayyyyy
View bax svg
study this
svg stripping to minimize file size
title desc
svg g tags
grouping content like layers in illustrator
svg readymade shapes
path, rect, circle, ellipse, line, polyline, and polygon
best way to upload svgs?
object tags
clip-path
The clip-path property clips a region of an element that sets the visible and hidden parts of the element. Parts that are inside the region are shown, while those outside are hidden. While this property has many possible values, let’s get started with the keyword values
mask
The mask property hides a part or all of an image by masking it at specified coordinates. The value for mask can be many things, including an SVG or a gradient.
how do you blur a background image
background-filter Blur()
Timing transition key word ease
start slow, speed up, slow down.
Timing transition key word linear
Consistent animation change.
Timing transition key word ease in
start slow then seed up at the end
Timing transition key word ease out
Start fast then go slow at the end
Timing transition key word ease in out
same as ease but slower start
what are the transition properties
selector {
transition: property duration timing delay;
}
what are the transform properties
transform: translate(x-axis, y-axis);
transform: scale(x-axis, y-axis);
transform: rotate(deg);
transform: skew(x-deg, y-deg);
what are the different translate options
transform: translate() -moves an element on the 2D plane
transform: translate3d() -moves an element in 3D space
transform: translateX() -moves an element horizontally
transform: translateY() -moves an element vertically.
transform: translateZ() -moves an element along the z-axis
what are the scale options
transform: scale() grows an element on the 2D plane
transform: scale3d() grows an element in 3D space
transform: scaleX() stretches an element horizontally
transform: scaleY() stretches an element vertically.
transform: scaleZ() stretches an element along the z-axis
does transform stay in normal document flow?
Yaaaaaaaassssssssss
what are the rotate options
transform: rotate() spins an element on the 2D plane
transform: rotate3d() spins an element in 3D space
transform: rotateX() spins an element horizontally
transform: rotateY() spins an element vertically.
transform: rotateZ() spins an element along the z-axis
does the order of transformations or transitions matter?
yaaaaaaassssssss
what does a css reset do?
Resets the css so that it renders the same on all browsers.
