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

1. 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

1. 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

1. Math

• calc() : perform + - * / calculation, and use the result as value

• max()

• min()

1. Border images: specify an image as border

• border-image: border-iamge-source border-image-slice border-image-width border-image-outset border-image-repeat;

1. background: : to add multiple background images

2. Color:

• currentcolor : hold the current value of the color of an element

• inherit : inherit the value from its parent element

1. 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

1. 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

1. 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

1. Word wrap

• word-wrap: break-word; : break the long word when exceed line limit

1. 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

1. Writing mode

• writing-mode: horizontal-tb; / vertical-rl;

1. 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());

1. 3D tranform

• rotateX(angle)

• rotateY(angle)

• rotateZ(angle)

1. 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)

1. 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;

1. 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%;

1. Mask image

<div class="mask">

<img src="img.jpg">

</div>

.mask{

mask-image: url(maskimg.png);

mask-repeat: no-repeat;

}

1. Multiple columns

• column-count: n; : number of columns used

• column-span: : number of columns that the element spans accross

• columns: column-width column-count

1. Var() function: useful when a color code is used multiple times

• global var

:root {

--name1: #1e90ff;

--name2: #fefefe;

}

• var(--name) : call for the variable

1. Media Queries

• @media not|only all|print|screen|speech and|not|only (expression) {}

• use min-width for expression to design for mobile first

1. Grid view