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.

    Clip-path:
    • 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.

    Centering things
    • 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.

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

Inheritance

Herança

Background Properties

background-blend-mode

CSS Properties

CSS Properties

Media Queries

Mobile-first, desktop-first, max-width, min-width