Advanced CSS
Cascading Style Sheets, used to specify the layout of web pages.
-
Introduction
- Write the style.css on the order it will appear on the page.
- Write the elements that we want to be visible, specify their corners.
- Sintax: polygon(x y, x y, x y, x y)
a) superior left corner.
b) superior right corner.
c) inferior right corner.
d) inferior left corner. - It is also possible to create other figures, using 3 or more points.
- Some figure examples: http://bennettfeely.com/clippy.
- You can create an element div and write: transform: translate(position, position).
Example: transform: translate(-50%, -50%).
With this, the element will base itself on the browser size, and not on the elements that it is inside of.
On this case, -50% will shift half of the width to the left, and the other -50% will shift 50% of the element's height to the top, centralizing it.
Clip-path:
Centering things
Selectors
How to select all divs with a certain class, ID and more.
Keyframes
Animation, animation-name, transform examples, repeting animations. Outdoor project example.
Animated Button (from Outdoors project)
Display inline, inline-block and block, pseudo-elements, ::after, hover transitions, difference between position absolute and relative
Transform
transition(), scale(), rotate()
Transitions
ease, ease-in, ease-out, linear
Values
rem, em, vh, vw