New things in scss

CSS is still evoluting.

CSS 2 to CSS 3
From css to preprocessors
Post processor
CSS 4

Also the number of possibilities in css is high. And probably as me, you have missed some handy or cool stuff css3 or more have brought to css.

Boostrap 4

What changes in v4 version
- sass
- grid with flexbox (allow vertical alignement)
- grid unit less columns
- rem font sizing
- new small screen breakpoints

CSS Grid

Learn grid with grid garden learning game
use of css grid in production right now ? https://www.smashingmagazine.com/2017/06/building-production-ready-css-grid-layout
another tutorial on css grid https://hacks.mozilla.org/2017/10/an-introduction-to-css-grid-layout-part-1/
Flexbox

Learn flexbox with flexbox froggy learning game

CSS counter

When you have a list of item and use a content tag to define content with css. And what if you want to add to this content the number of item in a list without changing the js.

The css counter are exactly for that.

transition

Understand transition

Nice visualisation to choose a transition timing function or design custom bezier function

Cubic bezier generator

http://cubic-bezier.com/#.95,.23,.83,.67

object fit

Object fit allow to simulate cover property of background images It is good to make framing of an image or video inside an object...

The IA Fall back

blend modes

Blend mode are photoshop like fusion mode (multiply, transfer...) that allow to have an opacity without flattening everything

https://medium.com/@bennettfeely/css-blend-modes-could-be-the-next-big-thing-in-web-design-6b51bf53743a

More in depth tuto https://css-tricks.com/basics-css-blend-modes/

Example for a video with a gradient with mix-blend-mode

Original tuto

The html :

<figure>
    <video>
        <source src="lina.webm">
        <source src="lina.mp4">
    </video>
</figure>

The CSS :

figure {
    background: linear-gradient(90deg,#00f 50%,transparent 50.1%);
}
figure video {
  /* Mind we use mix-blend-mode as video is a normal html element
  not a background */
  mix-blend-mode: overlay;
}