NEW-CURRENT FEATURES IN CSS

BY RAYPROUD

ЧТО ЕСТЬ CSS3 И КОГДА ЖДАТЬ CSS4?

НЕ ЖДАТЬ CSS4

ЧТО МЫ УЖЕ ВИДЕЛИ?

BORDER-RADIUS

BOX-SHADOW

TRANSFORM

LINEAR-GRADIENT

@FONT-FACE

RGBA

ANIMATION

@MEDIA QUERIES

TEXT-OVERFLOW

...

другой шрифт, ок?

я весь такой прозрачный

А ЧЕГО МЫ ЗДЕСЬ НЕ ВИДЕЛИ?

СВОЙСТВА ДЛЯ РАБОТЫ С ИЗОБРАЖЕНИЯМИ

СВОЙСТВА ДЛЯ РАБОТЫ С ПОТОКОМ

СВОЙСТВА ДЛЯ РАБОТЫ С

ТЕКСТОМ

BACKGROUND-BLEND-MODE

ЧТО ЕСТЬ В PHOTOSHOP?

ЧТО ЕСТЬ В CSS?

ОКЕЙ. А КАК ЭТИМ ПОЛЬЗОВАТЬСЯ?

.some-pic {
    width: 600px;
    height: 400px;
    
    background: linear-gradient( yellow, 
                yellowgreen, skyblue, violet, purple), 
                url(http://lorempixel.com/600/400);
    background-blend-mode: multiply;
}

1. ЗАДАЙТЕ 2 И БОЛЕЕ BACKGROUND'ОВ

2. УКАЖИТЕ РЕЖИМ BLEND'А

ОКЕЙ. А КАК ЭТИМ ПОЛЬЗОВАТЬСЯ?

.another-girl {
    width: 600px;
    height: 400px;
    background:  
      url(http://lorempixel.com/600/400/city),  
      url(http://lorempixel.com/600/400/business),  
      url(http://lorempixel.com/600/400/cats);
    background-blend-mode: multiply, color-burn;
}

1. ЗАДАЙТЕ 2 И БОЛЕЕ BACKGROUND'ОВ

2. УКАЖИТЕ РЕЖИМ BLEND'А

.img_first{
width: 600px;
height: 400px;
background:  
  linear-gradient(blue, grey),
  url(http://lorempixel.com/600/400/business);
background-blend-mode: overlay;
}

.img_first{
width: 600px;
height: 400px;
background:  
  url(http://lorempixel.com/600/400/business),
  linear-gradient(blue, grey);
background-blend-mode: overlay;
}

ПОСЛЕДОВАТЕЛЬНОСТЬ СЛОЁВ ИМЕЕТ ЗНАЧЕНИЕ

ЧТО Я ДОЛЖЕН ПОМНИТЬ?

1. ЕСЛИ УКАЗАН ОДИН РЕЖИМ BLEND'А, ТО ОН УКАЗАН ДЛЯ ВСЕХ СЛОЕВ

2. БРАУЗЕР БУДЕТ ИСПОЛЬЗОВАТЬ N-1 РЕЖИМОВ, ГДЕ N - КОЛИЧЕСТВО СЛОЁВ

3. "ЛИШНИЕ" РЕЖИМЫ БУДУТ ИГНОРИРОВАТЬСЯ

4. В БРАУЗЕРАХ, КОТОРЫЕ НЕ ПОДДЕРЖИВАЮТ BLEND, БУДУТ РАБОТАТЬ ПРАВИЛА MULTIPLE BACKGROUNDS

ЧТО НАСЧЕТ ПОДДЕРЖКИ БРАУЗЕРАМИ?

FILTER

ЧТО ЕСТЬ В PHOTOSHOP?

ЧТО ЕСТЬ В CSS?

А ЧТО ЕЩЕ ЕСТЬ В PHOTOSHOP?

А ЧТО ЕСТЬ В CSS?

ОКЕЙ. А КАК ЭТИМ ПОЛЬЗОВАТЬСЯ?

.some-pic {
    filter: blur(1px) brightness(2) 
    grayscale(40%) opacity(90%) 
    saturate(1.5);
}

1. УКАЖИТЕ ФИЛЬТР

2. ЕСЛИ ХОТИТЕ ИСПОЛЬЗОВАТЬ НЕСКОЛЬКО - ИСПОЛЬЗУЙТЕ НЕСКОЛЬКО

ВАС НИКТО НЕ ОСУДИТ

КРОМЕ ЮЗЕРОВ СО СТАРЫМ БРАУЗЕРОМ

ПОКАЖИ ЕЩЕ! СЛАЙДЫ! СЛАЙДЫ!

.some-pic {
    filter: blur(1px) brightness(2) 
    grayscale(40%) opacity(90%) 
    saturate(1.5);
}

ПОКАЖИ ЕЩЕ! СЛАЙДЫ! СЛАЙДЫ!

.some-pic {
    filter: hue-rotate(100deg);
}

ПОКАЖИ ЕЩЕ! СЛАЙДЫ! СЛАЙДЫ!

.some-pic {
    filter: grayscale(100%);
}

ПОКАЖИ ЕЩЕ! СЛАЙДЫ! СЛАЙДЫ!

.some-pic {
    filter: invert(60%);
}

ЧТО Я ДОЛЖЕН ПОМНИТЬ?

1. ФИЛЬТР OPACITY НЕ ДАСТ ТЕБЕ НИКАКИХ Z-INDEX ХАКОВ

2. ФИЛЬТР DROP-SHADOW ДОБАВЛЯЕТ ТЕНЬ ПО КОНТУРУ ИЗОБРАЖЕНИЯ, А НЕ БЛОКА (КАК BOX-SHADOW)

3. ВАШИ КАРТИНКИ НЕ СЛОМАЮТСЯ В СТАРЫХ БРАУЗЕРАХ

4. ФИЛЬТРЫ БУДУТ РАБОТАТЬ КАК С <img> ТАК И С ФОНОВЫМ ИЗОБРАЖЕНИЕМ

5. В БЛОКЕ С ФИЛЬТРАМИ ТЕКСТ ТОЖЕ БУДЕТ "ОТФИЛЬТРОВАН"

ЧТО Я ДОЛЖЕН ПОМНИТЬ?

<div class="some-block">
    ПРИВЕТ, НГС! У НАС ТУТ 
    ВНУТРИ ВСЁ ОТФИЛЬТРОВАННОЕ.
</div>

.some-block{
  width: 300px;
  height: 200px;
  background: 
    url(http://lorempixel.com/300/200/);
  filter: 
    blur(1px) grayscale(40%) opacity(90%) 
    saturate(1.5);
  font-size: 24px;
  color: red;
}

ЧТО Я ДОЛЖЕН ПОМНИТЬ?

.some-block{
    filter: 
      drop-shadow(10px 10px 10px  #000);
}

.some-block{
    box-shadow: 
      10px 10px 10px  #000;
}

ЧТО НАСЧЕТ ПОДДЕРЖКИ БРАУЗЕРАМИ?

CLIP-PATH

ЧТО ЕСТЬ В PHOTOSHOP?

ЧТО ЕСТЬ В CSS?

ЧТО Я ДОЛЖЕН ПОМНИТЬ?

1. FIREFOX НЕ РЕАЛИЗОВАЛ clip-path ДЛЯ CSS, ТОЛЬКО SVG

2. CHROME ПОКА ЧТО НЕ РЕАЛИЗОВАЛ circle, ellipse И rectangle. ВЗАМЕН ПОСЛЕДНЕМУ МОЖНО ЮЗАТЬ

3. SAFARI УШЛИ ДАЛЬШЕ ВСЕХ, НО НЕ РЕАЛИЗОВАЛИ inset

4. ЭТИ ЖЕ СВОЙСТВА ЕСТЬ В SVG