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
ЧТО НАСЧЕТ ПОДДЕРЖКИ БРАУЗЕРАМИ?

NEW-CURRENT FEATURES IN CSS
By rayproud
NEW-CURRENT FEATURES IN CSS
- 1,524