States, Transition, Media Query

3.17 States​

active: when you click, background color or something change

->button:active {background-color: tomato;}

hover: when mouse cursor is on top of the button

focus: when the button is selected by the keyboard

visited: only appies with link.

->a:visited {color: tomato;}

focus-within : applies with father

is a state for an element has children that is focused.

= when children is focused, father is changed.

​

​

4.0 Transition

A way we can animate to change from one state to the other.

-> should do without state

eg.

{transition: background-color (what you want to select) 10s (how long) ease-in-out}

{transition: background-color 10s ease-in-out, color 5s ease-in-out}

{transition: all 10s ease-in-out}

​

4.1 Transitions part2

ease-in function (ease-in, ease-out, ease-in-out)

basically tells to browser, how to animate change.

linear - move linear way

​

https://matthewlein.com/tools/ceaser

 

Ceaser - CSS Easing Animation Tool - Matthew Lein

Ceaser CSS Easing Animation Tool Choose an easing type and test it out with a few effects. If you don’t quite like the easing, grab a handle and fix it. When you’re happy, snag your code and off you go. Now that we can use CSS transitions in all the modern browsers, let’s make them pretty. I love th...

matthewlein.com​

​

​

​

4.2 Transformations

Something you can modify that doesn't affect other element

transform: rotateX(50deg)

-> rotate it 50 degree in the X-axis

(you can use X,Y,Z-axis)

scale(make it bigger/smaller)

translateX(-1000px)

-> move it to the left side by 1000px

​

you can combine it with transition

img {transition: transform 5s ease-in-out;}

img: hover{transform: rotateZ(90deg);}

​

but remember 'transition'should be on root!

​

​

​

4.3

Rules to create animation -> '@kyeframes name of animation'+'from {}' + 'to {}

eg. @kyeframes sueprsexycoinflip{}

https://animista.net/play/basic/scale-up/scale-up-ver-center​

​

​

4.5

@midea screen and (max-width:400px) {div{ background-color: tomato;}}

-> if the screen has less than 400px, the box color will be changed

 

6.40 Media Query

 

If your screen is big/small -> something will be changed

In this case, when screen is small -> text will be disappeared.

 

@media screen and (max-width: 645px) {

#no-mobile {

display: none;

}

}

-> If screen width over 645px, #no-mobile will be displayed

If screen width under 645px, #no-mobile will not be displayed

(It means you can see only original screen(without #no mobile text)