Топ 5 потрясающих возможностей CSS3

Топ 5 потрясающих возможностей CSS3

Бывает что, увидев новую потрясающая CSS3 фичу, вам не терпится поскорее применить его в своих проектах. Но многие CSS3 возможности не сразу появляются во всех браузерах. Иногда приходится очень долго ждать, пока их включат в какой-либо браузер. Однако я спешу вас обрадовать, некоторые возможности CSS3 сейчас наконец поддерживаются во всех браузерах. И вы можете начать ими пользоваться прямо сейчас! Сегодня я о них и хочу поговорить.

1. CSS анимации и переходы

Такие потрясающие возможности CSS3, как анимации и переходы (transition) можно использовать во всех современных браузерах, даже в IE. Но тут стоит заметить, что в IE анимации доступны только начиная с 10-ой версии. Чтобы сделать анимации средствами CSS нужно просто добавить свойство transition. Синтаксис примерно такой:

div {
    transition: width 1s;
}

2. Вычисления значений с помощью calc()

Еще одно потрясающее CSS свойство - это calc(). Это свойство добавляет в CSS возможность арифметических вычислений. Это свойство отлично подходит для вычислений, например, ширины блоков или высоты.

.block {
    width: 100%;
    width: calc(100% - 40px);
}

3. Продвинутые селекторы

Уже давно прошли те времена, когда вам нужно было каждому блоку давать уникальные ID, только для того, чтобы задать им CSS свойства. С помощью CSS 2.1 и CSS3 вы можете задать стили с помощью большого количества селекторов.

/* Несколько примеров */
input[type=text] {
    color: #000;
}
li:nth-child(n) {
    color: #CCC;
}

Подробнее об этом можете почитать на сайте w3.org

4. Генерация контента через CSS

В CSS можно добавлять и генерировать контент с помощью псевдо селекторов как ::before и ::after. Эта фича сейчас поддерживать везде, вплоть до IE9.

5. CSS градиенты

Раньше, чтобы добавить градиент к какому-либо элементу, приходилось генерировать маленькое изображение и растягивать его по блоку. Но теперь эти времена прошли! В следующий раз, когда вам понадобится добавить градиент, сделайте это чисто средствами CSS.

background: linear-gradient(to bottom, blue, white);