> For the complete documentation index, see [llms.txt](https://dtian.gitbook.io/daily-report-1/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dtian.gitbook.io/daily-report-1/day-10-5-9.md).
# Day 10 - 5/9
Target: Complete CSS
Progress:
1. Form
* `box-sizing: border-box;` : size of box now includes all padding, border and content
* `box-sizing: content-box;` : size of box only contains content size
* outline: none; : remove the default blue outline when an input is clicked
* `input:focus {}` : set the behavior of inputs when clicked
* use `background-image` and `background-position` to insert an image to input
2. counters: to count the time one element is used
* always start with `counter-reset: name;`
* `counter-increment: name;` : insert name of needed element
* `content: "";` : decide what gonna show up when the element is use
* counter() : add value of name to content
* counters() : add string to content
3. Specificity
* hierarchy: when 2 or more css rules point to the same element, the one with highest specificity value will take effect.
* the order: Inline style; ID; Class, pseudo-classes, attribute selectors; Elements, Pseudo-elements
* use `!important` to override Inline style
4. Math
* calc() : perform + - \* / calculation, and use the result as value
* max()
* min()
5. Border images: specify an image as border
* `border-image: border-iamge-source border-image-slice border-image-width border-image-outset border-image-repeat;`
6. `background:` : to add multiple background images
7. Color:
* currentcolor : hold the current value of the color of an element
* inherit : inherit the value from its parent element
8. Gradient
* `linear-gradient(direction, color1, color2, ...);` : default direction is top to bottom; can change direction to angle
* `linear-gradient(direction, rgba1, rgba2);` : to change the transparency
* `repeating-linear-gradient(color1, color2, color3, ...);` : to repeat
9. Shadow
* `text-shadow: x y blur color, x y blur color, ...;` : shadow effect and multiple effect
* `text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;` : border around text
* `box-shadow: x y blur color, x y blur color, ...;` : 1 or multiple shadows
* `box-shadow: x y blur spread color;` : change the size of shadow
* `box-shadow: inset;` : make the shadow be inner shadow
10. Text overflow
* `text-overflow: clip;` : cut the overflow part
* `text-overflow: ellipsis;` : change the overflow to three dots
* `:hover {overflow: visible;}` : make the text visible when hovering
11. Word wrap
* `word-wrap: break-word;` : break the long word when exceed line limit
12. Word-break
* `word-break: keep-all;` : keep all the word when exceed line limit
* `word-break: break-all;` : break all the word when exceed line limit
13. Writing mode
* `writing-mode: horizontal-tb; / vertical-rl;`
14. 2D transform
* `transform: translate(x, y);` : move an element from current position to target position
* `transform: rotate(angle);` : rotate an element clockwise or counter-clockwise
* `transform: scale(a, b);` : increase or decrease the size of an element multiple times
* `scaleX(n); scaleY(n);` : scale width or height
* `skewX(angle); skewY(angle);` : skew the element
* `skew(Xangle, Yangle);`
* `matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY());`
15. 3D tranform
* `rotateX(angle)`
* `rotateY(angle)`
* `rotateZ(angle)`
16. Transition: make a smooth tranform
* `transition: property duration timing-function delay;`
* `transition-timing-function` : linear (same speed from start to end), ease (slow start, fast, slow end), ease-in (slow start), ease-out (slow end), ease-in-out (slow start, slow end)
17. Animation: allow an element change from one style to another
* `@keyframe example {from {} to {}}`
`div {`
`animation-name: example;`
`animation-duration: 3s;`
`}`
* `@keyframe example{`
`0% {}`
`25% {}`
`100% {}`
`}`
`div {`
`animation-name: example;`
`animation-duration: 3s;`
`}`
* `animation-delay: ns;` : n negative, the animation play but skip first n seconds
* `animation-iteration-count: n;` : animation play n times before stop; or 'infinite' to play infinitely
* `animation-direction: reverse / alternate` (forward then backward)/ `alternate reverse` (backward then forward);
* `animation-timing-function: ;`
* animation-fill-mode: none / forwards (element keep the style set by the last keyframe) / backwards (element get the style set by the first keyframe) / both
* `animation: name duration timing-function delay iteration-count direction;`
18. Object-fit
* fill : image is resized to fit, can be stretched or squished
* contain : keep aspect ratio but resized to fit
* cover : keep aspect ratio, can be clipped to fit
* none : not resized
19.Object-position
* `object-fit: cover;`
* `object-position: x% y%;`
20. Mask image
``
`
`
`